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

Jquery の 3 つのセレクター: 1. 要素 ID、要素名、クラス名、および複数のセレクターで構成される基本セレクター、2. DOM 要素間の階層関係を通じて要素を取得する階層セレクター、3. フィルター セレクターさまざまなフィルタリング ルールに従って、このセレクターは、単純なフィルタリング、コンテンツ フィルタリング、表示フィルタリング、属性フィルタリング、フォーム フィルタリングなどに分割することもできます。

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

1. 基本セレクター

要素 ID、要素名、および複数のセレクターで構成され、ほとんどのページ要素は基本セレクターを通じて検索できます

セレクター	関数の説明
id	指定された ID に基づいて一致する要素
element	指定された要素名に基づいてすべての要素に一致します
.class	指定されたクラスに基づいて要素に一致します
*	すべての要素に一致します
selector1、selectorN	各セレクターに一致する要素を結合します

2. 階層セレクター

階層セレクターは、DOM 要素間の階層関係を通じて要素を取得します。その主な階層関係には、子孫、父と子、隣接、兄弟の関係。特定のタイプの関係を使用して、要素を便利かつ迅速に見つけることができます。

#セレクター関数の説明##先祖子孫##親>子#親要素に基づいてすべての子要素と一致## 前 次prev 要素の直後のすべての隣接要素と一致しますpre~siblingspre 要素の後のすべての兄弟要素と一致しますフィルター?必ずフィルター条件を追加する必要があります。 「$("div:first")」など、「:」を介してフィルター条件を追加すると、div 要素コレクション内の最初の div 要素が返されます。first はフィルター条件です。 さまざまなフィルタリング ルールに従って、フィルタ セレクタは、単純なフィルタ セレクタ、コンテンツ フィルタ セレクタ、可視性フィルタ セレクタ、属性フィルタ セレクタ、サブ要素フィルタ セレクタ、フォーム オブジェクト属性フィルタ セレクタ デバイスなどに分類できます。

Match祖先要素に基づくすべての子孫要素
	3. フィルター セレクター

1) 単純なフィルター セレクター

フィルター セレクターは、特定のフィルター ルールに従って要素を照合します。記述されるときは、コロン (:) で始まります。単純なフィルター選択フィルターは次のとおりです。フィルター セレクターの中で最も広く使用されているフィルター選択のタイプ

##Selector

関数の説明

last() または :last:not(selector):even から始まります:odd:eq(index) #:gt(index)指定されたインデックス値より大きいすべての要素を取得します。インデックス番号は 0 より小さいすべての要素を取得します。指定されたインデックス値の場合、インデックス番号は 0h1、h2 などのすべてのヘッダー タイプ要素を取得します。要素コレクションアニメーション効果を実行している要素を取得します2) コンテンツ フィルター セレクター コンテンツ フィルタリング セレクターは、要素内のテキスト コンテンツまたはそれに含まれるサブ要素の特性に基づいて要素を取得します。テキスト コンテンツは、要素の位置が完全にあいまいであることも、完全に一致することもあります

##first() または :first	最初の要素を取得します
最後の要素を取得します
指定されたセレクターを除くすべての要素を取得します
すべての要素を取得します偶数のインデックス値の場合、インデックス番号は 0
奇数のインデックス値を持つすべての要素を取得します。インデックス 番号は 0	から始まります。
指定されたインデックス値を持つ要素を取得します。インデックス番号は 0 から始まります
	#:lt(index)
	:header
	:animated

セレクター

関数の説明

:contains(text):empty子要素またはテキストを含まない空の要素をすべて取得します一致したセレクターを含む要素を取得します子要素またはテキストを含む要素を取得します3) 可視性フィルター#可視性フィルターセレクターは、要素が可視かどうかの特性に基づいて要素を取得します#セレクター

テキストを取得指定されたテキストを含む Elements
	:has(selector)
	:parent

関数の説明

:hiddenすべての非表示要素、またはそれらの要素を取得します非表示要素のタイプ:visbleすべての表示要素を取得

4) 属性フィルター

属性フィルターは、ID 番号や属性値に一致するコンテンツなど、要素の特定の属性に基づいて要素を取得します。 "["、"]" で終わる#[attribute]

指定された属性を含む要素を取得します[attribute=value]指定された属性と等しい属性を取得します特定の値を持つ Element[attribute!=value]指定された属性と等しくなく、特定の値である要素を取得します# #[attribute^=value]##[attribute$=value] 指定された属性が特定の値で終わる要素を取得します指定された属性が特定の値で終わる要素を取得します #[selector1][selector2][selectorN]複数の条件を満たす属性を満たす要素を取得するページ開発プロセス中に、特定の行を強調表示する必要が生じる場合があります。基本的なフィルターセレクター「:eq(index)」は単一のテーブルを表示するために使用できますが、大量のデータや複数のテーブルの選択ニーズを満たすことはできません。このような機能を実現するために、jQuery は子要素フィルター セレクターを通じてすべての親要素内の要素を簡単に取得できます。 #セレクター関数の説明##:nth-child(eq/even/ od/index)

属性が特定の値で始まる要素を取得
	##[属性*=値]
	##5) サブ要素フィルター

各親要素の下にある特定の位置要素を取得します。インデックス番号は 1

:first-child

から始まります。各親要素の下の最初の子要素 :only-childフォーム オブジェクト属性フィルター セレクターは、有効、無効、チェック済み、選択された属性など、フォーム内のオブジェクトの属性特性を通じて要素を取得します。 #セレクター関数の説明Get使用可能な属性を持つすべての要素を形式

:last-child	各親要素の下の最後の子要素を取得します
各親要素の下にある子要素を 1 つだけ取得します
6) フォーム オブジェクトの属性フィルター
	##:enabled

#:disabled

使用できない属性を持つすべての要素を形式

# で取得します。 selected:selectedフォーム内のすべての選択されたオプション要素を取得します7) フォーム フィルターフォーム用に特別に設計されたフォーム セレクターを jQuery セレクターに導入し、ページ上のフォーム オブジェクトをすばやく見つけることができます。 #セレクター関数の説明:input

フォーム内のすべての選択された要素を取得します
	#すべての入力を取得、textarea、select

:text

すべての単一行テキスト ボックスを取得

:passwordすべてのパスワード ボックスを取得#:radio#:checkboxチェックボックスを取得:送信すべての送信ボタンを取得:画像 すべてを取得画像フィールド:resetすべてのリセット ボタンを取得#:buttonすべてのボタンを取得:fileすべてのファイル フィールドの取得[推奨学習: jQuery ビデオ チュートリアルウェブ フロントエンド ビデオ

	#すべてのラジオ ボタンを取得
、	]

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