jqurey過濾選擇器詳解

內容提要：子元素過濾選擇器的過濾規則相對於其它的選擇器稍微有些複雜，不過沒關係，只要將元素的父元素和子元素區分清楚，那麼使用起來也非常簡單。另外還要注意它與普通的過濾選擇器的區別…

4．屬性過濾選擇器

　　屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素。屬性過濾選擇器的介紹說明如下表所示。

選擇器	描 述	返 回	示 例
[attribute]	選取擁有此屬性的元素	集合元素	$("div[id]")選取擁有屬性id的元素
[attribute=value]	選取屬性的值爲value的元素	集合元素	$("div[title=test]")選取屬性title爲"test"的<div>元素
[attribute!=value]	選取屬性的值不等於value的元素	集合元素	$("div[title!=test]")選取屬性title不等於"test"的<div>元素（注意：沒有屬性title的<div>元素也會被選取）
[attribute^=value]	選取屬性的值以value開始的元素	集合元素	$("div[title^=test]")選取屬性title以"test"開始的<div>元素
[attribute$=value]	選取屬性的值以value結束的元素	集合元素	$("div[title$=test]")選取屬性title以"test"結束的<div>元素
[attribute*=value]	選取屬性的值含有value的元素	集合元素	$("div[title*=test]")選取屬性title含有"test"的<div>元素
[selector][selector2] [selectorN]	用屬性選擇器合併成一個複合屬性選擇器，滿足多個條件。每選擇一次，縮小一次範圍	集合元素	$("div[id][title$='test']")選取擁有屬性id，並且屬性title以“test”結束的<div>元素

　　接下來使用屬性過濾選擇器來對<div>和<span>等元素進行操作，示例如下表所示。

功 能	代 碼
改變含有屬性title的<div>元素的背景色	$('div[title]').css("background", "#bbffaa")
改變屬性title值等於“test”的<div>元素的背景色	$('div[title=test]').css("background", "#bbffaa")
改變屬性title值不等於“test”的<div>元素的背景色	$('div[title!=test]').css("background", "#bbffaa")
改變屬性title值以“te”開始的<div>元素的背景色	$('div[title^=te]').css("background", "#bbffaa")
改變屬性title值以“est”結束的<div>元素的背景色	$('div[title$=est]').css("background", "#bbffaa")
改變屬性title值含有“es”的<div>元素的背景色	$('div[title*=es]').css("background", "#bbffaa")
改變含有屬性id，並且屬性title值 含有“es”的<div>元素的背景色	$('div[id][title*=es]').css("background", "#bbffaa")

5．子元素過濾選擇器

　　子元素過濾選擇器的過濾規則相對於其它的選擇器稍微有些複雜，不過沒關係，只要將元素的父元素和子元素區分清楚，那麼使用起來也非常簡單。另外還要注意它與普通的過濾選擇器的區別。

　　子元素過濾選擇器的介紹說明如下表所示。

選擇器	描 述	返 回	示 例
:nth-child (index/even/ odd/equation)	選取每個父元素下的第index個子元素或者奇偶元素,(index從1算起)	集合元素	:eq(index)只匹配一個元素，而:nth-child將爲每一個父元素匹配子元素，並且：nth-child(index)的index是從1開始的，而:eq(index)是從0算起的
:first-child	選取每個父元素的第1個子元素	集合元素	first只返回單個元素，而:first-child選擇符將爲每個父元素匹配第1個子元素。 例如$("ul li:first-child");選取每個<ul>中第1個<li>元素
:last-child	選取每個父元素的最後一個子元素	集合元素	同樣，:last只返回單個元素，而:last-child選擇符將爲每個父元素匹配最後一個子元素。 例如$("ul li:first-child");選擇每個<ul>中最後一個<li>元素
:only-child	如果某個元素是它父元素中惟一的子元素，那麼將會被匹配。如果父元素中含有其他元素，則不會被匹配	集合元素	$("ul li:only-child")在<uI>中選取是惟一子元素的<li>元素

:nth-child()選擇器是很常用的子元素過濾選擇器，詳細功能如下。

(1) :nth-child(even)能選取每個父元素下的索引值是偶數的元素。

(2) :nth-child(odd)能選取每個父元素下的索引值是奇數的元素。

(3) :nth-child(2)能選取每個父元素下的索引值等於2的元素。

(4) :nth-child(3n)能選取每個父元下的索引值是3的倍數的元素。（n從0開始）

(5) :nth-child(3n+1)能選取每個父元素下的索引值是(3n+1)的元素。（n從0開始）

　　接下來利用剛纔所講的選擇器來改變<div>元素的背景色，示例如下表所示。

功 能	代 碼
改變每個class爲one的<div>父元素下的第2個子元素的背景色	$('div.one :nth-child(2)').css("background", "#bbffaa")
改變每個class爲one的<div>父元素下的第1個子元素的背景色	$('div.one :first-child').css("background", "#bbffaa")
改變每個class爲one的<div>父元素下的最後一個了元素的背景色	$('div.one :last-child').css("background", "#bbffaa")
如果class爲one的<div>父元素下只有一個子元素，那麼則改變這個子元素的背景色	$('div.one :only-child').css("background", "#bbffaa")

　　注意：eq(index)只匹配一個元素，而:nth- child將爲每一個符合條件的父元素匹配子元素。同時應該注意到nth-child(index)的index是從1開始的，而:eq(index)是 從0開始的。同理 :first和:first-child，:last和:last-child也類似。

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

　　此選擇器主要是對所選擇的表單元素進行過濾，例比如選擇被選中的下拉框，多選框等等。表單對象屬性過濾選擇器的介紹說明如下表所示。

選擇器	描 述	返 回	示 例
:enabled	選取所有可用元素	集合元素	$("#form1 :enabled");選取id爲“form1”的表單內的所有可用元素
:disabled	選取所有不可用元素	集合元素	$("#form2 :disabled");選取id爲“form2”的表單內的所有不可用元素
:checked	選取所有被選中的元素（單選框，複選框）	集合元素	$("input :checked");選取所有被選中的<input>元素
:selected	選取所有被選中的選項元素（下拉列表）	集合元素	$("select :selected");選取所有被選中的選項元素

　　爲了演示這些選擇器，需要製作一個包含表單的網頁，裏面要包含文本框、多選框和下拉列表，HTML代碼如下：

<form id="form1" action="#">
可用元素：<input name="add" value="可用文本框"/> <br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素： <input name="che" value="可用文本框" /><br/>
不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
<br/>
多選框：<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<div></div>

<br/><br/>
下拉列表1：<br/>
select name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>廣州</option>
<option>湖北</option>
</select>

<br/><br/>
下拉列表2：<br/>
<select name="test2" >
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
br/><br/>

<div></div>
</form>

圖2 初始狀態

　　現在用jQuery的表單過濾選擇器來操作它們，示例如下表所示。

功 能	代 碼
改變表單內可用<input>元素的值	$("#form1 input:enabled").val("這裏變化了！");
改變表單內不可用<input>元素的值	$("#form1 input:disabled").val("這裏變化了！");
獲取多選框選中的個數	$("#input :checked").length;
獲取下拉框選中的內容	$("select :selected").text();