jQuery內(nèi)容過(guò)濾選擇器
jQuery內(nèi)容過(guò)濾選擇器的過(guò)濾規(guī)則主要運(yùn)用在DOM元素所包含的子元素或其文本內(nèi)容上，主要包括以下四種過(guò)濾方法：
<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>
一、內(nèi)容過(guò)濾選擇器——:contains(text)
選擇器：
E:contains(text) //E是指DOM元素，:contains(text)包含的文本，text是指定查找的字符串
描述：
選取含有文本內(nèi)容為“text”的元素
返回值：
集合元素
實(shí)例：
<script type="text/javascript"> $(document).ready(function(){
$('div:contains(John)').css('background','#f36');
});</script>功能：
改變含有文本為“John”的div元素的背景色
效果：
回到前面的HTML結(jié)構(gòu)中我們可以看出其中有兩個(gè)div元素中包含了"John"文本，因?yàn)槲覀冞@里主要是改變了包含文本“John”的div的背景色，因此大家在效果中可以看出我們其中第一個(gè)和第三個(gè)div的背景色變成了"#f36",為了更能體會(huì)從中的變化，大家可以通過(guò)Firefox中的Firebug工具看出HTML的變化：
二、內(nèi)容過(guò)濾選擇器——:empty
選擇器：
E:empty //其中E為DOM元素，:empty是指DOM元素中不包含任何子元素或文本
描述：
選取不含任何子元素或文本的空元素
返回值：
集合元素
實(shí)例：
<script type="text/javascript"> $(document).ready(function(){
$('div:empty').css('background','#f36');
});</script>功能：
改變不含子元素（包括不含文本元素）的div的背景色，換句話說(shuō)，就是改變不包含任何東西的div的背景色
效果：
雖然我們前面的html中所有元素中不包含子元素，但有一些包含了文本元素，只有一個(gè)div和一個(gè)p元素具沒有子元素也沒有文本內(nèi)容。加上我們這個(gè)例子中，我們只對(duì)不包含子元素和文本內(nèi)容的div進(jìn)行了改變背景色的設(shè)置，所以我們的效果中只有div加上了“#f36”的背景色，同樣我們來(lái)看看HTML的變化吧：
三、內(nèi)容過(guò)濾選擇器——:has(selector)
選擇器：
E:has(selector) //其中E為有效果DOM元素標(biāo)簽，:has(selector)含有一個(gè)選擇器，selector用于篩選的選擇器
描述：
選取含有選擇器所匹配的元素的元素
返回值：
集合元素
實(shí)例：
<script type="text/javascript"> $(document).ready(function(){
$('div:has(p)').css('background','#f36');
});</script>功能：
改變含有子元素P的div元素的背景色
效果：
在我們這個(gè)實(shí)例中，只有一個(gè)div中包含了子元素P，所以包含了符合這個(gè)要求的div元素其背景色被設(shè)置為“#f36”，改變后的HTML:
四、內(nèi)容過(guò)濾選擇器——:parent
選擇器：
E:parent //E為有效的DOM元素標(biāo)簽，:parent含有子元素或文本內(nèi)容
描述：
選取含有子元素或者文本的元素標(biāo)簽
返回值：
集合元素
實(shí)例：
<script type="text/javascript"> $(document).ready(function(){
$('div:parent').css('background','#f36');
});</script>功能：
改變含有子元素或文本內(nèi)容的div的背景色。換句話說(shuō)只在div包含了任何一個(gè)子元素或者任何內(nèi)容，其背景色都將會(huì)改變。
效果：
本例子，只有一個(gè)div和一個(gè)p元素中不包含任何子元素和文本內(nèi)容，因?yàn)槲覀冞@里是對(duì)div進(jìn)行設(shè)置，所以效果中顯示，除了這兩個(gè)不含有子元素和任何內(nèi)容的div的背景色都變成了“#f36”，變化后的HTML：
