二、層次選擇器
1.$("ancestor descendant")： 選取ancestor元素后所有的descendant元素：
$("body div")：選取body元素下所有的div元素
$("body div").css("background","#bbffaa");

《圖6》
（外層的DIV 和內(nèi)層的DIV一起都被選中，即頁(yè)面body中的有的DIV一起被選中）

2.$("parent > child")： 選取parent元素下的第一級(jí)child。
$("body > div")：選取body元素下所有的div元素
$("body > div").css("background","#bbffaa");

《圖7》
（只選擇body下第一級(jí)DIV元素）

三、過(guò)濾選擇器
（一）基本過(guò)濾
1. :fist選取第一個(gè)元素
$("div:first")：選取所有div中的第一個(gè)
$("div:first")..css("background","#bbffaa");

《圖8》

2. :last選取最后一個(gè)元素
$("div:last")：選取所有div中的最后一個(gè)
$("div:last").css("background","#bbffaa");

《圖9》

3. :not(selector)除去指定的選擇器外的元素
$('div:not(.one)')：選取class不是.one的div元素
$('div:not(.one)').css("background","#bbffaa");

《圖10》

4. :even選取索引號(hào)是偶數(shù)的元素（索引從0開(kāi)始）
$('div:even')：選取索引號(hào)是偶數(shù)項(xiàng)的div元素
$('div:even').css("background","#bbffaa");

《圖11》

5. :odd選取索引號(hào)是奇數(shù)的元素（索引從0開(kāi)始）
$('div:odd')：選取索引號(hào)是奇數(shù)項(xiàng)的div元素
$('div:odd').css("background","#bbffaa");

《圖12》

6. :eq(index)選取第index個(gè)元素（索引從0開(kāi)始）
$('div:eq(3)')：選擇 索引等于 3 的元素
$('div:eq(3)').css("background","#bfa");

《圖13》

7. :gt(index)選取索引號(hào)大于index的元素（索引從0開(kāi)始）
$('div:gt(3)')：選擇 索引大于 3 的元素
$('div:gt(3)').css("background","#bfa");

《圖14》

8. :lt(index)選取索引號(hào)小于index的元素（索引從0開(kāi)始）
$('div:lt(3)')：選擇 索引小于 3 的元素
$('div:lt(3)').css("background","#bfa");

《圖15》

9. :animated選取當(dāng)前正在執(zhí)行動(dòng)畫(huà)的元素
$(':animated')：選擇 當(dāng)前正在執(zhí)行動(dòng)畫(huà)的所有元素.
$(':animated').css("background","#bfa");

《圖16》

（二）內(nèi)容過(guò)濾
10. :contains(text) 選取包含文本text的元素
$('div:contains(di)')：選取含有文本"di"的div元素.
$('div:contains(di)').css("background","#bbffaa");

《圖17》

11. :has(selector) 選取含有選擇器所匹配的元素的元素
$('div:has(.mini)')選取含有class為mini元素 的div元素.
$('div:has(.mini)').css("background","#bbffaa");

《圖18》

12. :empty 選取不包含子元素（包括文本元素）的元素
$('div:empty')：選取不包含子元素(或者文本元素)的div空元素.
$('div:empty').css("background","#bbffaa");

《圖19》

13. :parent 選取包含子元素（包括文本元素）的元素
$('div:parent')：選取含有子元素(或者文本元素)的div元素.
$('div:parent').css("background","#bbffaa");

《圖20》

（三）可見(jiàn)性過(guò)濾
14. :hidden 選取所有不可見(jiàn)元素，包括<input type='hidden'>，<div style="display:none">，<div style="visibility:hidden">
$('div:visible')：選取所有可見(jiàn)的元素.
$('div:visible').css("background","#FF6500");

《圖21》

15. :visible 選取所有可見(jiàn)元素
$('div:hidden')：選取所有不可見(jiàn)的元素.包括<input type="hidden"/>.
$('div:hidden').show(3000).css("background","#bbffaa");

《圖22》

（四）屬性過(guò)濾
16. :[attribute] 選取擁有此屬性的元素
$('div[title]')：選取含有 屬性title 的div元素.
$('div[title]').css("background","#bbffaa");

