jQuery 層選擇器
層次選擇器
文檔中的所有的節(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í)選擇器之間還是有很多相似與不同點(diǎn)
層級(jí)選擇器都有一個(gè)參考節(jié)點(diǎn)
后代選擇器包含子選擇器的選擇的內(nèi)容
一般兄弟選擇器包含相鄰兄弟選擇的內(nèi)容
相鄰兄弟選擇器和一般兄弟選擇器所選擇到的元素，必須在同一個(gè)父元素下
子選擇器
看下面代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子選擇器</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("div>a").css("color","red");
})
</script>
</head>
<body>
<div>
<a href="#">php 中文網(wǎng)</a>
</div>
</body>
</html>通過div 找到他下面的元素，使a 標(biāo)簽的顏色變成紅色
后代選擇器，我們?cè)谏瞎?jié)已經(jīng)講過，小伙伴們可以去看下源碼
相鄰兄弟選擇器
代碼如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子選擇器</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".p1 + p").css("color","red");
})
</script>
</head>
<body>
<div>
<p>php 中文網(wǎng)</p>
<p class="p1">php 中文網(wǎng)</p>
<p>php 中文網(wǎng)</p>
</div>
</body>
</html>一般兄弟匹配選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子選擇器</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".p1 ~ p").css("color","red");
})
</script>
</head>
<body>
<div>
<p>php 中文網(wǎng)</p>
<p>php 中文網(wǎng)</p>
<p>php 中文網(wǎng)</p>
<p class="p1">php 中文網(wǎng)</p>
<p>php 中文網(wǎng)</p>
<p>php 中文網(wǎng)</p>
<p>php 中文網(wǎng)</p>
</div>
</body>
</html>
