各jQuery选择器的用法

这篇文章来介绍下jQuery的选择器。

选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依 赖于选择器。因此，如果能熟练的使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。jQuery选择器完全继承了CSS的风格。利用jQuery 选择器，可以非常便捷的找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。

jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。下面通过表格进行一一介绍。

1.基本选择器

选择器	描 述	返 回	示 例
$("#id")	匹配给定的id	单个元素	$(“header”)
$(".class")	匹配给定的类名	集合元素	$(“.test”)
$("E")	匹配给定的标签名	集合元素	$(“div”)
$("*")	匹配所有元素	集合元素	$(“*’)
$("E1, .class, E2,…")	并集，等价于$(“E1”) U $(“.class”) U $(“E2”) U ……	集合元素	$(“span, .tips”)
$("E.class")（只能 是标签名.类名形式）	交集，等价于$(“E1”) ∩ $(“.class”)。注意它和 层次选择器$("E .class")的区别，层次选择器要用 空格分开，$("E .class")是在$("E")的后代中查找， 而$(“E.class”)只在$(“E”)元素中查找，不是在其 后代中查找	集合元素	$(“div.test”)

2.层次选择器

选择器	描 述	返 回	示 例
$(“ancestor descendant1 descendant2 ……”)	add by zhj 1、查找满足ancestor条件的元素集，假设元素集为A1 2、从A1的所有后代中查找满足descendant1条件的元素集A2 3、从A2的所有后代中查找满足descendant2条件的元素集A3 4、…… 上面所说的后代即子代+孙代+…… 等价于$("ancestor").find("descendant1").find("descendant2").find("……") 可能有人会问，既然是从所有后代中查找，那 $(“ancestor descendant1 descendant2  ……  descendantN”)是否等价于 $(“ancestor descendantN”),当然不是，如下。 $(“#go .hi .my”)是蓝色背景的标签，而$("#go my")是蓝色和红色背景的标签 <div id = "go">     <div class = "hi">        <div class = "my">        </div>     </div>     <div class = "my">     </div> </div> 其实最常用的还是两次查找的形式，即$(“ancestor descendant1")，多次查找用的场合并不多。	集合元素	$(“body div”) $("div .test"); $("div .test .mytest")
$(“parent>child”)	匹配parent下的所有 child(子)元素	集合元素	$(“div>span”)
$(“prev+next”)	匹配紧接在prev后的 next元素	集合元素	$(“.error+span”)
$(“prev~siblings”)	匹配prev后的所有 siblings元素	集合元素	$(“span~a”)

3.过滤选择器

3.1 基本过滤选择器

选择器	描 述	返 回	示 例
:first	匹配第一个元素	单个元素	$(“div:first”)
:last	匹配最后一个元素	单个元素	$(“span:last”)
:even	匹配索引是偶数的元素 索引从0开始	集合元素	$(“li:even”)
: odd	匹配索引是奇数的元素 索引从0开始	集合元素	$(“li:odd”)
:eq(index)	匹配索引等于index的元 素(索引从0开始)	单个元素	$(“input:eq(2)”)
:gt(index)	匹配索引大于index的元 素(索引从0开始)	集合元素	$(“input:gt(1)”)
:lt(index)	匹配索引小于index的元 素(索引从0开始)	集合元素	$(“input:lt(5)”)
:header	匹配所有h1,h2…等 标题元素	集合元素	$(“:header”)
:animated	匹配所有正在执行 动画的元素	集合元素	$(“div:animated”)

3.2 内容过滤选择器

选择器	描 述	返 回	示 例
:contains(text)	匹配含有文本内容text 的元素	集合元素	$(“p:contains(今天)”)
:empty	匹配不含子元素或 文本元素的空元素	集合元素	$(“p:empty”)
:has(selector)	匹配包含selector元素 的元素	集合元素	$(“div:has(span)”)
:parent	匹配含有子元素或文本 的元素	集合元素	$(“div:parent”)

3.3 可见性过滤选择器

选择器	描 述	返 回	示 例
:hidden	匹配所有不可见 的元素	集合元素	$(“:hidden”)
:visible	匹配所有可见元素	集合元素	$(“:visible”)

3.4 属性过滤选择器

选择器	描 述	返 回	示 例
[attr]	匹配拥有此属性 的元素	集合元素	$(“img[alt]“)
[attr=value]	匹配属性值为value 的元素	集合元素	$(“a[title=test]“)
[attr!=value]	匹配属性值不等于 value的元素	集合元素	$(“a[title!=test]“)
[attr^=value]	匹配属性值以value 开头的元素	集合元素	$(“img[alt^=welcome]“)
[attr$=value]	匹配属性值以value 结尾的元素	集合元素	$(“img[alt$=last]“)
[attr*=vlaue]	匹配属性值中含有 value的元素	集合元素	$(“div[title*=test]“)
[attr1][attr2]…	通过多个属性 进行匹配	集合元素	$(“div[id][title*=test]“)

3.5 子元素过滤选择器

选择器	描 述	返 回	示 例
:nth-child	匹配每个父元素下的 第index个子元素 索引从1开始	集合元素	$(“div:nth-child(2)”)
:first-child	匹配每个父元素的 第一个子元素	集合元素	$(“div:first-child”)
:last-child	匹配每个父元素的 最后一个子元素	集合元素	$(“div:last-child”)
: only-child	某元素是它父元素中 的唯一的子元素 则匹配它	集合元素	$(“div:only-child”)

3.6 表单对象属性过滤选择器

选择器	描 述	返 回	示 例
:enabled	匹配所有可用元素	集合元素	$(“form :enabled”)
:disabled	匹配所有不可用 的元素	集合元素	$(“form :disabled”)
:checked	匹配所有被选中的元素 (含单选框，复选框)	集合元素	$(“input:checked”)
:selected	匹配所有被选中的 选项元素	集合元素	$(“select :selected”)

4.表单选择器

 

选择器	描 述	返 回	示 例
:input	匹配所有input, textarea, select, button元素	集合元素	$(“input”)
:text	匹配所有文本框	集合元素	$(“:text”)
:password	匹配所有密码框	集合元素	$(“:password”)
:radio	匹配所有单选框	集合元素	$(“:radio”)
:checkbox	匹配所有所有多选框	集合元素	$(“:checkbox”)
:submit	匹配所有提交按钮	集合元素	$(“:submit”)
:image	匹配所有图像按钮	集合元素	$(“:image”)
:reset	匹配所有重置按钮	集合元素	$(“:reset”)
:button	匹配所有按钮	集合元素	$(“:button”)
:file	匹配所有上传域	集合元素	$(“:file”)