jQuery選擇器之內(nèi)容篩選選擇器
基本篩選選擇器針對(duì)的都是元素DOM節(jié)點(diǎn)，如果我們要通過(guò)內(nèi)容來(lái)過(guò)濾，jQuery也提供了一組內(nèi)容篩選選擇器，當(dāng)然其規(guī)則也會(huì)體現(xiàn)在它所包含的子元素或者文本內(nèi)容上
內(nèi)容過(guò)濾器描述如下表：
注意事項(xiàng)：
- :contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
- 如果:contains匹配的文本包含在元素的子元素中，同樣認(rèn)為是符合條件的。
- :parent與:empty是相反的，兩者所涉及的子元素，包括文本節(jié)點(diǎn)
任務(wù)
在代碼編輯器中第34行填寫(xiě)相應(yīng)代碼
$(".div:contains(':contains')")
在代碼編輯器中第40行填寫(xiě)相應(yīng)代碼
$(".div:has(span)")
在代碼編輯器中第62行填寫(xiě)相應(yīng)代碼
$("a:parent")
在代碼編輯器中第68行填寫(xiě)相應(yīng)代碼
$("a:empty")
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="http://idcbgp.cn/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>內(nèi)容篩選器</h2>
<h3>:contains/:has</h3>
<div class="left">
<div class="div">
<p>:contains</p>
</div>
<div class="div">
<p>:contains</p>
</div>
<div class="div">
<p>
<span>:has</span>
</p>
</div>
<div class="div">
<p>:contains</p>
</div>
</div>
<script type="text/javascript">
//查找所有class='div'中DOM元素中包含"contains"的元素節(jié)點(diǎn)
//并且設(shè)置顏色
?.css("color", "#CD00CD");
</script>
<script type="text/javascript">
//查找所有class='div'中DOM元素中包含"span"的元素節(jié)點(diǎn)
//并且設(shè)置顏色
?.css("color", "blue");
</script>
<h3>:parent/:empty</h3>
<div class="left">
<div class="aaron">
<a>:parent</a>
</div>
<div class="aaron">
<a>:parent</a>
</div>
<div class="aaron">
<a>:parent</a>
</div>
<div class="aaron">
<a></a>
</div>
</div>
<script type="text/javascript">
//選擇所有包含子元素或者文本的a元素
//增加一個(gè)藍(lán)色的邊框
?.css("border", "3px groove blue");
</script>
<script type="text/javascript">
//找到a元素下面的所有空節(jié)點(diǎn)(沒(méi)有子元素)
//增加一段文本與邊框
?.text(":empty").css("border", "3px groove red");
</script>
</body>
</html>
.left {
width: auto;
height: 120px;
}
.left div {
width: 70px;
height: 70px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
.bottom {
width: 800px;
}
.bottom div,
.bottom span {
display: block;
width: 80px;
height: 80px;
margin: 5px;
background: #bbffaa;
float: left;
font-size: 14px;
}
.bottom .small {
width: 60px;
height: 25px;
font-size: 12px;
background: #fab;
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
