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"));
});