编辑“JQuery选择器”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px; margin-bottom:15px;"><strong>导航:</strong> [[JQuery|上一页]] | {{Template:JavaScript导航}}</span>
<div style="clear:both;"></div>

jQuery的选择器是CSS 1-3，XPath的结合物。jQuery提取这二种查询语言最好的部分，融合后创造出了最终的jQuery表达式查询语言。

'''简单的jQuery选择器'''

很多jQuery程序，绝大部分的函数都是从$()开始的，$()函数简化了javascript获取DOM元素的复杂性，消除了使用for循环获取一组DOM元素，所以$()函数获取的DOM元素其实是一个DOM元素组成的数组。

'''eg:'''

*$(”div”)：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合； 
*$(”#nickName”)：[[ID]]属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素； 
*$(”.user”)：样式名，取得DOM文档中[[class]]为user的所有元素，返回的是一个元素集合； 
这里再补充1个通配符，即*：
*$(”*”):通配符，取得DOM文档中所有节点元素；例如：$(”*”).css(”color”,”#FF3300″);则整个文档的文字颜色都会显示红色。

'''jQuery的组合选择器：'''

$(”selector1,selector2,selectorN”)：多元素组合选择器，将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。例如：$(”h1,div,li#nickName”)

'''JQuery的层级选择器：'''

*$(”ancestor descendant”):在给定的祖先元素下匹配所有的后代元素，即子孙元素,例如：$(”div span.num”);

*$(”parent > child”):在给定的父元素下匹配所有的子元素,例如：$(”div>span”);

*$(”prev + next”):匹配所有紧接在prev元素后的next元素，即第一个跟在后面的兄弟元素,例如：$(”p+span”);

*$(”prev ~ siblings”):匹配 prev 元素之后的所有 siblings 元素，即一群跟屁虫的兄弟元素（当然也有可能是一个屁虫的兄弟元素，那就和$(”prev + next”)等价了）,例如：$(”p~span”);

'''简单的过滤选择器'''

* :animated：匹配所有正在执行动画效果的元素集合； 

* :eq(index)：匹配索引为index的一个元素，例如：$(”div:eq(0)”)//第一个div； 

* :even：匹配索引为偶数的元素集合，例如：$(”div:even”)； 

* :odd：匹配索引为奇数的元素集合，例如：$(”div:odd”)； 

* :first：匹配找到的第一个元素，等价于:eq(0)，例如：$(”div:first”)； 

* :gt(index) ：匹配索引大于index的 元素集合，例如：$(”div:gt(0)”)//除了第一个div外的所以div； 

* :lt(index)：匹配索引小于于index的 元素集合，例如：$(”div:lt(0)”)； 

* :header：匹配h1-h6的所有元素集合； 

* :last：匹配找到的最后一个元素，例如：$(”div:last”)//最后一个div； 

* :not(selector)：去除所有与给定选择器匹配的元素，例如：$(”input:not(:checked)”)//除了被选中的所有input； 

'''Jquery的子元素选择器'''

* :first-child ：匹配每个父元素的第一个子元素，相当于E:nth-child(0)，例如：$(”ul li:first-child”)； 

* :last-child ：匹配每个父元素的最后一个子元素，例如：$(”ul li: last -child”)； 

* :nth-child(index/even/odd/equation)：匹配每一个父元素的第N个子或奇偶元素，例如：$(”ul li:nth-child(2)”)； 

* :only-child ：如果某个元素是父元素中唯一的子元素，那将会被匹配$(”ul li:only-child”)； 

'''子元素选择器和过滤性选择器的一些区别''' 

* :first-child和:first：

:first只匹配一个元素，而:first-child将为每个父元素匹配一个子元素，所以:first-child匹配出来的是一个集合当然也有可能只匹配一个元素，而:first永远只能匹配到一个元素。 

* :last-child和:last的区别道理也是一样的；

''':nth-child(index/even/odd/equation)和:eq(index)'''

* :eq(index) 只匹配一个元素，索引值从0开始；

* :nth-child(index/even/odd/equation) 匹配每一个父元素的第N个子或奇偶元素, 索引值从1开始,并且提供更丰富的参数及表达式；

* :nth-child(even)// 匹配每一个父元素的偶数元素；

* :nth-child(odd) // 匹配每一个父元素的奇数元素；

* :nth-child(3n) // 匹配每一个父元素的索引值能被3整除的元素；

* :nth-child(2) // 匹配每一个父元素的第2个元素；

* :nth-child(3n+1) // 匹配每一个父元素的索引值被3整除后余1的元素

* :nth-child(3n+2) // 匹配每一个父元素的索引值被3整除后余2的元素

所以:nth-child(index/even/odd/equation)匹配出来的是一个集合当然也有可能只匹配一个元素，而:eq(index)永远只能匹配到一个元素。















[[category:JQuery]]
[[category:JavaScript]]