內容提要：子元素過濾選擇器的過濾規則相對於其它的選擇器稍微有些複雜，不過沒關係，只要將元素的父元素和子元素區分清楚，那麼使用起來也非常簡單。另外還要注意它與普通的過濾選擇器的區別…
4．屬性過濾選擇器
屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素。屬性過濾選擇器的介紹說明如下表所示。
選擇器描 述
返 回示 例
[attribute]
選取擁有此屬性的元素
集合元素
$("div[id]")選取擁有屬性id的元素
[attribute=value]
選取屬性的值為value的元素
集合元素
$("div[title=test]")選取屬性title為"test"的元素
[attribute!=value]
選取屬性的值不等於value的元素
集合元素
$("div[title!=test]")選取屬性title不等於"test"的元素（注意：沒有屬性title的元素也會被選取）
[attribute^=value]
選取屬性的值以value開始的元素
集合元素
$("div[title^=test]")選取屬性title以"test"開始的元素
[attribute$=value]
選取屬性的值以value結束的元素
集合元素
$("div[title$=test]")選取屬性title以"test"結束的元素
[attribute*=value]
選取屬性的值含有value的元素
集合元素
$("div[title*=test]")選取屬性title含有"test"的元素
[selector][selector2]
[selectorn]
用屬性選擇器合併成乙個復合屬性選擇器，滿足多個條件。每選擇一次，縮小一次範圍
集合元素
$("div[id][title$='test']")選取擁有屬性id，並且屬性title以「test」結束的元素
接下來使用屬性過濾選擇器來對和等元素進行操作，示例如下表所示。
功 能代 碼
改變含有屬性title的元素的背景色
$('div[title]').css("background", "#bbffaa")
改變屬性title值等於「test」的元素的背景色
$('div[title=test]').css("background", "#bbffaa")
改變屬性title值不等於「test」的元素的背景色
$('div[title!=test]').css("background", "#bbffaa")
改變屬性title值以「te」開始的元素的背景色
$('div[title^=te]').css("background", "#bbffaa")
改變屬性title值以「est」結束的元素的背景色
$('div[title$=est]').css("background", "#bbffaa")
改變屬性title值含有「es」的元素的背景色
$('div[title*=es]').css("background", "#bbffaa")
改變含有屬性id，並且屬性title值
含有「es」的元素的背景色
$('div[id][title*=es]').css("background", "#bbffaa")
子元素過濾選擇器的過濾規則相對於其它的選擇器稍微有些複雜，不過沒關係，只要將元素的父元素和子元素區分清楚，那麼使用起來也非常簡單。另外還要注意它與普通的過濾選擇器的區別。
子元素過濾選擇器的介紹說明如下表所示。
選擇器描 述
返 回示 例
: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");選取每個中第1個元素
:last-child
選取每個父元素的最後乙個子元素
集合元素
同樣，:last只返回單個元素，而:last-child選擇符將為每個父元素匹配最後乙個子元素。
例如$("ul li:first-child");選擇每個中最後乙個元素
:only-child
如果某個元素是它父元素中惟一的子元素，那麼將會被匹配。如果父元素中含有其他元素，則不會被匹配
集合元素
$("ul li:only-child")在中選取是惟一子元素的元素
: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開始）
接下來利用剛才所講的選擇器來改變元素的背景色，示例如下表所示。
功 能代 碼
改變每個class為one的父元素下的第2個子元素的背景色
$('div.one :nth-child(2)').css("background", "#bbffaa")
改變每個class為one的父元素下的第1個子元素的背景色
$('div.one :first-child').css("background", "#bbffaa")
改變每個class為one的父元素下的最後乙個了元素的背景色
$('div.one :last-child').css("background", "#bbffaa")
如果class為one的父元素下只有乙個子元素，那麼則改變這個子元素的背景色
$('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也類似。
此選擇器主要是對所選擇的表單元素進行過濾，例比如選擇被選中的下拉框，多選框等等。表單物件屬性過濾選擇器的介紹說明如下表所示。
選擇器描 述
返 回示 例
:enabled
選取所有可用元素
集合元素
$("#form1 :enabled");選取id為「form1」的表單內的所有可用元素
:disabled
選取所有不可用元素
集合元素
$("#form2 :disabled");選取id為「form2」的表單內的所有不可用元素
:checked
選取所有被選中的元素（單選框，核取方塊）
集合元素
$("input :checked");選取所有被選中的元素
:selected
選取所有被選中的選項元素（下拉列表）
集合元素
$("select :selected");選取所有被選中的選項元素
為了演示這些選擇器，需要製作乙個包含表單的網頁，裡面要包含文字框、多選框和下拉列表，html**如下：
圖2 初始狀態現在用jquery的表單過濾選擇器來操作它們，示例如下表所示。
功 能代 碼
改變表單內可用元素的值
$("#form1 input:enabled").val("這裡變化了！");
改變表單內不可用元素的值
$("#form1 input:disabled").val("這裡變化了！");
獲取多選框選中的個數
$("#input :checked").length;
獲取下拉框選中的內容
$("select :selected").text();
JQurey 常用選擇器
contains text 匹配包含給定文字的元素 empty 匹配所有不包含子元素或者文字的空元素 has selector 匹配含有選擇器所匹配元素的元素 parent 選取含有子元素或者文字的元素 hidden 選取所有不可見的元素 visible 選取所有可見的元素 attribute 選取...
前端 jQurey的選擇器
通過元素id class和標籤名等來查詢dom元素。通過dom之間的層次關係，如後代元素 子元素 相鄰元素和同輩元素等來獲取特定元素。1 改變中所有的背景色 body div css background bbffaa 2 改變內子的背景色 body div css background bbffa...
jQuery過濾選擇器詳解
選擇第乙個div元素.btn1 click function 選擇最後乙個div元素.btn2 click function 選擇class不為one的 所有div元素.btn3 click function 選擇 索引值為偶數 的div元素。btn4 click function 選擇 索引值為奇...