HTML ドキュメントでは、各要素は常に DOM ノード ツリー上の特定の位置にあり、ドキュメント階層内の要素間には親と子の関係など、常に特定の階層関係が存在します。
1. 子要素セレクター
は、指定された親要素の下にあるすべての子要素を検索するために使用されます。構文形式は次のとおりです:
$("親->子");
2. 子孫要素セレクター
は、指定された祖先要素の下にあるすべての子孫要素と一致するために使用されます。 構文形式は次のとおりです。
$("祖先子孫");
3. 直接の兄弟要素セレクター
は、prev 要素の直後にあるすべての next 要素と一致するために使用されます。 構文形式は次のとおりです。
$("前 次")
4. 隣接する兄弟要素セレクター
は、要素の背後にあるすべての兄弟要素を選択するために使用されます。 構文形式は次のとおりです。
$("prev~兄弟")
包括的な例:
<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("form input").css("color", "red"); //フォーム要素の子孫input要素のフォント色を設定します
$("div>div").css("background", "#FCF"); //maindiv
のサブ要素 div1 と div2 の背景色を設定します。
$("div~input").css("border", "2px plain blue"); // div 要素の後ろのすべての入力要素に境界線を設定します
$("div input").css("border", "2px Solid red"); // div 要素の直後に input 要素のボーダーを設定します
});
レベルセレクター
<フォームid="form1">
& Lt; div id = "div1" & gt; maindiv サブ要素: ID は div1 & lt;/div & gt;
& Lt; div id = "div2" & gt; maindiv サブ要素: ID は div2 & lt;/div & gt;
;
& Lt; label & gt; maindiv のサブ要素は次のとおりです: div1、div2 & lt;/label & gt;
レンダリングを以下に示します:
この記事が皆さんの jQuery プログラミングに役立つことを願っています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
