jQuery选择器分类

【jQuery选择器分类】

一、基本选择器

选择器	示例
#id	$("#test")选取id=“test”的元素
.class	$(".test")选取class=“test”的元素
element	$("p")选取所有的p元素
*	$("*")选取所有的元素
selevtor1,selector2,...,selectorN	$("div,span,p.myClass")选取<div>,<span>和class="myClass"的p元素

二、层次选择器

选择器	描述	示例
$("ancestor descendant")	选取ancestor元素里的所有descendant（后代）元素	$("div span")选取<div>里的所有<span>元素
$("parent>child")	选取parent元素下的child（子）元素，与$("ancestor descendant")有区别，$("ancestor descendant")选取的是后代元素	$("div span")选取<div>里的所有<span>元素
$("prev+next")	选取紧接在prev元素后的next元素	$(".one+div")选取class="one"的下一个<div>元素
$("prev~siblings")	选取prev元素后面的所有siblings元素	$("#two~div")选取id="two"后面所有的<div>同辈元素

$(".one+div")等价于$(".one").next("div")

$("#prev~div")等价于$("#prev").nextAll("div")

三、过滤选择器

1. 基本过滤选择器

选择器	描述	返回	示例
:first	选取第一个元素	单个元素	$("div:first")选取<div>元素中第一个<div>元素
:last	选取最后一个元素	单个元素	$("div:last")选取<div>元素中最后一个<div>元素
:not(selector)	去除所有与给定选择器匹配的元素	集合元素	$("input:not(myClass)") 选取class不等于myClass的所有<input>元素
:even	选取索引为偶数的所有元素（Index从0开始）	集合元素	$("input:even")选取索引为偶数的<input>元素
:odd	选取索引为奇数的所有元素（Index从0开始）	集合元素	$("input:odd")选取索引为奇数的<input>元素
:eq(Index)	选取索引等于Index的元素（Index从0开始）	单个元素	$("input:eq(1)")选取索引等于1的<input>元素
:gt(Index)	选取索引大于Index的元素（Index从0开始）	集合元素	$("input:gt(1)")选取索引大于1的<input>元素 （大于1，但不包括1）
:lt(Index)	选取索引小于Index的元素（Index从0开始）	集合元素	$("input:lt(1)")选取索引小于1的<input>元素 （小于1，但不包括1）
:header	选取所有的标题元素，如h1,h2,h3等	集合元素	$(":header")选取网页中所有的<h1><h2><h3>,...
:animated	选取当前正在执行动画的所有元素	集合元素	$("div:animated")选取当前正在执行动画的<div>元素
:focus	选取当前获得焦点的所有元素	集合元素	$(":focus")选取当前获得焦点的所有元素

2. 内容过滤选择器

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

3. 可见性过滤选择器

选择器	描述	示例
:hidden	选取所有不可见的元素	$(":hidden")选取所有不可见元素。 包括<input type="hidden">,<div style="display:none;"> 和<div style="visiblity:hidden;">等元素。 如果只想选取<input>元素，可以使用$("input:hidden")
:visible	选取所有可见元素	$("div:visible")选取所有可见的<div>元素

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*=test]")选取属性title含有“test”的<div>元素
[attribute|=value]	选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符‘-’）的元素	$("div[title|='en']")选取属性title等于“en”或者以"en"为前缀（该字符串后跟一个连字符‘-’）的<div>元素
[attribute~=value]	选取属性用空格分隔的值中包含一个给定值的元素	$("div[title~='uk']")选取属性title用空格分隔的值中包含字符"uk"的元素
[attribute1][attribute2][attributeN]	用属性选择器合并成一个复合属性选择器，满足多个条件。 每选择一次，缩小一次范围	$("div[id][title$='test']")选取拥有id属性，且title属性以test为结尾的<div>元素

5. 子元素过滤选择器

选择器	描述	示例
:nth-child(Index/even/odd/equation)	选取每个父元素下的第Index个子元素或奇偶元素（Index从1算起）	:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的
:first-child	选取每个父元素的第一个子元素	:first只返回单个元素，而:first-child选择法将为每个父元素匹配第一个子元素 $("ul li:first-child")选取每个<ul>中第一个<li>元素
:last-child	选取每个父元素的最后一个子元素	:last只返回单个元素，而:last-child选择法将为每个父元素匹配最后一个子元素 $("ul li:last-child")选取每个<ul>中最后一个<li>元素
:only-child	如果某个元素是它父元素中唯一的子元素，那么将会被匹配。 如果父元素含有其他元素，则不会被匹配	$("ul li:only-child")在ul中选取是唯一子元素的<li>元素

6. 表单对象属性过滤选择器

选择器	描述	示例
:enabled	选取所有可用元素	$("#form1 :enabled")选取id为“form1”的表单内所有可用元素
:disabled	选取所有不可用元素	$("#form2 :disabled")选取id为“form2”的表单内所有不可用元素
:checked	选取所有被选中的元素（单选框、复选框）	$("input :checked")选取所有被选中的<input>元素
:selected	选取所有被选中的选项元素（下拉列表）	$("select option :selected")选取所有被选中的选项元素

四、表单选择器

选择器	描述	示例
:input	选取所有的<input>,<textarea>,<select>和<button>元素	$(":input")选取所有<input>,<textarea>,<select>和<button>元素
:text	选取所有的单行文本框	$(":text")选取所有的单行文本框
:password	选取所有的密码框	$(":password")选取所有的密码框
:radio	选取所有的单选框	$(":radio")选取所有的单选框
:checkbox	选取所有的多选框	$(":checkbox")选取所有的多选框
:submit	选取所有的提交按钮	$(":submit")选取所有的提交按钮
:image	选取所有的图像按钮	$(":image")选取所有的图像按钮
:reset	选取所有的重置按钮	$(":reset")选取所有的重置按钮
:button	选取所有的按钮	$(":button")选取所有的按钮， 即所有 type="button" 的 <input> 元素 和 <button> 元素 $("button")只能获取 <button> 元素
:file	选取所有的上传域	$(":file")选取所有的上传域
:hidden	选取所有不可见元素	$(":hidden")选取所有不可见元素

【选择器中的注意事项】

1. 选择器中含有“·”、“#”、“（”或“]”等特殊字符，需要使用转义符转义

举例：

HTML代码：

<div id='id#b'>bb</div>
<div id='id[1]'>cc</div>

错误方式：

$("#id#b")
$("#id[1]")

正确方式：

$("#id\\#b")
$("#id\\[1\\]")

2. 属性选择器的@符号问题

jQuery1.3.1以上版本，属性前不需要添加@符号，比如：

$("div[@title='test']")

正确写法应为：

$("div[title='test']")

3. 选择器中含有空格

选择器中的空格不可忽略，有空格为后代选择器，无空格为过滤选择器

HTML：

<div class="one">
	<div class="mini">This is div</div>
	<div class="mini">1</div>
</div>
<div class="one">
	<div class="mini">2-1</div>
	<div class="mini">2-2</div>
</div>

$(".one:last").css("background","#f66");  //选取最后一个class=“one”的<div>元素

$(".one :last").css("background","#f60");  //选取最后一个class=“mini”的<div>元素