JQuery选择器

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

《图6》
（外层的DIV 和内层的DIV一起都被选中，即页面body中的有的DIV一起被选中）

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

《图7》
（只选择body下第一级DIV元素）

三、过滤选择器
（一）基本过滤
1. :fist选取第一个元素
$("div:first")：选取所有div中的第一个
$("div:first")..css("background","#bbffaa");

《图8》

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

《图9》

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

《图10》

4. :even选取索引号是偶数的元素（索引从0开始）
$('div:even')：选取索引号是偶数项的div元素
$('div:even').css("background","#bbffaa");

《图11》

5. :odd选取索引号是奇数的元素（索引从0开始）
$('div:odd')：选取索引号是奇数项的div元素
$('div:odd').css("background","#bbffaa");

《图12》

6. :eq(index)选取第index个元素（索引从0开始）
$('div:eq(3)')：选择 索引等于 3 的元素
$('div:eq(3)').css("background","#bfa");

《图13》

7. :gt(index)选取索引号大于index的元素（索引从0开始）
$('div:gt(3)')：选择 索引大于 3 的元素
$('div:gt(3)').css("background","#bfa");

《图14》

8. :lt(index)选取索引号小于index的元素（索引从0开始）
$('div:lt(3)')：选择 索引小于 3 的元素
$('div:lt(3)').css("background","#bfa");

《图15》

9. :animated选取当前正在执行动画的元素
$(':animated')：选择 当前正在执行动画的所有元素.
$(':animated').css("background","#bfa");

《图16》

（二）内容过滤
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》

（三）可见性过滤
14. :hidden 选取所有不可见元素，包括<input type='hidden'>，<div style="display:none">，<div style="visibility:hidden">
$('div:visible')：选取所有可见的元素.
$('div:visible').css("background","#FF6500");

《图21》

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

《图22》

（四）属性过滤
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开始的元素
$('div[title^=te]')：选取 属性title值 以 te 开始 的div元素
$('div[title^=te]').css("background","#bbffaa");

《图26》

20. :[attribute$=value] 选取属性值以value结尾的元素
$("div[title$=est]")：选取 属性title值 以 est 结束 的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] 选取同时满足select1至selectorN的元素
$("div[id][title*=es]")：组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素
$("div[id][title*=es]").css("background","#bbffaa");

《图29》

（五）子元素过滤
23. :nth-child(index/even/odd) 选取每个父节点下第index个子元素、偶数元素或奇数元素。
$('div.one :nth-child(2)')：选取每个父元素下的第2个子元素
$('div.one :nth-child(2)').css("background","#bbffaa");

《图30》

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

《图31》

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

《图32》

26. :only-child 选取只有一个子元素的元素。
$('div.one :only-child')：如果父元素下的仅仅只有一个子元素，那么选中这个子元素
$('div.one :only-child').css("background","#bbffaa");

《图33》

（六）表单对象属性过滤
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")：选取所有被选中的元素（单选按钮和复选框）

30. :selected 选取被选中的选项元素（select中的option=selected）
$("select :selected")：选取所有被选中的列表项
如：
$("select :selected").each(function () {
str += $(this).text() + ",";
});
编历每个选中项，并把项的内容拼接到字符串str中。

四、表单选择器
1. :input选取所有的<input><textarea><select><button>等表单元素
2. :text选取所有的单行文本框
3. :password选取密码框
4. :radio选取所有的单选按钮
5. :checkbox选取所有的复选框
6. :submit选取所有的提交按钮
7. :image选取所有的图片按钮
8. :reset选取所有的重置按钮
9. :button按钮所有的按钮
10. :file选取所有的上传域
11. :hidden选取所有的不可见元素（前面讲过“过滤选择器-14”）

原创：灰灰虫的家 http://hi.baidu.com/grayworm