使用jQuery內(nèi)容過濾選擇器選擇元素實例講解

更新時間：2013年04月18日 14:35:00 作者：

內(nèi)容過濾選擇器：根據(jù)元素中的文字內(nèi)容或所包含的子元素特征獲取元素，其文字內(nèi)容可以模糊或絕對匹配進(jìn)行元素定位，接下來為大家詳細(xì)介紹下jQuery選擇器，感興趣的朋友可以參考下哈

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<!-- 
內(nèi)容過濾選擇器：根據(jù)元素中的文字內(nèi)容或所包含的子元素特征獲取元素，其文字內(nèi)容可以模糊或絕對匹配進(jìn)行元素定位 
jQuery選擇器詳解 
根據(jù)所獲取頁面中元素的不同，可以將jQuery選擇器分為：基本選擇器、層次選擇器、過濾選擇器、表單選擇器四大類。其中，在過濾選擇器中有可以分為：簡單過濾選擇器、內(nèi)容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器6種 
--> 
<title></title> 
<!-- 使用jQuery內(nèi)容過濾選擇器選擇元素：在頁面中，根據(jù)需要創(chuàng)建四個<div>標(biāo)記，并在其中的<div>中新建一個<span>標(biāo)記，其余<div>標(biāo)記中輸入內(nèi)容（或為空）,通過內(nèi)容過濾器獲取指定的元素，并顯示在頁面中。--> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<style type="text/css"> 
body{font-size:12px;text-align:center} 
div{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none} 
span{float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee} 
</style> 
<script type="text/javascript"> 
$(function () { //顯示包含給定文本的元素 
$("div:contains('A')").css('display','block'); 
}) 
$(function(){ //顯示所有不包含子元素或者文本的空元素 
$('div:empty').css('display','block'); 
}) 
$(function () { //顯示含有選擇器所匹配的元素 
$('div:has(span)').css('display', 'block'); 
}) 
$(function () { //顯示含有子元素或者文本的元素 
$('div:parent').css('display', 'block'); 
}) 
</script> 
<!-- 注：在:contains(text)內(nèi)容過濾選擇器中，如果是查找字母，則有大小寫的區(qū)別--> 
</head> 
<body> 
<div>ABCD</div> 
<div><span></span></div> 
<div>EFAH</div> 
<div></div> 
</body> 
</html> 