JQuery选择器
来自站长百科
导航: 上一页 | aJAX| XML | DreamWeaver | PhotoShop | Discuz | Asp | php | java | HTML | XHTML
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)永远只能匹配到一个元素。