代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
內容過濾選擇器：根據元素中的文字內容或所包含的子元素特征獲取元素，其文字內容可以模糊或絕對匹配進行元素定位
jQuery選擇器詳解
根據所獲取頁面中元素的不同，可以將jQuery選擇器分為：基本選擇器、層次選擇器、過濾選擇器、表單選擇器四大類。其中，在過濾選擇器中有可以分為：簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器6種
-->
<title></title>
<!-- 使用jQuery內容過濾選擇器選擇元素：在頁面中，根據需要創建四個<div>標記，並在其中的<div>中新建一個<span>標記，其余<div>標記中輸入內容（或為空）,通過內容過濾器獲取指定的元素，並顯示在頁面中。-->
<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)內容過濾選擇器中，如果是查找字母，則有大小寫的區別-->
</head>
<body>
<div>ABCD</div>
<div><span></span></div>
<div>EFAH</div>
<div></div>
</body>
</html>