選擇器并沒有一個固定的定義，在某種程度上說，jQuery的選擇器和樣式表中的選擇器十分相似。選擇器具有如下特點(diǎn)：

1．簡化代碼的編寫
2．隱式迭代
3．無須判斷對象是否存在

其中“$”是選擇器不可缺少的部分，在jQuery庫中，$就是jQuery的一個簡寫形式，比如$("#foo")和jQuery("#foo")是等價的，$.ajax和jQuery.ajax是等價的。如果沒有特別說明，可以把程序中的$符號都理解為jQuery的簡寫形式。
現(xiàn)在我們正式進(jìn)入jQuery選擇器的學(xué)習(xí)。根據(jù)選擇器的功能習(xí)慣將選擇器進(jìn)行分類，下面將不同類型的分類器進(jìn)行分類，并且分別進(jìn)行解釋說明，使讀者達(dá)到掌握程度。

一、基本選擇器

基本選擇器包括5種選擇器：#id、element、.class、*和selectorl,selector2.selectorN，下面將配合實(shí)例分別介紹每種選擇器的作用及使用方法。

1．#id選擇器

#id選擇器根據(jù)給定的ID匹配一個元素。如果選擇器中包含特殊字符，可以用兩個斜杠轉(zhuǎn)義，其返回值為Array<Element>。

$("#id")
<div id="id">選中 </div>

2．element選擇器

element選擇器是一個用于搜索的元素。指向DOM節(jié)點(diǎn)的標(biāo)簽名。其返回值為Array<Element(s)>。

3．class選擇器

.class選擇器根據(jù)給定的類匹配元素，是一個用以搜索的類。一個元素可以有多個類，只要有一個符合就能被匹配到，其返回值為Array<Element(s)>。

舉例：

<input type="text" id="ID" value="根據(jù)ID選擇" />
<a>根據(jù)元素名稱選擇</a>
<input type="text" class="classname" value="根據(jù)元素css類名選擇" />
jQuery("#ID").val();
jQuery("a").text();
jQuery(".classname").val();

即可分別得到元素的值。以上三種為最常見的選擇器，其中ID選擇器是效率最高的，在可能的情況下應(yīng)該盡量使用它。

4．*選擇器

*選擇器多用于結(jié)合上下文來搜索，匹配所有元素的選擇器。其返回值為Array<Element(s)>。

5．selector1,selector2,selectorN選擇器
這類選擇器選擇器即將每一個選擇器匹配到的元素合并后一起返回。你可以指定任意多個選擇器，并將匹配到的元素合并到一個結(jié)果內(nèi)，其返回值為：Array<Element(s)>。在下例中通過對選擇的項(xiàng)進(jìn)行CSS操作來使讀者清晰地了解selector1,selector2,selectorN選擇器的作用。

二、層級選擇器

層級選擇器包括5種形式：ancestor、descendant、parent > child、prev + next和prev ~ siblings。下面配合實(shí)例分別詳細(xì)介紹每種選擇器的作用及使用方法。

1．a(chǎn)ncestor descendant選擇器

其指在給定的祖先元素下匹配所有的后代元素，作為參數(shù)的ancestor代表任何有效的選擇器，而descendant則用以匹配元素的選擇器，并且它是第一個選擇器的后代。其返回值為：Array<Element(s)>。

2．parent>child選擇器

parent>child選擇器代表在給定的父元素下匹配所有的子元素。兩個參數(shù)分別代表的意思如下：parent代表任何有效選擇器；child用以匹配元素的選擇器，并且它是第一個選擇器的子元素。其返回值為Array<Element(s)>。

3．prev+next選擇器

這類選擇器的作用是匹配所有緊接在prev元素后的next元素。兩個參數(shù)分別代表的意思如下：prev代表任何有效選擇器；next代表一個有效選擇器并且緊接著第一個選擇器。其返回值為Array<Element(s)>。

4．prev ~ siblings選擇器

prev ~ siblings選擇器代表匹配prev元素之后的所有siblings元素。兩個參數(shù)分別代表的意思如下：prev代表任何有效選擇器；siblings代表一個選擇器，并且它作為第一個選擇器的同輩。其返回值為Array<Element(s)>。

舉例：

<div id="divTest">
??????? <input type="text" value="投資" />
??????? <input id="next" type="text" />
??????? <input type="text"? value="擔(dān)當(dāng)" />
??????? <input type="text" title="學(xué)習(xí)" value="學(xué)習(xí)" />
??????? <a>1</a>
??????? <a>2</a>
</div>
//得到div中的a標(biāo)簽內(nèi)容 結(jié)果為12
jQuery("#divTest a").text();
//輸出div直接子節(jié)點(diǎn) 結(jié)果為投資
jQuery("#divTest>input").val();
//輸出id為next的后一個同級別元素 結(jié)果為擔(dān)當(dāng)
jQuery("#next+input").val();
//同上，并且是有title的元素 結(jié)果為學(xué)習(xí)
jQuery("#next~[title]").val();

三、過濾選擇器

過濾選擇器主要通過特定的過濾規(guī)則來篩選出所需要的DOM元素，過濾規(guī)則與CSS中的偽類選擇器語法相同，即選擇器都以一個冒號開頭。
過濾選擇器涉及的內(nèi)容較多，總共有6 種類型，但是其可以進(jìn)行歸類。下面我們將對各種類型的選擇器進(jìn)行詳細(xì)講解。

1．基本過濾選擇器

基本過濾選擇器是過濾選擇器中最常用的一種，其主要包括以下幾種形式，在此做詳細(xì)說明：
（1）:first/:last選擇器。
（2）:not選擇器。
（3）:even和:odd選擇器。
（4）:eq:gt、:lt、選擇器。
（5）:header選擇器。
（6）:animated選擇器。

