jQuery的內容過濾選擇器學習教學_jquery

內容過濾器的過濾規則主要是包含的子元素或文字內容。

$('div:contains("xxx")').css('background', '#ccc'); //选择元素文本节点含有xxx 文本的元素 
 
$('div:empty').css('background', '#ccc'); //选择空元素 
 
$('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class 是red 的元素 
 
$(':parent').css('background', '#ccc'); //选择非空元素 

jQuery 提供了一個has()方法來提高:has 過濾器的效能：

$('ul').has('.red').css('background', '#ccc'); //选择子元素含有class 是red 的元素 

jQuery 提供了一個名稱和:parent 相似的方法，但這個方法並不是選取含有子元素或文字的元素，而是取得目前元素的父元素，回傳的是元素集合。

$('li').parent().css('background', '#ccc'); //选择当前元素的父元素 
 
$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素 
 
$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到div 父元素停止 

jQuery內容過濾選擇器的過濾規則主要運用在DOM元素所包含的子元素或其文字內容上，主要包括以下四種過濾方法：

為了更好的學習，先寫幾個DOM元素的HTML結構：

<div>John Resign</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J.Ohn</div>
<div></div>
<p></p>
<div><p>Has p</p></div>

一、內容過濾選擇器——:contains(text)
選擇器：

E:contains(text)  //E是指DOM元素，:contains(text)包含的文本，text是指定查找的字串
描述：

選取含有文字內容為「text」的元素

傳回值：

集合元素

實例：

<script type="text/javascript">
 $(document).ready(function(){
  $('div:contains(John)').css('background','#f36');
 });
</script>

功能：

改變含有文字為「John」的div元素的背景色

效果：

回到前面的HTML結構中我們可以看出其中有兩個div元素中包含了"John"文本，因為我們這裡主要是改變了包含文本“John”的div的背景色，因此大家在效果中可以看出我們其中第一個和第三個div的背景色變成了"#f36",為了更能體會從中的變化，大家可以透過Firefox中的Firebug工具看出HTML的變化：

二、內容過濾選擇器——:empty

選擇器：

E:empty //其中E為DOM元素，:empty是指DOM元素中不包含任何子元素或文字 
描述：

選取不含任何子元素或文字的空元素

傳回值：

集合元素

實例：

<script type="text/javascript">
 $(document).ready(function(){
  $('div:empty').css('background','#f36');
 });
</script>

功能：

改變不含子元素（包括不含文字元素）的div的背景色，換句話說，就是改變不包含任何東西的div的背景色

效果：

雖然我們前面的html中所有元素中不包含子元素，但有些包含了文字元素，只有一個div和一個p元素具沒有子元素也沒有文字內容。加上我們這個例子中，我們只對不包含子元素和文字內容的div進行了改變背景色的設置，所以我們的效果中只有div加上了“#f36”的背景色，同樣我們來看看HTML的變化吧：

三、內容過濾選擇器——:has(selector)

選擇器：

E:has(selector)  //其中E為有效果DOM元素標籤，:has(selector)含有一個選擇器，selector用於篩選的選擇器

描述：

選取含有選擇器所符合的元素的元素

傳回值：

集合元素

實例：

<script type="text/javascript">
 $(document).ready(function(){
  $('div:has(p)').css('background','#f36');
 });
</script>

功能：
改變含有子元素P的div元素的背景色
效果：

在我们这个实例中，只有一个div中包含了子元素P，所以包含了符合这个要求的div元素其背景色被设置为“#f36”，改变后的HTML:

四、内容过滤选择器——:parent

选择器：

E:parent //E为有效的DOM元素标签，:parent含有子元素或文本内容。

描述：

选取含有子元素或者文本的元素标签

返回值：

集合元素

实例：

<script type="text/javascript">
 $(document).ready(function(){
  $('div:parent').css('background','#f36');
 });
</script> <br />

功能：
改变含有子元素或文本内容的div的背景色。换句话说只在div包含了任何一个子元素或者任何内容，其背景色都将会改变。
效果：

本例子，只有一个div和一个p元素中不包含任何子元素和文本内容，因为我们这里是对div进行设置，所以效果中显示，除了这两个不含有子元素和任何内容的div的背景色都变成了“#f36”，变化后的HTML：

有关于jQuery选择器中的内容过滤选择器，就简单的说到这里，大家如果想更深的体会其具体的用法，可以在本地多做几个实例练习。如果大家对jQuery选择器的其他选择器用法感兴趣的话，可以在本站中了解其他的选择器的具体功能和用法，同时也可以随时观注本站的内容更新。