jqueryセレクターにはどのような種類がありますか?

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

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jQuery セレクターの種類とは

1. 基本セレクター

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

1. ID セレクター #id

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

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

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

説明: 指定されたクラス名が要素と一致し、要素セットを返します

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

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

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

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

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

4、*

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

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

5、selector1、selector2、...、selectorN (共用体セレクター)

説明: 各セレクターを次と一致させます。要素はマージされ、マージされた要素セットを返すために一緒に返されます。

例: $("p,span,p.myClass") は、すべての

、、およびクラスが myClass ;p> である < を選択します。 ;タグの要素コレクション

2. 階層セレクター

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

1. 子孫セレクター

例: $("p span") は、

要素内のすべての 要素を選択します (注: 子孫セレクターは、子か孫かに関係なく、親要素の指定された選択されたすべての要素を選択します)

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

例: $("p>span") は、

要素の下にあるすべての 要素を選択します (注: 子セレクターは、親要素に直接属する子要素のみを選択します)

3.ピアセレクター $("prev next")

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

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

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

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

例: $("#two~p") は、ID が two の要素の後のすべての

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

3. フィルター セレクター

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

1, :first

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

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

要素の中から最初の

要素を選択します

2, :last

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

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

要素の中から最後の

要素を選択します

3。 : not(selector)

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

例: $("input:not(.myClass)" ) を選択します。クラスが myClass

4 ではない要素、:even

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

## を返します。 #5. :odd

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

6 を返します。 :eq​​(index)

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

7, :gt(index)

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

8, :lt(index)

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

9, :focus

説明: 現在フォーカスされている要素を選択します

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

1, :contains(text)説明 : テキスト「I」を含む要素を選択し、要素コレクションを返します。

例: $("p:contains('I ')") テキスト「I」

2, :empty

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

例: $("p:empty") 子要素またはテキスト要素を含まない空の要素を選択します 空の

要素 (

)

3、:has(セレクタ)

説明: セレクターによって一致した要素を含む要素を選択し、要素コレクションを返します。

例: $("p:has(p)")

を含む

を選択します。 ; element Element (

)

4, :parent

説明: 子要素またはテキストを含む要素を選択し、その要素を返しますcollection

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

または 要素を選択します。 ;text< ;/p>)

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

1, :hidden

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

2, :visible

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

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

1.[attribute]

例: $("p[id]") id 属性を持つ p 要素を選択します

2.[attribute=value]

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

3, [attribute!=value]

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

4, [attribute^=value]

例: $("input[ name ^=text]") text

5, [attribute$=value]

例: $("input[name$=text]") で始まる name 属性を持つ入力要素を選択しますtext で終わる name 属性を持つ入力要素を選択します。

6, [attribute*=value]

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

7、[attribute~=value]

例: $("input[class~=text]") は、テキストを含むクラス属性を持つスペース区切りの値を選択します。入力要素

8, [attribute1][attribute2][attributeN]

説明: 複数の属性フィルター セレクターをマージします

5>フォーム オブジェクト属性フィルター選択デバイス (要素のコレクションを返します)

1, :enabled

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

#2, :disabled

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

3, :checked

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

例: $("input: selected") すべて選択しますselected 要素

4, :selected

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

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

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

1. :text

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

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

2. :password

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

##3.:button

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

4、 :checkbox

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

推奨される関連ビデオ チュートリアル: jQuery ビデオ チュートリアル

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