Jquery选择器

Jquery中的选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

1 基本选择器

基本选择器是Jquery中常用的选择器，也是最简单的选择器。它通过元素ID、Class和标签名等来查找DOM对象。在网页中，每个ID名称只能使用一次，Class可以重复使用。

序号	选择器	描述	返回值	示例
1	#ID	根据给定的ID匹配一个元素	单个元素	$(“#test”):选取ID为test的元素
2	.Class	根据给定的类名匹配元素	集合元素	$(“.test”):选取所有class为test的元素
3	Element	根据给定的元素名匹配元素	集合元素	$(“p”)：选取所有p元素
4	*	匹配所有元素	集合元素	$(“*”)：选取所有元素
5	selector1,selector2,..,selectorN	将每一个选择器匹配到的元素合并后一起返回	集合元素	$(“div,span,p.myClass”)：选取所有div元素,span元素和class=’myClass’的p元素

2 层次选择器

层次选择器是指通过DOM元素之间的层次关系（如后代元素、子元素、相邻元素、兄弟元素）来获取指定元素的选择器。

序号	选择器	描述	返回值	示例
1	$(“ancestor descendant”)	选取ancestor元素里所有的descendant(后代)元素	集合元素	$(“div span”):选取div里的所有span元素
2	$(“parent>child”)	选取parent元素下的child(子)元素	集合元素	$(“div>span”):选取div元素下元素名为span的子元素
3	$(“prev+next”)	选取紧接在prev元素后的next元素	集合元素	$(“.test+div”):选取class名为test的下一个div元素
4	$(“prev~siblings”)	选取prev元素之后的所有siblings元素	集合元素	$(“#test~div”):选取ID为test的元素后面的所有div兄弟元素

其中，可以使用next()方法代替$(“prev+next”)选择器，使用nextAll()方法代替$(“prev~siblings”)选择器。

序号	选择器	方法
1	$(“.test+div”)	$(“.test”).next(“div”);
2	$(“#test~div”)	$(“#test”).nextAll(“div”)

 

3 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，其选择器都以冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

3.1基本过滤选择器

序号	选择器	描述	返回值	示例
1	:first	选取第一个元素	单个元素	$(“div:first”):选取第一个div元素
2	:last	选取最后一个元素	单个元素	$(“div:last”):选取最后一个div元素
3	:not(selector)	清除所有与给定选择器匹配的元素	集合元素	$(“input:not(.test)”):选择class不是test的input元素
4	:even	选取索引为偶数的所有元素，索引从0开始	集合元素	$(“input:even”):选取索引为偶数的input元素
5	:odd	选取所有为奇数的所有元素，索引从0开始	集合元素	$(“input:even”):选取索引为奇数的input元素
6	:eq(index)	选取索引等于index的元素，index从0开始	单个元素	$(“input:eq(1)”):选取索引为1的input元素
7	:gt(index)	选取索引大于index的元素，index从0开始	集合元素	$(“input:gt(1)”):选取索引大于1的input元素(不包括1)
8	:lt(index)	选取索引小于index的元素，index从0开始	集合元素	$(“input:lt(1)”):选取索引小于1的input元素(不包括1)
9	:header	选取所有标题元素，如h1,h2等	集合元素	$(“:header”):选取网页中所有的<h1>,<h2>……
10	:animated	选取当前正在执行动画的所有元素	集合元素	$(“div:animated”):选取当前正在执行动画的div元素

 

3.1 内容选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

序号	选择器	描述	返回值	示例
1	:contains(text)	选取含有文本内容为”text”的元素	集合元素	$(“div:contains(‘我’)”):获取文本含有“我”的div元素
2	:empty	选取不包含子元素或者文本的空元素	集合元素	$(“div:empty”):获取不包含子元素（包括文本元素）的div元素
3	:has(selector)	选取选择器所匹配的元素的元素	集合元素	$(“div:has(p)”):获取含有p元素的div元素
4	:parent	选取含有子元素或文本的元素	集合元素	$(“div:parent”):获取拥有子元素(包括文本元素)的div元素

3.3 可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

序号	选择器	描述	返回值	示例
1	:hidden	选取所有不可见的元素	集合元素	$(“:hidden”)选取所有不可见的元素
2	:visible	选取所有可见的元素	集合元素	$(“div:visible”):选取所有可见的div元素

$(“:hidden”)：包括<input type=”hidden” />、<div style=”display:none” />和<div style=”visibility:hidden”>等元素，如果只想选取input元素，可以使用$(“input:hidden”)。

 

3.4 属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

序号	选择器	描述	返回值	示例
1	[attribute]	选取拥有此属性的元素	集合元素	$(“div[id]”):选取拥有属性id的div元素
2	[attribute=value]	选取属性的值为value的元素	集合元素	$(“div[id=‘test’]”):选取属性id为”test”的div元素
3	[attribute!=value]	选取属性的值不等于value的元素	集合元素	$(“div[id!=’test’]”):选取属性id不等于”test”的div元素（没有属性id的div元素也会被选取）
4	[attribute^=value]	选取属性的值以value开始的元素	集合元素	$(“div[id^=’test’]”):选取属性id以”test”开头的div元素
5	[attribute$=value]	选取属性的值以value结束的元素	集合元素	$(“div[id$=’test’]”):选取属性id以”test”结尾的div元素
6	[attribute*=value]	选取属性的值含有value的元素	集合元素	$(“div[id*=’test’]”):选取属性id含有”test”的div元素
7	[attribute1] [attribute2]… …[attributeN]	用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围	集合元素	$(“div[id][title^=’test’]”):选取拥有属性id并且属性title以test开头性的div元素

 

3.5 子元素过滤选择器

序号	选择器	描述	返回值	示例
1	:nth-child (index/even/ odd/eq)	选取每个父元素下的第index个子元素或者奇偶元素(index从1开始)	集合元素	:eq(index)只匹配单个元素，:nth-child将为每一个父元素匹配子元素，并且其index从1开始，:eq(index)的index从0开始
2	:first-child	选取每个父元素的第一个子元素	集合元素	:first只返回单个元素，而:first-child为每个父元素匹配第一个子元素，例如:$(“ul li:first-child”):选取每个ul中第一个li元素
3	:last-child	选取每个父元素的最后一个子元素	集合元素	:last只返回单个元素，而:last-child为每个父元素匹配最后一个子元素，例如:$(“ul li:last-child”):选取每个ul中最后一个li元素
4	Only-child	如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配	集合元素	$(“ul li:only-child”):在ul中选取是唯一子元素的li元素

:nth-child()选择器详细功能：

1）、:nth-child(even):选取每个父元素下的索引值是偶数的元素

2）、:nth-child(odd):选取每个父元素下的索引值是奇的元素

3）、:nth-child(2):选取每个父元素下的索引值等于2的元素

4）、:nth-child(3n):选取每个父元素下的索引值是3的倍数的元素(n从0开始)

 

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

序号	选择器	描述	返回值	示例
1	:enabled	选取所有可用元素	集合元素	$(“#form :enabled”):选取ID为form的表单内所有可用元素
2	:disabled	选取所有不可用元素	集合元素	$(“#form2 :disabled”):选取ID为form2的表单内所有不可用元素
3	:checked	选取所有被选中的元素(单选框、复选框)	集合元素	$(“input :checked”):选取所有被选中的input元素
4	:selected	选取所有被选中的元素(下拉列表)	集合元素	$(“select :selected”):选取所有被选中的选项元素

4 表单选择器

序号	选择器	描述	返回值	示例
1	:input	选取所有<input>、<textarea>、<select>、<button>元素	集合元素	$(“:input”): 选取所有<input>、<textarea>、<select>、<button>元素
2	:text	选取所有的单行文本框	集合元素	$(“:text”):选取所有的单行文本框
3	:password	选取所有的密码框	集合元素	$(“:password”):选取所有的密码框
4	:radio	选取所有的单选框	集合元素	$(“:radio”):选取所有的单选框
5	:checkbox	选取所有的复选框	集合元素	$(“:checkbox”):选取所有的复选框
6	:submit	选取所有的提交按钮	集合元素	$(“:submit”):选取所有的提交按钮
7	:image	选取所有的图像按钮	集合元素	$(“:image”):选取所有的图像按钮
8	:reset	选取所有的重置按钮	集合元素	$(“:reset”):选取所有的重置按钮
9	:button	选取所有的按钮	集合元素	$(“:button”):选取所有的按钮
10	:file	选取所有的上传域	集合元素	$(“:file”):选取所有的上传域
11	:hidden	选取所有的不可见元素	集合元素	$(“:hidden”):选取所有的不可见元素