jQuery-选择器

有一段html代码如下：

<div class="box hz" id="box1"></div>
<div class="box hz" id="box2"></div>
<div class="box" id="box3"></div>

<p class="text"  id="text1">
	<span></span>
	<img src="" id="img1" title="flower" lang="chinese-cn" />
</p>
<p class="text"  id="text2">
	<img src="" id="img2" title="star" lang="chinesecn" />
</p>

<h1 id="h1">
	<em id="em1"></em>
	<span>
		<em id="em2"></em>
	</span>
</h1>

与css选择器相同部分

选择器	示例	结果	备注
id	#box1	box 1
类	.box	box 1-3
标签	p	text 1-2
通配符	*	所有
交集	p.text / p.text#text1	text 1-2 / text 1	多者的交集,不能有空格
并集	#box1 , p	box 1,text 1-2	分隔符两侧空格随意(包括后面的)
后代	#h1 em	em 1-2	后代是所有后代
子代	#h1 > em	em 1	子代只有下一代
紧邻	#box1 + .box	box 2	紧邻的下一个
兄弟	#box1 ~ .box	box 2-3	同级的后面的所有兄弟(不含前面)
子元素	.text img:first-child	img 2
	.text img:last-child	img 1-2
	.text img:nth-child(1)	img 2
	.text img:nth-last-child(1)	img 1-2
	.box:nth-child(even)	box 2	偶数
	.box:nth-child(odd)	box1 3	奇数
属性	[title]	img 1-2	含有title属性的元素
	[title=star]	img 2	title=star的元素
	[class~=hz]	box 1-2	用空格分隔且第1个是hz的,或整体等于hz的
	[lang|=chinese]	img 1	用-分隔且第1个是chinese的,或整体等于chinese的
	[title*=ow]	img 2	只要能拆分出ow的
	[title^=f]	img 1	开头只要是f的
	[title$=r]	img 1-2	结尾只要是r的

jQuery改进的css选择器

子元素

• css的子元素选择器，无论子元素类型是什么，都选择；jQuery则只选择指定类型子元素
• jQuery的子元素选择器下标从0开始
• 如第一行示例，css的子元素选择器选择每个.text下的第1个标签(无论子元素类型是什么)，而jQuery只选择第一个.text下的第一个img标签(同理last是只选择最后一个.text下的)

jQuery示例	结果	备注
$(".text img:first")	img 1
$(".text img:last")	img 2
$(".text img:eq(0)")	img 1	类似nth-child
$(".box:gt(1)")	box 3	指定元素的后一个
$(".box:lt(1)")	box 1	指定元素的前一个
$(".box:odd")	box 1 3	所有奇数行元素
$(".box:even")	box 2	所有偶数行元素

属性

jQuery示例	结果
$(".text img[title!=flower]")	img 2

新增选择器

input

选择器	解释
$(":input")	所有input
$(":button")	input中type=button的
$(":submit")
$(":reset")
$(":text")
$(":password")
$(":file")
$(":image")
$(":radio")
$(":checkbox")

元素状态

选择器	解释
$(":checked")	被选中的checkbox
$(":disabled")	所有禁用的input(有disabled属性)
$(":enabled")	所有激活的input(无disabled属性)
$(":selected")	select中被选中的option
$(":hidden")	display=none的元素
$(":visible")	display!=none的元素
$(":empty")	不含任何子节点(有注释节点也被作为空元素)的元素
$(":contains(text)")	包含指定字符串的元素(节点的属性,名称,注释不算，只算节点内容)
$(":not(select)")	例如:not(:empty)所有含子节点的元素，可以任意搭配

快速选择

选择器	解释
$(this)	自己
$(":header")	<h1>-<h6>
$(":animated")	动画元素

筛选(方法)选择器

示例	解释
$(".box").eq(0)	等同于$(".box:eq(0)")
$("#h1").find(“em”)	等同于$("#h1 em")，必须有参数
$("#h1").children(“em”)	等同于$("#h1 > em")，可以无参数,表示所有下一代子元素
$("#box1").siblings(".box")	同级的符合参数的兄弟(除了自己)，可以无参数,表示所有除了自己的兄弟
$("#img1").parent()	img1的父元素，结果:text 1