jQuery でのさまざまなタイプのセレクターの使用法を理解する

セレクターは jQuery の非常に重要な概念であり、ページ上の要素を正確に見つけて操作するのに役立ちます。この記事では、基本的なセレクター、階層セレクター、フィルター セレクター、属性セレクターなど、jQuery のさまざまな種類のセレクターの使用法を紹介し、読者がこれらのセレクターの使用法をよりよく理解して習得できるように、具体的なコード例を示します。

1. 基本セレクター

基本セレクターは最も一般的に使用されるセレクターの 1 つで、要素名、クラス名、または ID によって要素を選択できます。以下に、いくつかの基本セレクターのサンプル コードを示します。

1. すべての <div> 要素を選択します。 <pre class='brush:javascript;toolbar:false;'>$('div')</pre><li> <p> Selectクラス名 <code>example の要素:

   $('.example')

2. ID my-element:

   $('#my-element')

# # の要素を選択します。 #2. 階層セレクター
階層セレクターは、子要素、子孫要素、隣接要素、兄弟要素などの要素間の関係に基づいて要素を選択できます。以下は、いくつかの階層セレクターのサンプル コードです。
1. 親要素の下にあるすべての子要素を選択します。

   $('parent > child')

2. 祖先要素の下にあるすべてを選択します。子孫要素:

   $('ancestor descendant')

3. 隣接する要素を選択:

   $('element + next')

4. すべての兄弟要素を選択:

   $('element ~ siblings')

3. フィルター セレクター
フィルター セレクターは、表示要素、非表示要素、最初の要素、最後の要素などを含む、ステータスまたは位置に基づいて要素を選択できます。以下に、よく使用されるフィルター セレクターのサンプル コードをいくつか示します。
1. 表示されているすべての要素を選択します:

   $(':visible')

2. すべての非表示の要素を選択します:

   $(':hidden')

3. 最初の要素を選択します:

   $('element:first')

4. 最後の要素を選択します:

   $('element:last')

4. 属性セレクター
属性セレクターは、属性の存在、特定の値に等しい属性値、特定の文字列で始まる属性値などを含む属性に基づいて要素を選択できます。いくつかの属性セレクターのサンプル コードを次に示します。

1. title 属性を持つ要素を選択します:

   $('[title]')

2. Select

   hrefhttps で始まる属性値を持つ要素:

   $('[href^="https"]')

3. classを含む属性値を選択してくださいexample の要素: <pre class='brush:javascript;toolbar:false;'>$('[class*=&quot;example&quot;]')</pre>

上記のサンプル コードを通じて、読者は jQuery のさまざまなタイプのセレクターの使用法をより深く理解し、習得することができます。セレクターは jQuery の非常に重要な部分です。セレクターの使用をマスターすると、ページ上の要素をより効率的に操作し、さまざまなインタラクティブな効果や機能を実現できるようになります。この記事が読者のお役に立てれば幸いです、読んでいただきありがとうございます!