ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryにはどのようなタイプのセレクターがありますか?

jQueryにはどのようなタイプのセレクターがありますか?

一个新手
一个新手オリジナル
2017-09-07 13:30:229292ブラウズ

jQuery セレクター
1. 基本セレクター

基本セレクターは、jQuery で最も一般的に使用され、最も単純なセレクターであり、要素の ID、クラス、タグ名を通じて DOM 要素を検索します。
1. ID セレクター #id
説明: 指定された ID に基づいて要素を照合し、単一の要素を返します (注: Web ページでは ID 名を繰り返すことはできません)
例: $("#test") はid をテスト要素として
2. クラス selector.class
説明: 指定されたクラス名に従って要素を照合し、要素のコレクションを返します
例: $(".test") はクラス test を持つすべての要素を選択します
3.
説明: 指定された要素名に従って要素を照合し、要素セットを返します
例: $("p") すべての

要素を選択します
4, *
説明: すべての要素を照合し、要素セットを返します
例: $(" *") すべての要素を選択
5, selector1, selector2,..., selectorN
説明: 各セレクターに一致する要素をマージしてまとめて返し、マージされた要素セットを返します
例: $("p, span,p.myClass") は、クラス myClass を持つすべての

、および

タグの要素のセットを選択します
2. 階層セレクター
階層セレクターは、階層関係に基づいて特定の要素を取得します。
1. 子孫セレクター
例: $("p span") は、

要素内のすべての 要素を選択します (注: 子孫セレクターは、子のレベルに関係なく、親要素の指定されたすべての要素を選択します) 、または孫レベル)
2. 子セレクター $("parent>child")
例: $("p>span") は、

要素の下にあるすべての 要素を選択します (注: 子セレクターのみを選択します)親要素に直接属する子要素)
3. ピアセレクター $("prev+next")
説明: prev 要素の直後の次の要素を選択し、要素セットを返します
例: $(".one+ p")クラス 1 で次の兄弟要素セットを選択します
4. 兄弟セレクター $("prev~siblings")
説明: prev 要素の後のすべての兄弟要素を選択し、要素セットを返します
例: $("#two ~p") ID が 2 の要素の後のすべての

兄弟要素のセットを選択します
3. フィルター セレクター
1> 基本フィルター セレクター
1. :first
説明: 最初の 1 つの要素を選択します。単一の要素を返します
例: $("p:first") すべての

要素の中から最初の

要素を選択します
2, :last
説明: 最後の要素を選択し、単一の要素を返します
例: $( "p:last") は、すべての

要素の中から最後の

要素を選択します
3. :not(selector)
説明: 指定されたセレクターに一致するすべての要素を削除し、要素を返します
例: $(" input:not(.myClass)") クラスが myClass
4 ではない 要素を選択します。 :even
説明: インデックスが偶数であるすべての要素を選択し、インデックスは 0 から始まり、要素セットを返します
5. :odd
説明: 0 から始まる奇数のインデックスを持つ要素をすべて選択し、要素のコレクションを返します
6. :eq(index)
説明: 0 から始まるインデックスと等しい要素を選択します。単一の要素を返します
7. :gt(index)
説明: インデックスが 0 から始まる要素を選択し、要素セットを返します
8.要素のコレクションを返す
9, :focus
説明: 現在フォーカスを受けている要素を選択する

2> コンテンツフィルターセレクター1, :contains(text)
説明:テキストコンテンツをテキストとして含む要素を要素として返し、要素コレクションを返します
例: $("p:contains('I')") テキスト「I」を含む要素を選択します
2, :empty
説明: を含まない空の要素を選択します子要素またはテキスト要素を取得し、要素のセットを返します
例: $ ("p:empty") 子要素またはテキスト要素 (

) を含まない空の

要素を選択します。 )
3. :has(selector)
説明: 要素の selector 要素と一致する要素を選択し、要素のコレクションを返します
例: $("p:has(p)") は、

を含む要素を選択します。

要素 (

4. :parent
説明: 子要素またはテキストを含む要素を選択し、要素のコレクションを返します
例: $(" p:parent") は、子要素またはテキスト要素を含む

要素 (

または

text

)を選択します

3>可視性フィルターselector1, :hidden
説明: すべての非表示要素を選択し、要素セットを返す

2, :visible
説明: すべての表示要素を選択し、要素セットを返す
4> 属性フィルターセレクター (要素セットを返す)
1 , [attribute]
例: $("p[id]" ) id属性を持つp要素を選択
2, [attribute=value]
例: $("input[name=text]") input要素を選択name 属性が text
3、[attribute!=value]
に等しい例: $("input[name!=text]") name 属性が text
4 に等しくない入力要素を選択します。 [attribute^=value]
例: $("input[name^=text]") name 属性が text と等しくない要素を選択します。 name 属性が text で始まる入力要素
5, [attribute$=value]
例: $("input[name$=text]") は、name 属性が text で終わる入力要素を選択しますwith 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。