JQuery入门贴：内容选择器的使用简介

JQuery内容选择器有4种:contains(text)、:empty、:has(selector)、:parent。什么是内容选择器呢？我们知道HTML的元素，可以有文本，也可以含有子元素，还可以同时包含文本和子元素。这些文本和子元素，构成了dom树某个节点的子节点。

<div id="">child-text</div>


<div>
	<span id="childSpan"></span>
</div

<div>
	text<span id="childSpan"></span>
</div>

:contains(text)选择器，匹配包含给定文本text的元素。

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>

如果想选中文本包含John的元素，可以通过$("div:contains('John')")实现。

 

:empty选择器，匹配所有不包含子元素或者文本的空元素。这里需要注意：如果一个元素的内容只有空白，也算empty。

<div> </div>
<div id="canSelected"></div>
<div>George Martin</div>
<div><span>aty</span></div>

$("div:empty")能选中上面的第一个div和第二个div。

 

:has(selector)选择器，匹配内容符合selector的元素。

<div></div>
<div><span id="abc"></div>
<div><span id="123"></div>

$("div:has('#123')")的意思是，我们要选中一些div（只选中满足条件的div），什么条件呢？就是内容包含id为123元素的div。上面的3个div中，只有第三个div符合:has选择器的要求。

 

:parent选择器，匹配含有子元素或者文本的元素，即非空元素，与:empty功能相反。

<div id="n1">
	<div id="n2">
		<span id="n3">ha</span>
		<span id="n4">ss</span>
	</div>
	<div id="n5">
		<span id="n6">    </span>
	</div>
	<div id="n7">
	</div>
</div>

分别使用:parent和:empty选择器的结果如下：

// n2、n3、n4和n5
$("#n1 :parent").each(function(){
	alert($(this).attr("id"));
});
				
// n6和n7
$("#n1 :empty").each(function(){
	alert($(this).attr("id"));
});