JQuery选择器大全
JQuery是一个JavaScript库,它提供了很多有用的API,简化了我们使用JavaScript的方式。
JQuery由JQuery.com提供,你可以在该网站上下到最新的
有两种类型的JQuery,一种是未压缩的,便于你学习其源代码,另一种是压缩的,不易阅读但是更节约流量。
现在有两个版本的JQuery,V1.x支持ie6,7,8,V2.x开始不支持ie6,7,8了。
现在1.x的最新版本是1.10.2
如果你不愿意在自己的计算机上存放JQuery库,你可以连接到以下的一些CDN.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
使用CDN的好处,用户已经访问了包含这些资源的网站的话,在访问你的网站时就不用重复下载资源了。
本文主要介绍JQuery选择器,这可以说是JQuery的亮点之一,JQuery提供了有丰富功能的选择器,可以方便的获取页面中的元素。
使用选择器注意事项
1.选择器对元素,属性,值的大小是不敏感的
2.对于!"#$%&'()*+,./:;<=>?@[\]^`{|}~
等特殊符号,需要用//转义
基础选择器
1.选择所有的元素
$("*")
2.根据元素Id选择
$("#myid")
注意一个页面的id都是唯一的,这个只能选择第一个match的
3.根据元素的名称选择
$("div")
4.根据元素的css类选择
$(".myclass")
注意:一个元素可以有多个css类,只要其中一个匹配就会被选择
5.复合选择器
做多种选择器的和,比如$("#myid,div,.myclass)相当于$("#myid").add("div").add(".myclass")
层次选择器
1.选择选择器1中所选元素的所有符合选择器2条件的直接子节点
$("body > div")
2.选择选择器1中所选元素的所有符合选择器2条件的所有子孙节点
$("body div")
3.选择选择器1中所选元素后面的一个符合选择器2条件的节点,选择器2所选元素和选择器1所选元素要在同一节点下。
$("#myid + li")
4.选择选择器1中所选元素后面的所有符合选择器2条件的节点,选择器2所选元素和选择器1所选元素要在同一节点下。
$("#myid ~ li")
表单选择器
用表单选择器要注意两点,一点是最好和input一起用,比如$("input:submit")。另一点是大多数选择器都不属于css规范,无法用其优化功能。最好是先做别的选择,再用表单选择器过滤。
1.匹配所有按钮
$(":button")
匹配所有的<button>mybutton</button>和<input type="button" value="mybutton" />
2.匹配提交按钮
$(":submit")
匹配所有的<button>mybutton</button>,<button type="submit">mybutton</button>和<input type="submit" value="提交" />
3.匹配所有文本
$(":text")
匹配所有的<input type="text" >
注意:从版本1.5.2开始,<input>也能被匹配。
4.匹配当前焦点
$(":focus")
这是1.6版新增的,能获取当前获得焦点的元素
5.获取被选择状态的元素
$(":checked")
注意:它适用于checkbox,radio button和select列表。
6.其他的一些,很容易理解的。
$(":selected")
$(":reset")
$(":password")
$(":input")
$(":image")
$(":file")
$(":enabled")
$(":disabled")
属性选择器
1.有某属性
$("[attribute]")
如$("div[id]")选择有id属性的div
2.属性为某值
$("[attribute='value']")
3.属性为某值或‘某值-’打头的值
$("[attribute|='value']")
4.属性的值中含有某值
$("[attribute*='value']")
5.属性含有某值
$("[attribute~='value']")
注意:一个属性可以有多个值,每个值之间用空格分开,这个选择器正好能处理多个值中包含给定值就被选择的情况
6.属性的值以某值打头
$("[attribute^='value']")
7.属性的值以某值结尾
$("[attribute$='value']")
8.不含某属性或有该属性但是属性不为某值
$("[attribute!='value']")
注意:该选择器不属于css规范,无法用其优化功能。最好是先做别的选择,再用该选择器过滤。
9.复合属性选择器
$("[attributeFilter1][attributeFilter2][attributeFilterN]")
基本过滤器
1.获取当前选择器中给定位置的元素,从0开始计数
$("selector:first")
$("selector:last")
$("selector:even")偶数位
$("selector:odd")奇数位
$("selector:eq(index)")等于给定索引值的元素
$("selector:gt(index)")所有大于给定索引值的元素
$("selector:lt(index)")所有小于给定索引值的元素
注意:从1.8版开始,给定索引值可以为负数,表示从尾部开始索引。
2.去除与给定选择器匹配的元素
$(":not(selector)")
最好用.not()函数
3.选择h1,h2等header标签
$(":header")
4.选择给定语言的元素
1.9版新增
对于<div lang="en-us"></div>
用$("div:lang(en)")可以匹配所有lang属性为en或en-打头的元素
5.获取根元素
1.9版新增
$(":root")获取<html>元素
6.获取文档URI所指向的元素。
比如有个URI是http://example.com/#foo,$("p.target")会获取<p id="foo">元素
7.获取当前正在动画的对象
$(":animated")
内容过滤器
1.匹配包含给定文本的元素
$(":contains(text)")
2.匹配所有不包含子元素或者文本的空元素
$(":empty")
3.匹配所有包含子元素或者文本的元素
$(":parent")
注意:所有的p都认为非空
4.匹配含有选择器所匹配的元素的元素.
$(":has(selector)")
注意:被匹配的元素可以是其孙子元素
子元素过滤器
1.获取在父元素中给定位置的元素,从1开始计数,对每个父元素分别计数。
需要注意的是如果选择器中的元素有n个在一个父元素中,但是这n个并不在父元素中的给定位置处,这样这n个元素都不会被选择。
$(":first-child")
$(":last-child")
$(":nth-child(index/even/odd/equation)")
equation的写法如:
$(":nth-child(3n+2)")
$(":nth-last-child(index/even/odd/equation)") 1.9版新增
2.选择在其父元素中是唯一元素的元素
$(":only-child")
3.获取在父元素中给定位置的元素,从1开始计数,对每个父元素分别计数。
针对原有的:nth-child等选择器对位置的判断是针对父元素中所有的元素的情况,1.9版新增了一些选择器,其对位置的判断变为针对父元素中所有在选择器中的元素来计数。
$(":first-of-type")
$(":last-of-type")
$(":nth-of-type(index/even/odd/equation)")
$(":nth-last-of-type(index/even/odd/equation)")
4.选择在选择器中是父元素唯一元素的元素
$(":only-of-type")
这个也是1.9版新增的
可见性过滤器
只有两个
$(":hidden")和$(":visible")
下面这些元素被认为是hidden的:
1.CSS的display属性为none
2.type="hidden"
3.元素的长或宽被设置为0
4.祖先为hidden,则元素为hidden
注意:不在document中的元素无法判断是否可见。
visibility:hidden或opacity:0被认为是可见的,因为它们仍会消耗布局空间。