jQuery选择器分门别类

主要分为：基本选择器，层次选择器，过滤选择器，表单选择器。

 

1、基本选择器是jquery中最常用的选择器，也是最简单的选择器，它通过元素id,class和标签名等来查找DOM元素。主要分为：

基本选择器	描述	返回	示例	说明
#id	根据给定的id匹配一个元素	单个元素	$(“#test”)	取id为test的元素
.class	根据给定的类名匹配元素	集合元素	$(“.test”)	取所有class为test的元素
Element	根据给定的元素名匹配元素	集合元素	$(“p”)	取所有的<p>元素
*	匹配所有元素	集合元素	$(“*”)	选取所有的元素
Selector1,selector2….	将每一个选择器匹配到的元素合并后一起返回	集合元素	$(“div,span,p.myClass”)

 

2、层次选择器是指向通过DOM元素之间的层次关系来获取特定元素。例如后代元素，子元素，相邻元素，同辈元素等等。主要分为：

层次选择器	描述	返回	示例	说明
$(“ancestor descendant”)	选取ancestor元素里的所有descendant（后代）元素	集合元素	$(“div span”)	后代元素,选取<div>里的所有的<span>元素
$(“parent>child”)	选取parent元素下的child（子）元素	集合元素	$(“div>span”)	子元素，选取<div>元素下元素名是<span>的子元素
$(“prev + next”)	选取紧接在prev元素后的next元素	集合元素	$(“.one + div”)	相邻元素，取class为one的下一个<div>同辈元素
$(“prev~siblings”)	选取prev元素之后的所有siblings元素	集合元素	$(“#two~div”)	同辈元素，选取ID为two的元素后面的所有<div>同辈元素

 

上面的相邻元素和同辈元素可以使用next()方法和nextAll()来代替，例如：

$(“.one + div”); 等同于$(“.one”).next((“div”);

$(“#prev~div”);等同于$(“#prev”).nextAll(“div”):

 

3、过滤器选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则是在选择器都以一个冒号（：）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选着器。   

3.1、基本过滤选着器

层次选择器	描述	返回	示例	说明
:first	选取第一个元素	单个元素	$(“div:first”)	选取所有<div>元素中第1个<div>元素
:last	选取最后一个元素	单个元素	$(“div:last”)	选取所有<div>元素中最后一个<div>元素
:not(selector)	去除所有与给定选择器匹配的元素	集合元素	$(“input:not(.myClass))	选取class不是myClass的<input>元素
:even	选取索引是偶数的所有元素，索引从0开始	集合元素	$(“input:even”)	选取所以是偶数的<input>元素
:odd	选取索引是奇数的所有元素，索引从0开始	集合元素	$(“input:odd”)	选取索引是奇数的<input>元素
:eq(index)	选取索引等于<index>的元素（index从0开始）	单个元素	$(“input:eq(1)”)	选取索引等于1的<input>元素
:gt(index)	选取索引大于index的元素（index从0开始）	集合元素	$(“input:gt(1)”)	选取索引大于1的<input>元素
:lt(index)	选取索引小于index的元素（index从0开始）	集合元素	$(“input:lt(1)”)	选取索引小于1的<input>元素
:header	选取所有的标题元素，例如h1、h2、h3等等	集合元素	$(“:header”)	选取网页中所有的<h1>、<h2>、<h3>
:focus	选取当前获取焦点的元素	集合元素	$(“:focus”)	选取当前获取焦点的元素

 

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

内容过滤器	描述	返回	示例	说明
：contains	选取含有文本内容为“text”的元素	集合元素	$(“div:contains(‘test’)”)	选取含有文本’test’的<div>元素
:empty	选取不包含子元素或者文本的空元素	集合元素	$(“div:empty”)	选取不包含子元素的<div>空元素
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素	$(“div.has(p)”)	选取含有<p>元素的<div>元素
:parent	选取含有子元素或者文本的元素	集合元素	$(“div:parent”)	选取拥有子元素的<div>元素

 

      3.3、可见性过滤选择器根据元素的可见和不可见状态选择相应的元素。主要分为：

可见性过滤选择器	描述	返回	示例	说明
:hidden	选取所有不可见的元素	集合元素	$(“:hidden”)	选取所有不可见的元素。如果只想选着<input>元素，可以使用$(“input:hidden”)
:visible	选取所有可见元素	集合元素	$(“:visible”)	$(“div:visible”)选取所有可见的<div>元素

 

      3.4、属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。主要分为：

属性过滤选择器	描述	返回	示例	说明
[attribute]	选取拥有此属性的元素	集合元素	$(“div[id]”)	选取拥有属性id的<div>元素
[attribute=value]	选取属性的值为value的元素	集合元素	$(“div[title=test]”)	选取属性title为“test”的<div>元素
[attribute!=value]	选取属性的值不等于value的元素	集合元素	$(“div[title!=test]”)	选取属性title不为”test“的<div>元素（没有属性title的<div>元素也会被选取）
[attribute^=value]	选取属性的值以value开始的元素	集合元素	$(“div[title^=test]”)	选取属性title以”test”开始的<div>元素
[attribute$=value]	选取属性的值以value结束的元素	集合元素	$(“div[title$=test]”)	选取属性title以“test”结束的<div>元素
[attribute*=value]	选取属性的值含有value的元素	集合元素	$(“div[title*=text]”)	选取属性title含有“test” 的<div>元素
[attribute|=value]	选取属性等于给定字符串或以该字符串为前缀（该字符串后面跟一个连字符“-”）的元素	集合元素	$(‘div[title|=”en”]’)	选取属性title等于en或以en为前缀（该字符串后面跟一个连字符“-”）的元素
[attribute~=value]	选取属性用空格分隔的值包含一个给定值的元素	集合元素	$(‘div[title~=”uk”]’)	选取属性title用空格分隔的值中包含字符uk的元素
[attribute1] [attribute2] [attributeN]	用属性选择器合并成一个符合属性选择器，满足多个条件。每选择一次，缩小一次范围	集合元素	$(“div[id][title$=’test’]”)	选取拥有属性id，并且属性title以“test”结束的<div>元素

 

      3.5、子元素过滤选择器       

子元素过滤选择器	描述	返回	示例	说明
:nth-child	选取每个父元素下的第index个子元素或者奇偶元素。（index从1开始）	集合元素	$(“div.one :nth-child(2)”)	选取class为one的<div>父元素下的第2个子元素
:first-clild	选取每个父元素的第一个子元素	集合元素	$(“div.one  : first-child”)	选取class为one的<div>父元素下的第一个子元素
:last-child	选取每个父元素的最后一个子元素	集合元素	$(“div.one : last-child”)	选取class为one的<div>父元素下的最后一个子元素
:only-child	如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配	集合元素	$(“div.one  : only-child”)	选取class为one的<div>父元素下只有一个子元素

 

      3.6、表单对象过滤器主要是对选择的表单元素进行过滤。

表单对象过滤器	描述	返回	示例	说明
:enabled	选取所有可用元素	集合元素	$(“form1 :enabled”)	选取id为”form1”的表单内的所有可用元素
:disabled	选取所有不可用元素	集合元素	$(“form2 :disabled”)	选取id为”form2”的表单内的所有不可用元素
:checked	选取所有被选中的元素（单选框，复选框）	集合元素	$(“input:checked”)	选取所有被选中的<input>元素
:selected	选取所有被选中的选项元素（下拉框）	集合元素	$(“select option:sected”)	选取所有被选中的选项元素

 

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”)
:hidden	选取所有的不可见元素	集合元素	$(“:hidden”)