首頁 > 開發者 > JavaScript
複製代碼 代碼如下:
<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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
