Jquery常用的的选择器及容易忽视的小错误

JQuery常用的的选择器及容易忽视的小错误

JQuery作为一款优秀的javascript类库，其通用性有目共睹。JQuery的选择器功能强大，经过长时间的使用和经验积累，下面简单的总结JQuery常用的选择器以及在使用中容易出现的小错误

基本选择器

$("#one")     // 匹配一个id为one的html元素；
$(".one")     // 匹配所有class为one的元素；
$("element")   //匹配所有指定元素名称的元素
$("*")         //匹配所有元素
$("selector1,selector2,...selectorN")  //指定多个选择器，匹配合并后的所有结果

基本过滤选择器

:first  //获取第一个元素
:last   //获取最后一个元素
:not    //排除选择器匹配的元素 e.g. 查找所有不可用的input元素：$("input:not(disabled)")
:even   //匹配索引值为偶数的元素，从0开始计数   e.g.超找表格的奇数行：$("tr:even")
:odd        //匹配索引值为奇数的元素，从0开始计数
:eq //匹配一个给定索引值的元素，从0开始计数
:lt     //匹配所有小于给定索引值的元素，从0开始计数
:gt     //匹配所有大于给定索引值的元素，从0开始计数
:header //匹配标题元素
:animated   //匹配正在执行动画效果的元素

表单选择器

:input  //匹配所有的input，textarea，select和button元素
:button //匹配所有的按钮
:checkbox   //匹配复选框
:radio      //匹配单选按钮
:password   //匹配所有的密码框
:text   //匹配单行文本框
:image  //匹配所有的图像域
:submit //匹配提交按钮
:reset  //匹配所有的提交按钮
:file   //匹配所有的文件域
:hidden //匹配所有的不可见元素，或者type为hidden的元素

表单过滤选选择器

:checked        //匹配所有被选中的元素，针对checkbox，radio等
e.g.查找所有被选中复选框元素$("input[type='checked']:check")
:enable     //匹配所有可用元素     
e.g.查找所有可用input元素：$("input:enabled")
:disable    //匹配所有不可用元素   
:selected   //针对select匹配所有选中的option元素  
e.g. $("select option:selected")

层次选择器

$("ancestor")      //给定的祖先元素下匹配所有后代元素
e.g. 查找id为one的所有div后代元素：$("#one div")
$("prve + next")   //匹配所有的prev元素后的next元素 
e.g.查找id为one元素的之后的所有div元素：$("#one + div")
$("prev ~ sblings")   //匹配所有的prev后的兄弟元素
e.g. 查找id为one的元素之后的所有div兄弟元素：$("#one ~ div")
$("parent > child")        //给定父元素下匹配所有的子元素 
e.g. 超找id为one的所有div子元素：$("#one > div")

属性选择器

[attribute]             //匹配给定属性的元素
e.g. 查找所有含有id属性的input元素：$("input[id]")
[attribute=value]       //匹配给定属性是某个特定值的元素 
e.g. 查找所有class为one的div：$("div[className='one']")
[attribute!=value]    //匹配不含有指定的属性或者不等于特定值的元素
[attribute^=value]  //匹配给定的属性值是以某些值开头的元素
[attribute$=value] //匹配给定的属性值是以某些值结尾的元素
[attribute*=value]  //属性值通配
[selector1][selector2]...[selectorN] //复合属性，同时满足多个条件

子元素过滤选择器

:nth-child      //匹配其父元素下第N个子元素或奇偶元素
e.g. 匹配ul下所有的奇数行的li子元素：$("ul li:nth-child(even)")
:first-child    //匹配第一个子元素 
<br/>e.g. $("ul li:first-child")
:last-child     //匹配最后一个子元素
e.g. $("ul li:last-child")
:only-child     //匹配子元素，且该子元素是父元素唯一的子元素

内容过滤选择器

:contains       //匹配包含指定文本的元素  
e.g. 超找包含有"你好"的段落：$("p:contains('你好')")
:has        //匹配含有选择器所匹配元素的元素  
e.g.查找含有textarea元素的div：$("div:has(textarea)")
:empyty     //匹配所有不包含子元素或者文本的空元素  
:parent     //匹配含有子元素或者文本的元素

可见性过滤选择器

:hiden  //匹配所有不可见元素，或者type为hidden的元素
:visiable   //匹配所有可见的元素

常见错误

：even和：odd的使用

:even匹配索引值为偶数的元素：即索引值为0,2,4,...
:odd匹配索引值为奇数的元素：即索引值为1,3,5,...
若要匹配表格奇数行的元素，即1,3,5,...行的元素，应使用:even匹配：$("tr:even")如图：

若要匹配表格偶数行的元素，即2,4,6,...行的元素，应使用:odd匹配：$("tr:odd")如图：

:eq()和:nth-child()的使用
二者均能匹配父元素下第N个子元素，所不同的是nth-child()是从1开始计数的，eq()是从0开始计数的。e.g. 匹配表格的第一行元素：

$("tr:eq(0)")
$("tr:nth-child(1)")

此外:eq只匹配一个元素，:nth-child()可为每个父元素匹配子元素，例如

$("tr:eq(even)").css("background","green");

$("tr:nth-child(even)").css("background","green");

:parent的使用
:parent是匹配含有子元素或者文本的元素，匹配的是父元素，而不是子元素数组


有空格和没空格的区别
例如：

$("div[className='one']")  //匹配class为one的所有div元素
$("div [className='one']") //匹配所有的div下所有的class为one的后代元素