《圖23》

17. :[attribute=value] 選取屬性值為value的元素
$('div[title=test]')：選取 屬性title值等于 test 的div元素
$('div[title=test]').css("background","#bbffaa");

《圖24》

18. :[attribute!=value] 選取屬性值不為value的元素
$('div[title!=test]')：選取 屬性title值不等于 test 的div元素
$('div[title!=test]').css("background","#bbffaa");

《圖25》

19. :[attribute^=value] 選取屬性值以value開(kāi)始的元素
$('div[title^=te]')：選取 屬性title值 以 te 開(kāi)始 的div元素
$('div[title^=te]').css("background","#bbffaa");

《圖26》

20. :[attribute$=value] 選取屬性值以value結(jié)尾的元素
$("div[title$=est]")：選取 屬性title值 以 est 結(jié)束 的div元素
$("div[title$=est]").css("background","#bbffaa");

《圖27》

21. :[attribute*=value] 選取屬性值含有value的元素
$("div[title*=es]")：選取 屬性title值 含有 es 的div元素
$("div[title*=es]").css("background","#bbffaa");

《圖28》

22. :[selector1][selector2]...[selectorN] 選取同時(shí)滿足select1至selectorN的元素
$("div[id][title*=es]")：組合屬性選擇器,首先選取有屬性id的div元素，然后在結(jié)果中 選取屬性title值 含有 es 的元素
$("div[id][title*=es]").css("background","#bbffaa");

《圖29》

（五）子元素過(guò)濾
23. :nth-child(index/even/odd) 選取每個(gè)父節(jié)點(diǎn)下第index個(gè)子元素、偶數(shù)元素或奇數(shù)元素。
$('div.one :nth-child(2)')：選取每個(gè)父元素下的第2個(gè)子元素
$('div.one :nth-child(2)').css("background","#bbffaa");

《圖30》

24. :first-child 選取每個(gè)父元素下的第一個(gè)子元素
$('div.one :first-child')：選取每個(gè)父元素下的第一個(gè)子元素
$('div.one :first-child').css("background","#bbffaa");

《圖31》

25. :last-child 選取每個(gè)父元素下的最后一個(gè)子元素
$('div.one :last-child')：選取每個(gè)父元素下的最后一個(gè)子元素
$('div.one :last-child').css("background","#bbffaa");

《圖32》

26. :only-child 選取只有一個(gè)子元素的元素。
$('div.one :only-child')：如果父元素下的僅僅只有一個(gè)子元素，那么選中這個(gè)子元素
$('div.one :only-child').css("background","#bbffaa");

《圖33》

（六）表單對(duì)象屬性過(guò)濾
27. :enabled 選取所有可用的元素
$("#form1 input:enabled") ：選取所有可用元素
$("#form1 input:enabled").val("這里變化了！");

《圖34》

28. :disabled 選取所有不可用的元素
$("#form1 input:disabled")：選取所有不可用元素
$("#form1 input:disabled").val("這里變化了！");

《圖35》

29. :checked 選取所有被選中的元素（radio,checkbox中的checked）
$("input:checked")：選取所有被選中的元素（單選按鈕和復(fù)選框）

30. :selected 選取被選中的選項(xiàng)元素（select中的option=selected）
$("select :selected")：選取所有被選中的列表項(xiàng)
如：
$("select :selected").each(function () {
str += $(this).text() + ",";
});
編歷每個(gè)選中項(xiàng)，并把項(xiàng)的內(nèi)容拼接到字符串str中。

四、表單選擇器
1. :input選取所有的<input><textarea><select><button>等表單元素
2. :text選取所有的單行文本框
3. :password選取密碼框
4. :radio選取所有的單選按鈕
5. :checkbox選取所有的復(fù)選框
6. :submit選取所有的提交按鈕
7. :image選取所有的圖片按鈕
8. :reset選取所有的重置按鈕
9. :button按鈕所有的按鈕
10. :file選取所有的上傳域
11. :hidden選取所有的不可見(jiàn)元素（前面講過(guò)“過(guò)濾選擇器-14”）

?

原創(chuàng)：灰灰蟲(chóng)的家 http://hi.baidu.com/grayworm