jQuery層次選擇器
層次選擇器
$(s1 ?s2) [父子]
派生選擇器：在s1內(nèi)部獲得全部的s2節(jié)點(diǎn)(不考慮層次)
$(“div ?span”)
<div> <span></span> <p> <span></span> </p> </div> <span></span>
$(s1 > s2) [父子]
直接子元素選擇器:在s1內(nèi)部獲得s2的子元素節(jié)點(diǎn)
$(“div > span”)
<div> <span></span> <p> <span></span> </p> <span></span> </div> <span></span>
$(s1 + s2) [兄弟]
直接兄弟選擇器：在s1后邊獲得緊緊挨著的第一個(gè)兄弟關(guān)系的s2節(jié)點(diǎn)，s1和s2之間不能有任何其它標(biāo)簽，不然不起作用
$(“div + span”)
<div> <span></span> <p> <span></span> </p> <span></span> </div> <span></span> <span></span> <div></div> <span></span>
$(s1 ~ s2) [兄弟]
后續(xù)全部兄弟關(guān)系節(jié)點(diǎn)選擇器：在s1后邊獲得全部兄弟關(guān)系的s2節(jié)點(diǎn)
$(“div ~ span”)
<div> <span></span> <p> <span></span> </p> <span></span> </div> <span></span> <span></span> <p></p> <span></span>
<!DOCTYPE html>
<html>
<head>
<title>php.cn</title>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script >
function f1(){
//$(s1 s2)
$('div span').css('background-color','blue');
//$(s1 > s2)
$('div > span').css('background-color','green');//張飛 關(guān)羽
//$(s1 + s2) 緊緊挨著的
$('div + span').css('background-color','red');
//$(s1 ~ s2)
$('div ~ span').css('background-color','brown');
}
</script>
</head>
<body>
<h2>層次選擇器</h2>
<div>
<span>北京</span>
<p>
<span>上海</span>
</p>
<span>深圳</span>
</div>
<p>南京</p>
<span>杭州</span>
<p>廈門</p>
<span>天津</span>
<div>重慶</div>
<span>合肥</span>
<input type="button" value="觸發(fā)" onclick="f1()" />
</body>
</html>注：請(qǐng)大家將四個(gè)選擇器的其它三個(gè)注釋掉。一個(gè)一個(gè)進(jìn)行測(cè)試
