jQuery选择器

jQuery选择器可以分为基本选择器、层次选择器、过滤选择器和表单选择器。

1、基本选择器

选择器	描述	示例
#id	根据id匹配一个元素	$("#id")
.class	根据类名匹配元素,获得集合	$(".clazz")
element	根据给定元素名匹配	$("p")
*	匹配所有元素	$("*")
selector1,selector2,...,selectorN	所有选择器的合集	$("div,span,p.myClass")

2、层次选择器

选择器	描述	示例
$("ancestor descendant")	选取ancestor元素里的所有descendant后代元素	$("div span")
$("parent>child")	选取parent元素下的child元素	$("div>span")
$("prev+next")	选取class为one的下一个<div>同辈元素	$(".one+div")
$("prev~siblings")	选取id为two的元素后面的所有<div>	$("#two~div")

3、过滤选择器

• 基本过滤选择器

选择器	示例	描述
:first	$("div:first")	选取所有<div>元素中的第一个<div>
:last	$("div:last")
:not(selector)	$(input:not(.myClass))	选取class不是myClass的<input>元素
:even	$("input:even")	选取索引是偶数的<input>
:odd	$("input:odd")	选取索引是奇数的<input>
:eq(index)	$("input:eq(1)")	选取索引等于1的<input>
:gt(index)	$("input:gt(1)")	选取索引大于1的<input>
:lt(index)	$("input:lt(1)")	选取索引小于1的<input>
:header	$(":header")	选取页面中所有的h标签
:animated	$("div:animated")	选取正在执行动画的<div>
:focus	$(":focus")	选取当前获取焦点的元素

• 内容过滤选择器

选择器	示例	描述
:contains(text)	$("div:contains('我')")	选取含有文本“我”的<div>元素
:empty	$("div:empty")	选取不包含子元素（包括文本元素）的<div>元素
:has(selector)	$("div:has(p)")	选取含有<p>元素的<div>元素
:parent	$("div:parent")	选取拥有子元素（包括文本元素）的<div>元素

• 可见性选择器

选择器	示例	描述
:hidden	$(":hidden")	选取所有不可见元素
:visible	$("div:visible")	选取所有可见的<div>元素

• 属性过滤选择器

选择器	示例	描述
[attribute]	$("div[id]")	选取拥有属性id的元素
[attribute=value]	$("div[title=test]")	选取属性title为test的<div>元素
!= ^= $= *=	= ~=
[attribute1][attribute2][attributeN]	$("div[id][title$='test']")	选取拥有属性id，并且属性title以‘test’结束的<div>元素

• 子元素过滤选择器

选择器	示例	描述
:nth-child(even)		选取每个父元素下的索引值是偶数的元素
:nth-child(odd)		选取每个父元素下的索引值是奇数的元素
:nth-child(2)		选取每个父元素下的索引值是2的元素
:nth-child(3n)		选取每个父元素下的索引值是3的倍数的元素
:nth-child(3n+1)		选取每个父元素下的索引值是3的倍数+1的元素
:first-child	$("ul li:first-child")	选取每个<ul>中的第一个<l i>
:last-child	$("ul li:last-child")	选取每个<ul>中的最后一个<l i>
:only-child	$("ul li:only-child")	在<ul>中选取唯一子元素的<l i>元素

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

选择器	示例	描述
:enabled	$("#form1:enabled")	选取id为form1的表单内的所有可用元素
:disabled	$("#form2:disabled")	选取id为form2的表单内的所有不可用的元素
:checked	$("input:checked")	选取所有被选中的<input>元素
:selected	$("select option:selected")	选取所有被选中的select元素

4、表单选择器

选择器	示例	描述
:input	$(":input")	选取所有input，select、textarea、button
:text	$(":text")	选取所有单行文本框
:password	$(":password")	选取所有密码框
:radio	$(":radio")
:checkbox	$(":checkbox")
:submit	$(":submit")
:image	$(":image")
:reset	$(":reset")	选取所有重置按钮
:button	$(":button")
:file	$(":file")
:hidden	$(":hidden")