這篇文章主要為大家展示了“jQuery選擇符基礎(chǔ)知識(shí)點(diǎn)有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jQuery選擇符基礎(chǔ)知識(shí)點(diǎn)有哪些”這篇文章吧。
其實(shí) jQuery 的選擇符主要是利用了 CSS 和 XPath 選擇符的能力，當(dāng)然還包括 jQuery的自定義選擇符，從而讓我們?cè)?DOM 樹(shù)中能夠方便和靈活的 獲取 各類元素 或者 元素組。
上面提到的三種選擇符類型（CSS，XPath，自定義）在 jQuery 中使用時(shí)都是以 $() 函數(shù)開(kāi)始和表示的，該函數(shù)稱為 工廠函數(shù)。
放置于 $() 中的任何元素都會(huì)自動(dòng)執(zhí)行循環(huán)遍歷，并保存至一個(gè) jQuery 對(duì)象中。而$()函數(shù)可以使用的參數(shù)常用的有：
+ 標(biāo)簽名，如：$('p')，取得文檔中的所有 段落；
+ ID，如：$('#some-id')，取得文檔中具有對(duì)應(yīng)的 some-id ID 的 一個(gè) 元素，如果你使用了同一 some-id 多次，只會(huì)取得第一個(gè)使用 id="some-id" 的元素；
+ class，如：$('.some-class')，取得文檔中帶有 some-class 的所有元素；
下面對(duì)幾種類型的選擇符的使用分別進(jìn)行總結(jié)（主要是貼一些示例）。
1，CSS 選擇符
| // 給 id 為 selected-ul 的 ul 元素下的第一級(jí)列表元素添加 樣式 horizontal $('#selected-ul > li').addClass('horizontal'); |
這里的：
+ > 為 子元素組合符，語(yǔ)法格式為 $('parent > child')，只選擇 parent 的第一代子元素，注意 $('parent child')是包含 parent 下所有后代的子元素，如下；
| // 給 id 為 selected-ul 的 ul 元素下得所有級(jí)別的 // 不包含 class=horizontal 的 列表元素 li添加樣式 sub-level $('#selected-ul li:not(.horizontal)').addClass('sub-level'); |
+ 這里又涉及到一個(gè) 否定式偽類選擇符 :not(selector)，用于選擇所有 去除不匹配 給定的選擇器 的 元素；如：not(div a) 或 not(div, a)。其他相似的還有：
+ has(selector)，選擇含有 selector 所匹配的至少一個(gè)元素的 元素，如：
| // 匹配一個(gè) div，如果其后代中任何級(jí)別（不僅僅是直接子元素）的子元素為 p $('div:has(p)') |
+ addClass 用于為每個(gè)匹配的元素添加指定的 class 名，一般和 removeClass() 結(jié)合起來(lái)使用，如下：
$('p').removeClass('myClass noClass').addClass('yourClass'); |
從 jQuery 1.4 開(kāi)始，addClass 開(kāi)始支持通過(guò) function 來(lái)設(shè)置樣式名，如下示例：
| // 給定一個(gè)有 5 個(gè) li 元素的無(wú)需列表 ul 中，在最后一個(gè) li 元素上加上 item-4 樣式 $('ul li:last').addClass(function() { return 'item-' + $(this).index(); }); |
2，XPath 類型的選擇符
XPath 全稱 XML Path Language，XML 路徑語(yǔ)言。是在 XML 文檔中識(shí)別不同元素或元素值的語(yǔ)言。Wiki 上的描述如下( http://zh.wikipedia.org/zh-hans/XPath )：
| XPath即為XML路徑語(yǔ)言（XML Path Language），它是一種用來(lái)確定XML文檔中某部分位置的語(yǔ)言。 XPath基于XML的樹(shù)狀結(jié)構(gòu)，提供在數(shù)據(jù)結(jié)構(gòu)樹(shù)中找尋節(jié)點(diǎn)的能力。起初 XPath 的提出的初衷是將其作為一個(gè)通用的、介于XPointer與XSL間的語(yǔ)法模型。但是 XPath 很快的被開(kāi)發(fā)者采用來(lái)當(dāng)作小型查詢語(yǔ)言。 |
jQuery 庫(kù)支持一組基本的 XPath 選擇符。
+ 屬性選擇符(attribute selector)，這個(gè)仍然沿用了 XPath 中的慣例，使用 @ 來(lái)標(biāo)識(shí)屬性，如下：
| // 選擇所有帶 title 屬性的鏈接 $('a[@title]') |
屬性選擇符也可以使用 ^，$，* 分別標(biāo)識(shí)字符串的開(kāi)始，結(jié)尾 以及 字符串中的任意位置。示例如下：
| // 給所有屬性 href 值以 mailto: 開(kāi)頭的鏈接添加 class = mailto $('a[@href^="mailto:"]').addClass('mailto'); // 給所有屬性 href 值以 .pdf 結(jié)尾的鏈接添加 class = pdflink $('a[@href$=".pdf"]').addClass('pdflink'); // 給所有屬性 href 值中含有 mysite.com 的鏈接添加 class = mysite $('a[@href*="mysite.com"]').addClass('mysite'); |
3，自定義選擇符
自定義選擇符是以冒號(hào)(:)開(kāi)頭，先看如下示例：
| // 從匹配的帶有 horizontal 類的 div 集合中，選擇第 2 個(gè)項(xiàng) $('div.horizontal:eq(1)'); // 另一種表示法 CSS 選擇符 $('div:nth-child(2)'); |
第一個(gè)為自定義選擇符方式，基于 JavaScript 的語(yǔ)法規(guī)則，而在 JavaScript 中數(shù)組的索引從 0 開(kāi)始，而 CSS 規(guī)范中數(shù)組的索引從 1 開(kāi)始。這兩個(gè)我開(kāi)始以為都是 自定義選擇符呢，看了 API 文檔才知道 :nth-child() 是嚴(yán)格來(lái)自 CSS 規(guī)范的 :(
與 :eq 類似的 索引相關(guān) 的 自定義選擇符還有 :lt()，:gt()，:even()，:odd()。
以上是“jQuery選擇符基礎(chǔ)知識(shí)點(diǎn)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
