jq入门--选择器

选择器是JQuery一大特色，所有的DOM操作、事件操作、Ajax操作都离不开选择器。熟练掌握JQuery的选择器，可以节省很多代码，很大程序上简化我们的脚本编程工作。 
JQuery的选择器很类似于样式表的选择器。 

JQuery选择器的特点： 
1.简化代码编写 
$("#标记ID")相当于document.getElementById("标记ID")，是通过元素id来获取元素对象。 
$("标记名称")相当于document.getElementByTagName("标记名称")，是通过元素名称来获取元素组。 

2.隐式迭代 
$("标记名称").css("background-color","red"); 
“$("标记名称")”代表页面中一组元素； 
$("标记名称").css("background-color","red")则是为这组元素中每个元素的样式都加上红色背景。 
JQuery自动迭代每个元素，这就免去了我们编写代码编历每个元素对象的操作了。 

3.无需判断对象是否存在 
如果页面上不存在id为test的DOM 元素，$("#test").css("background-color","red")不会产生任何异常，而document.getElementById("test").style.backgroundColor='red'就会产生未找到对象的异常。 

JQuery选择器的分类：基本选择器，层次选择器，过滤选择器，表单选择器 

一、基本选择器： 
1. #ID选择器：根据给定的ID匹配一个元素 
$("#one")选取id为one的元素 
$("#one").css("background","#bbffaa"); 



《图1》 

2. .class选择器：根据class名选择匹配的元素 
$(".mini")选取class为mini的元素 
$(".mini").css("background","#bbffaa"); 




《图2》 

3.标签选择器：根据标签名选择元素 
$("div")选取所有div元素 
$("div").css("background","#bbffaa"); 




《图3》 

4.*选择器：选择所有的元素 
$("*")选取所有的元素 
$("*").css("background","#bbffaa"); 




《图4》 
（包括body在内的所有元素） 

5.selector1,selector2,selector3...selectorN ：返回指定选择器的元素 
$("span,#two")选取所有的span标签元素和id=two的元素。 
$("span,#two").css("background","#bbffaa"); 




《图5》 

二、层次选择器 
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.dd选取索引号是奇数的元素（索引从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》 

（原创：灰灰虫的家http://hi.baidu.com/grayworm） 
（三）可见性过滤 
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.nly-child选取只有一个子元素的元素。 
$('div.onenly-child')：如果父元素下的仅仅只有一个子元素，那么选中这个子元素 
$('div.onenly-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”）