jq入门--选择器

JQuery霹雳：二、选择器
2010年01月08日 星期五 09:21
（原创：灰灰虫的家http://hi.baidu.com/grayworm）
选择器是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”）

参考书籍：《锋利的JQuery》
（原创：灰灰虫的家http://hi.baidu.com/grayworm）