jQuery 階層セレクターを使用して elements_jquery を選択する方法の概要

コードをコピー コードは次のとおりです。 1. 階層セレクター: DOM 要素間の階層関係を通じて要素を取得します。主な階層関係には、子孫、親と子、隣接関係、兄弟関係。基本クラスの関係を使用して要素を簡単かつ迅速に見つけることができます。 jQuery セレクターの詳細な説明 取得されたページ内のさまざまな要素に応じて、jQuery セレクターは次のようになります。基本セレクター、階層に分かれています。 セレクター、フィルター セレクター、フォーム セレクターの 4 つのカテゴリがあります。このうち、フィルター セレクターには、単純フィルター セレクター、コンテンツ フィルター セレクター、可視性フィルター セレクター、属性フィルター セレクター、子要素フィルター セレクター、フォーム オブジェクト属性フィルター セレクターの 6 種類があります 注: 先祖によって選択された要素のセット子孫と親>子は階層関係が異なりますが、後者は親子関係です。また、prev next は .next() に置き換えることができ、prev~siblings を使用できます。代わりに nextAll() を使用します。 --> タグを設定します。 の 2 番目のブロックに タグを追加し、すべての要素の初期値を非表示にして、jQuery 階層セレクターを使用します。 . 、対応するページのマークアップを表示します。 --> body{font-size:12px;text-align:center;} div,span{float:left;border:solid 1 px #ccc;margin:8px;display:none} .clsFraA {幅:65px;高さ:65px} .clsFraP{幅:45px;高さ:45px;背景色:#eee} .clsFraC{幅:25px;高さ:25px;背景色:#ddd } $(function () { $('#divMid').css('display', 'block'); $('div span').css('display', 'block'); // div 内のすべての タグを表示します }) $(function) () { $('#divMid').css('display', 'block'); $('div>span').css('display', 'block'); $(function () { $('#divMid div').css('display', 'block'); / /表示次の $('#divMid').next().css('display', 'block') $( function () { $ ('#divMid ~ div').css('display', 'block'); //すべてを表示 $('#divMid ').nextAll().css('display', ' block'); }) $(function () { $('#divMid').siblings('div').css('display','block'); //表示ID divMid }) /* Brothers() メソッドとセレクター prev~siblings の違いは、前者は前後に関係なくすべての隣接する要素を取得するのに対し、後者は、マークの後ろにあるすべての隣接要素のみを取得します。*/ 左 ;span class="clsFraC" id="Span2"> >右_1