jqueryセレクターの種類とは何ですか?

jquery セレクターには、1. ID やクラスなどで要素を検索する基本セレクター、2. 階層関係に基づいて特定の要素を取得する階層セレクター、3. の 4 種類があります。フィルタリング セレクタには、コンテンツ フィルタリング、可視性フィルタリング、属性フィルタリング、およびサブ要素フィルタリングが含まれます。4. フォーム セレクタは、要素のコレクションを返すことができます。

このチュートリアルのオペレーティング システム: Windows 10 システム、jQuery3.6.0 バージョン、Dell G3 コンピューター。

jquery には 4 つのセレクターがあります:

1. 基本セレクター

基本セレクターは、jQuery It 検索で最も一般的に使用され、最も単純な選択肢です。 DOM 要素を ID、クラス、タグ名などで検索します。

1. ID セレクター #id

説明: 指定された ID に基づいて要素を照合し、単一の要素を返します (注: Web ページでは ID 名を繰り返すことはできません)

例: $("#test") は、test

2 の ID を持つ要素を選択します。 Class selector.class

説明: 指定されたクラス名に従って要素を照合し、要素コレクションを返します

例: $(".test") はクラス test

3 を持つすべての要素を選択します。要素 (ラベル) セレクター要素

説明:指定された要素名 要素を照合して要素コレクションを返します

例: $("p") はすべての

要素を選択します$("div"): すべての div タグを選択します

4, *

説明: すべての要素に一致し、要素セットを返します

例: $("*") はすべての要素を選択します

5、selector1、selector2、...、selectorN (ユニオンセレクター)

説明: 各セレクターに一致する要素を結合して一緒に返し、結合された要素 set

例: $("p,span,p. myClass") selectsクラスが myClass

2 であるすべての

、、

タグの要素のセット。階層セレクター

階層セレクターは特定の要素を取得します。階層関係に基づいています。

1. 子孫セレクター

例: $("p span") は、

要素内のすべての 要素を選択します (注: 子孫セレクターは、親要素 All を選択します)

2. 子セレクター $("parent>child")

例: $("p>span") すべて選択 要素の下の要素 (注: 子セレクターは、親要素に直接関連付けられている子要素のみを選択します)

3. 兄弟セレクター $("prev next")

説明: PRev 要素の直後にある次の要素を選択し、要素セットを返します。

例: $(".one p") クラス 1 の次の

兄弟要素セットを選択します

4. 兄弟セレクター $("prev~siblings")

説明: prev 要素の後のすべての兄弟要素を選択し、要素セットを返します。

例: $(" #two~p ") ID が 2

3 の要素の後のすべての

兄弟要素のセットを選択します。フィルター セレクター

1>基本フィルター セレクター

1. :First

説明: 最初の要素を選択し、単一の要素を返します

例: $("p:first") はすべての

要素を選択します最初の

2, :last

説明: 最後の要素を選択し、単一の要素を返します

例: $("p:last" ) 最後の < を選択します。すべての

要素のうちの p> 要素

3. :not(selector)

説明: 指定されたセレクターに一致するすべての要素を削除し、要素 Collection

Example を返します。 : $("input:not(.myClass)") クラスが myClass

4 ではない 要素を選択します。

4, :even

説明: インデックスが偶数であるすべての要素を選択します数値、インデックスは 0 から始まり、要素セットが返されます。

5, :odd

説明: インデックスが 0 から始まり、インデックスが奇数であるすべての要素を選択します。要素セットが返されます

6. :eq(index)

説明: インデックスがindexと等しい要素を選択します。インデックスは0から始まり、単一の要素を返します。

7. :gt(index)

説明: インデックスがインデックスより大きい要素を選択します。インデックスは 0 から始まり、要素セットを返します。

8, :lt(index)

説明: インデックスがインデックスより小さい要素を選択します。インデックスは 0 から始まり、要素のコレクションを返します。

9, :focus

説明: 現在受信している要素を選択しますfocus

2>コンテンツ フィルター セレクター

1. :contains(text)

説明: テキストを含む要素を選択し、要素コレクションを返します

例: $("p:contains('I')") テキスト「I」の要素を含む要素を選択します。

2, :empty

説明: 含まれない空の要素を選択します。子要素またはテキスト要素を含み、要素コレクションを返します。

例: $(" p:empty") 子要素またはテキスト要素 (

) を含まない空の

要素を選択します。

)

3, :has(selector)

説明: セレクターに一致する要素を含む要素を選択し、要素 set

を返します。例: $("p:has(p)")

要素を含む

要素 (<) を選択します ;p>

)

4 . :parent

###説明: 子要素またはテキストを含む要素を選択し、要素コレクションを返します###

例: $("p:parent") は、子要素またはテキスト要素 (

または

text< /p>) を含む

要素を選択します。 ;)

3>可視フィルタ セレクタ

1, :hidden

説明: すべての非表示要素を選択し、要素コレクションを返します

2. :visible

説明: 表示されているすべての要素を選択し、要素コレクションを返します

4>属性フィルター セレクター (要素コレクションを返す)

1.[属性]

例: $("p[id]") id 属性

#2、[attribute=value]

を持つ p 要素を選択します。例:$("input[ name=text]") text

3, [attribute!=value]

例: $("input[name!=text]") name 属性と等しい入力要素を選択します。 name 属性を持つ入力要素を選択します。 text と等しくない

4, [attribute^=value]

例: $("input[name^=text]") text で始まる name 属性を選択します。 element

5, [attribute$=value]

例: $("input[name$=text]") は、name 属性が text

で終わる入力要素を選択します。 #6, [attribute*=value]

例: $("input[name*=text]") text を含む name 属性を持つ input 要素を選択します

7, [attribute ~= value]

例: $("input[class~=text]") スペースで区切られたクラス属性を持ち、値にテキストが含まれる入力要素を選択します。

8, [attribute1 ] [attribute2][attributeN]

説明: 複数の属性フィルター セレクターを結合

5>フォーム オブジェクト属性フィルター セレクター (戻り値の要素コレクション)

1, :enabled

説明: 使用可能な要素をすべて選択します

2、:disabled

説明: 使用できない要素をすべて選択します

3、:checked

説明:選択されたすべての要素 (ラジオ ボックス、チェック ボックス) を選択します。

#例: $("input:checked") 選択されたすべての 要素を選択します。

4. :selected

説明: 選択されたすべてのオプション要素を選択します (ドロップダウン リスト)

例: $("select option:selected") 選択されたすべてのオプション要素を選択します

4. フォーム セレクター (要素のコレクションを返します (同様の使用法)

1. :text

説明: すべての単一行テキスト ボックスを選択します

例: $(":text ") すべての単一行テキスト ボックスを選択します

2, :password

説明: すべてのパスワード ボックスを選択します

3, :button

説明: 選択しますすべてのボタン

4, :checkbox

説明: すべての複数選択ボックスを選択します

以上がjqueryセレクターの種類とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。