レベルセレクター
$(s1 s2) [父と子]
派生セレクター: s1 内のすべての s2 ノードを取得します (レベルに関係なく)
$ (" div span")
<div>
<span></span>
<p>
<span></span>
</p>
</div>
<span></span>
$(s1 > s2) [親子]
直接子要素セレクター: s1内のs2の子要素ノードを取得
$("div > ; span")
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>
$(s1 + s2) [Brother]
直接兄弟セレクター: s1、s1 の直後にある最初の兄弟関係の s2 ノードを取得します。間に他のタグは存在できません。 s2、それ以外の場合は機能しません
$("div + span")
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>
<span></span>
<div></div>
<span></span>
$(s1 ~ s2) [Brothers]
フォローするすべての兄弟 リレーションシップノードセレクター: Get s1 の背後に兄弟関係を持つすべての s2 ノード
$("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');//张飞 关羽
//$(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="触发" onclick="f1()" />
</body>
</html>注: 4 つのセレクターのうち、他の 3 つをコメントアウトしてください。一つ一つテストしてください
次のセクション