JQuery入門貼：內容選取器的使用簡介

標籤：內容選取器   empty和parent   

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

 

JQuery入門貼：內容選取器的使用簡介