jQuery选择器全解

本篇介绍jQuery的选择器,jQuery选择器按照功能上分为"选择"和"过滤",并且是配合使用的.过滤的主要作用是从前面选定的选择器中选择的内容重进行筛选.

下面我们进入到选择器大全.

基础选择器

选择器	说明	例子
#id	根据元素id选择	$("#btn_find")
element	根据元素的名称进行选择	$("input")
.class	根据元素的css类进行选择	$(".btn")
*	选择所有元素	$("*")
s1,s2,sn	选中符合s1,s2,sn选择器中任何一个选择器的元素	$("div,.result")

层次选择器

选择器	说明	例子
ancestor descendant	选择符合ancestor选择器下的所有符合descendant选择器的元素	//选择div下所有的input元素 $("div input")
parent>child	选择符合parent选择器下的直接子节点中符合child选择器的元素	//选择div下直接子元素中所有的input元素 $("div>input")
prev+next	选择紧跟在符合prev选择器的元素后面的符合next选择器的元素	//选择紧跟div元素后的p元素,即使div后有多个p,也只要第一个p $("div+p")
prev~siblings	选择符合prev选择器的元素后面的根据siblings选择器过滤的元素	//选择div元素后的所有的p元素 $("div~p")

基本过滤器

选择器	说明	例子
:first	匹配元素集中的第一个元素	$("tr:first")
:last	匹配元素集中的最后一个元素	$("tr:last")
:even	匹配元素集中索引值为偶数的元素	$("tr:even")
:odd	匹配元素集中索引值为奇数的元素	$("tr:odd")
:eq(index)	匹配元素集中索引值为index的元素	$("tr:eq(1)")
:gt(index)	匹配元素集中索引大于index的元素	$("tr:gt(1)")
:lt(index)	匹配元素集中索引小于index的元素	$("tr:lt(1)")
:header	选择h1,h2,h3等header元素	$("div>:header")
:animated	匹配正在执行动画效果的元素	$("div:animated")
:not(selector)	匹配元素中不符合selector选择器的元素	//选择div下的子元素中不是div的元素 $("div>:not(div)")

注意:

索引值均从0开始计算.

内容过滤器

选择器	说明	例子
:contains(text)	包含给定文本的元素	$("td:contains(张三)").css("color","red");
:empty	不包含子元素或文本的空元素	$("td:empty").html("red");
:has(selector)	匹配所有包含了匹配了selector选择器元素的元素	$("td:has(input)").css("background-color","red");
:parent	匹配包含了子元素或文本的元素	//选择包含子元素的td $("td:parent").css("background-color","red");

可见性过滤器

选择器	说明	例子
:hidden	匹配所有不可见的元素	<div> <span style="visibility:hidden">1</span> <span style="visibility:hidden">2</span> <span style="visibility:hidden">3</span> <span style="visibility:hidden">4</span> <span>5</span> </div> <script type="text/javascript"> //获取span元素集中可见的span $("span:visible") //获取span元素集中不可见的span $("span:hidden"); </script>
:visible	匹配所有可见的元素

属性过滤器

选择器	说明	例子
[attribute]	包含给定属性的元素	//选择div中包含title属性的元素 $("div[title]")
[attribute=value]	包含指定属性,并且属性值是value的元素	//选择div中title属性为div的元素 $("div[title=div]")
[attribute!=value]	包含指定属性,并且属性值不是value的元素	//选择div中title属性不为div的元素 $("div[title!=div]")
[attribute^=value]	包含指定属性,并且属性值以value开头的元素	//选择div中title属性值以another开头的元素 $("div[title^=another]")
[attribute$=value]	包含指定属性,并且属性值以value结尾的元素	//选择div中title属性值以division结尾的元素 $("div[title$=division]")
[attribute*=value]	包含指定属性,并且属性值包含value的元素	//选择div中title属性值中包含div的元素 $("div[title*=div]")
[attr1][attr2][attrN]	复合属性选择器	//选择div中title属性值中包含div并且cus属性等于customer的元素 $("div[title*=div][cus=customer]")

子元素过滤器

选择器	说明	例子
:nth-child( index/even/ odd/equation )	匹配其父元素下的第N个子或奇偶元素	//注意:eq()选择器索引从0开始,而nth-child索引值从1开始 //选择select元素下的option元素集中的第1个 $("select option:nth-child(1)")); //选择select元素下的奇数个子元素 $("select option:nth-child(odd)"); //选择select元素下的偶数个子元素 $("select option:nth-child(even)") //选择select元a素下的option元素集中的第2n+1个 $("select option:nth-child(2n+1)")
:first-child	匹配第一个子元素	//选择div下的第一个子元素 $("div>*:first-child")
:last-child	匹配最后一个子元素	//选择div下的最后一个子元素 $("div>*:last-child")
:only-child	如果某个元素是父元素中唯一的子元素,那么将匹配该子元素	//选择div下唯一的一个子元素 $("div>span:only-child")

表单选择器

选择器	说明	例子
:input	匹配所有的input,textarea,select,button元素	$(":input")
:text	匹配所有的文本框	$(":text")
:password	匹配所有的密码框	$(":password")
:radio	匹配所有的单选按钮	$(":radio")
:checkbox	匹配所有的复选框	$(":checkbox")
:submit	匹配所有的提交按钮	$(":submit")
:image	匹配所有的图像域	$(":image")
:reset	匹配所有的重置按钮	$(":reset")
:button	匹配所有的按钮	$(":button")
:file	匹配所有的文件域	$(":file")

表单过滤器

选择器	说明	例子
:enabled	匹配所有的可用的元素	$("input:enabled")
:disabled	匹配所有不可用的元素	$("input:disabled")
:checked	匹配所有被选中的元素(radio,checkbox中被选中的)	$("input:checked")
:selected	匹配所有被选中的option元素	$("option:selected")

--选自《从零开始学习jQuery》