jQuery階層セレクター
レベルセレクター
$(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 つをコメントアウトしてください。一つ一つテストしてください