舉例：

<div id="divTest">
??? <ul>
??????? <li>投資</li>
??????? <li>理財</li>
??????? <li>成熟</li>
??????? <li>擔(dān)當(dāng)</li>
??????? <input type="radio" value="學(xué)習(xí)" checked="checked" />
??????? <input type="radio" value="不學(xué)習(xí)" />
??? </ul>
</div>
//第一個li內(nèi)容 結(jié)果為投資
jQuery("li:first").text();
//最后一個li內(nèi)容 結(jié)果為擔(dān)當(dāng)
jQuery("li:last").text();
//input未被選中的值 結(jié)果為不學(xué)習(xí)
jQuery("li input:not(:checked)").val();
//索引為偶數(shù)的li 結(jié)果為投資 成熟
jQuery("li:even").text();
//索引為奇數(shù)的li 結(jié)果為理財 擔(dān)當(dāng)
jQuery("li:odd").text();
//索引大于2的li的內(nèi)容 結(jié)果為擔(dān)當(dāng)
jQuery("li:gt(2)").text();
//索引小于1的li的內(nèi)容 結(jié)果為投資
jQuery("li:lt(1)").text();

2.內(nèi)容過濾選擇器

內(nèi)容過濾選擇器主要包括:contains、:empty、:has、:parent 4種過濾器，這部分過濾器是對上面介紹基本過濾選擇器的一個補(bǔ)充，對于頁面選取、設(shè)置元素顯示等方面發(fā)揮著重要的作用。下面將對各選擇器進(jìn)行詳細(xì)的介紹。

（1）:contains選擇器。
（2）:empty選擇器。
（3）:has選擇器。
（4）:parent選擇器。

舉例：

<div id="Test">
??? <ul>
??????? <li>hyip投資</li>
??????? <li>hyip</li>
??????? <li></li>
??????? <li>理財</li>
??????? <li><a>投資</a></li>
??? </ul>
</div>??
//包含hyip的li的內(nèi)容 結(jié)果為hyip投資 hyip
jQuery("li:contains('hyip')").text();
//內(nèi)容為空的li的后一個li內(nèi)容 結(jié)果為理財
jQuery("li:empty+li").text();
//包含a標(biāo)簽的li的內(nèi)容 結(jié)果為投資
jQuery("li:has(a)").text();

3．可見性過濾選擇器

可見性過濾選擇器比較簡單，其包含兩種選擇器，主要是用來匹配所有可見元素和不可見元素。下面將會對這兩種選擇器進(jìn)行詳細(xì)介紹。
（1）:hidden選擇器。
（2）:visible選擇器。

舉例：

<ul>
??? <li>可見</li>
??? <li style="display:none;">不可見</li>
</ul>
//不可見的li的內(nèi)容 結(jié)果為不可見
jQuery("li:hidden").text();
//可見的li的內(nèi)容 結(jié)果為可見
jQuery("li:visible").text();

4．屬性過濾選擇器

屬性過濾選擇器是用于匹配包含給定屬性的元素，當(dāng)然也可以匹配不包含此屬性的元素等。屬性過濾選擇器共含有以下7種選擇器。

（1） [attribute]選擇器。
（2）[attribute=value]、[attribute!=value]選擇器（此處包含兩種）。
（3）[attribute^=value]、[attribute$=value]、[attribute*=value]選擇器（此處包含三種）。
（4）[selector][selector2]選擇器。

舉例：

<input type="text" name="hyipinvest" value="hyip投資" />
<input type="text" name="investhyip" value="投資hyip" />
<input type="text" name="google" value="HYIP" />
//name為hyipinvest的值 結(jié)果為hyip投資
alert(jQuery("input[name='hyipinvest']").val());
//name以hyip開始的值 結(jié)果為hyip投資
alert(jQuery("input[name^='hyip']").val());
//name以hyip結(jié)束的值 結(jié)果為投資hyip
alert(jQuery("input[name$='hyip']").val());
//name包含oo的值 結(jié)果為HYIP
alert(jQuery("input[name*='oo']").val());

5．子元素過濾選擇器

html由層層嵌套在一起的標(biāo)簽組成，由于一些標(biāo)簽需要進(jìn)行單獨(dú)處理，如何選取一個或者一些特定的嵌套標(biāo)簽在程序中就成為了一個問題。jQuery提供了子元素過濾選擇器解決了這個問題。它包括4個選擇器，具體內(nèi)容將在下面詳細(xì)講解。
（1）:nth-child選擇器。
（2）:first-child、:last-child選擇器（兩種）。
（3）:only-child選擇器。

6．表單對象屬性過濾選擇器

這部分內(nèi)容相當(dāng)簡單，只包含四種類型的選擇器，這些選擇器分別用來匹配可用元素或者不可用元素、選中元素等。下面將以實(shí)例的形式對此部分內(nèi)容進(jìn)行講解。
（1）:enabled、:disabled選擇器。
（2）:checked選擇器。
（3）:selected選擇器。
表單過濾選擇器是用于處理html中表單的選擇器，其中不僅僅包括經(jīng)常用到的按鈕、文本域、單選框、復(fù)選框等，還涉及了很少用到的圖片、隱藏域、文件上傳等標(biāo)簽。下面將會對這些選擇器進(jìn)行具體介紹。
（1）:input選擇器。
（2）:text、:password選擇器。
（3）:radio、:checkbox選擇器。
（4）:submit、:image、:reset、:button、:file選擇器。
（5）:hidden選擇器。

JQuery選擇器就總結(jié)到這里，這些基本上都是在學(xué)習(xí)過程中遇到的，還有極少部分沒有總結(jié)出來。經(jīng)過一段時間實(shí)踐，相信大家就能夠熟練的使用jQuery選擇器了。

最新評論