jQuery選擇器之層級(jí)選擇器
文檔中的所有的節(jié)點(diǎn)之間都是有這樣或者那樣的關(guān)系。我們可以把節(jié)點(diǎn)之間的關(guān)系可以用傳統(tǒng)的家族關(guān)系來描述，可以把文檔樹當(dāng)作一個(gè)家譜，那么節(jié)點(diǎn)與節(jié)點(diǎn)直接就會(huì)存在父子，兄弟，祖孫的關(guān)系了。
選擇器中的層級(jí)選擇器就是用來處理這種關(guān)系
子元素 后代元素 兄弟元素 相鄰元素
通過一個(gè)列表，對(duì)比層級(jí)選擇器的區(qū)別
仔細(xì)觀察層級(jí)選擇器之間還是有很多相似與不同點(diǎn)
- 層級(jí)選擇器都有一個(gè)參考節(jié)點(diǎn)
- 后代選擇器包含子選擇器的選擇的內(nèi)容
- 一般兄弟選擇器包含相鄰兄弟選擇的內(nèi)容
- 相鄰兄弟選擇器和一般兄弟選擇器所選擇到的元素，必須在同一個(gè)父元素下
任務(wù)
在代碼編輯器中第37行填寫相應(yīng)代碼
$('div > p')
在代碼編輯器中第43行填寫相應(yīng)代碼
$('div p')
在代碼編輯器中第62行填寫相應(yīng)代碼
$(".prev + div")
在代碼編輯器中第68行填寫相應(yīng)代碼
$(".prev ~ div")
<!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>子選擇器與后代選擇器</h2>
<div class="left">
<div class="aaron">
<p>div下的第一個(gè)p元素</p>
</div>
<div class="aaron">
<p>div下的第一個(gè)p元素</p>
</div>
</div>
<div class="right">
<div class="imooc">
<article>
<p>div下的article下的p元素</p>
</article>
</div>
<div class="imooc">
<article>
<p>div下的article下的p元素</p>
</article>
</div>
</div>
<script type="text/javascript">
//子選擇器
//$('div > p') 選擇所有div元素里面的子元素P
?.css("border", "1px groove red");
</script>
<script type="text/javascript">
//后代選擇器
//$('div p') 選擇所有div元素里面的p元素
?.css("border", "1px groove red");
</script>
<h2>相鄰兄弟選擇器與一般兄弟選擇器</h2>
<div class="bottom">
<div>兄弟節(jié)點(diǎn)div, +~選擇器不能向前選擇</div>
<span class="prev">選擇器span元素</span>
<div>span后第一個(gè)兄弟節(jié)點(diǎn)div</div>
<div>兄弟節(jié)點(diǎn)div
<div class="small">子元素div</div>
</div>
<span>兄弟節(jié)點(diǎn)span,不可選</span>
<div>兄弟節(jié)點(diǎn)div</div>
</div>
<script type="text/javascript">
//相鄰兄弟選擇器
//選取prev后面的第一個(gè)的div兄弟節(jié)點(diǎn)
?.css("border", "3px groove blue");
</script>
<script type="text/javascript">
//一般相鄰選擇器
//選取prev后面的所有的div兄弟節(jié)點(diǎn)
?.css("border", "3px groove blue");
</script>
</body>
</html>
.left,
.right {
width: 300px;
height: 120px;
}
.left div,
.right div {
width: 100px;
height: 90px;
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ù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
