jQueryレベル選択の書き方

Web フロントエンド テクノロジの継続的な開発と更新により、jQuery は多くのフロントエンド開発者にとって最初の選択肢となりました。jQuery は非常に強力で使いやすく、多くの一般的な Web 開発タスクを簡単に処理できるためです。これは階層的な選択です。この記事ではjQueryの階層セレクターの使い方を紹介します。

階層セレクターを使用すると、特定の要素の子要素または親要素を選択するなど、DOM ツリー内の特定のノードを選択できます。階層セレクターは、スペース文字 (' ') で区切られた複数のセレクターで構成され、各セレクターは選択を選択セットに制限します。たとえば、「div p」は Div 要素内のすべての P 要素を選択します。次の表は、一般的に使用される階層セレクターの一部を示しています:

表 1: jQuery で一般的に使用される階層セレクター

セレクターの説明

セレクター 1 > セレクター 2 セレクター 2 は、直接セレクター 1

セレクター 1 セレクター 2 セレクター 2 はセレクター 1

セレクター 1 セレクター 2 セレクター 2 の子孫要素です。セレクター 2 はセレクター 1

の次の兄弟要素です。セレクター 1 ～ セレクター 2 セレクター 2 は、セレクター 1 の後のすべての兄弟要素です。

上記のセレクターを理解した後、DOM ツリー内のノードを選択するための階層セレクターをいくつか構築してみます。次の例では、すべてのリスト項目 (li) 要素の直接の親を選択します。

$( "li" ).parent();

ここでは、parent() メソッドを使用して各リスト項目の直接の親を選択しています。次に、各親要素の次の兄弟要素をさらに選択できます。

$( "li" ).parent().next();

ここでは、 next() メソッドを使用して、各リスト項目の直接の親の次の兄弟要素を選択します。 next() メソッドを使用して次の要素を選択する代わりに、 prev() メソッドを使用して前の要素を選択することもできます。

直接の親要素と兄弟要素に加えて、子要素または子孫要素も選択できます。次の例では、クラス「wrapper」を持つすべての要素内のすべての段落 (p) 要素を選択します。

$( ".wrapper p" ).css( "background-color", "yellow" );

ここでは、クラス「wrapper」を含む要素と段落要素を区切るためにスペースを使用しています。次の例に示すように、「>」セレクターを使用して直接の子要素を選択することもできます:

$( ".wrapper > p" ).css( "background-color", "yellow" );

ここでは、「>」セレクターを使用してクラスに直接含まれる段落を選択しています。 「ラッパー」要素。階層セレクターについての理解が深まったので、独自のコードに階層セレクターをより適切に適用できるようになります。

概要:

この記事では、jQuery の階層セレクターを紹介し、読者の理解を助けるためにいくつかのサンプル コードを提供しました。階層セレクターを使用すると、特定の要素の子要素または親要素を選択するなど、DOM ツリー内の特定のノードを選択できます。これらのセレクターを理解すると、jQuery の操作をより深く理解できるようになります。

以上がjQueryレベル選択の書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。