jqueryでフィルタリング機能を実装する方法

フィルタリング関数は、フィルタ セレクターを通じて jquery に実装されます。さまざまなフィルタリング ルールに従って、フィルタ セレクタは次のように分類できます。 1. コンテンツ フィルタ セレクタ。要素内のテキスト コンテンツまたは要素に含まれるサブ要素の特性に基づいて要素を取得できますが、そのテキスト コンテンツは完全にあいまいである可能性があります。要素の位置決めに完全一致または完全一致、 2. 要素が表示されるかどうかの特性に基づいて要素を取得できる可視性フィルター、 3. 要素の特定の属性に基づいて要素を取得できる属性フィルター、 4. フォーム オブジェクトの属性フィルター。有効な属性など、フォーム要素内のオブジェクトの属性特性を通じて取得できます。

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

Jquery は、さまざまなフィルター セレクターを通じてフィルター機能を実装します。 ＃＃＃＃＃＃＃＃＃フィルター？必ずフィルター条件を追加する必要があります。 「$("div:first")」など、「:」を介してフィルター条件を追加すると、div 要素コレクション内の最初の div 要素が返されます。first はフィルター条件です。 さまざまなフィルタリング ルールに従って、フィルタ セレクタは、単純なフィルタ セレクタ、コンテンツ フィルタ セレクタ、可視性フィルタ セレクタ、属性フィルタ セレクタ、サブ要素フィルタ セレクタ、フォーム オブジェクト属性フィルタ セレクタ デバイスなどに分類できます。

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

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

##Selector

関数の説明 最初の要素を取得します から始まります。 #:gt(index)指定されたインデックス値より大きいすべての要素を取得します。インデックス番号は 0#:lt(index):header:animatedコンテンツ フィルタリング セレクターは、要素内のテキスト コンテンツまたはそれに含まれるサブ要素の特性に基づいて要素を取得します。テキスト コンテンツは、要素の位置が完全にあいまいであることも、完全に一致することもあります

	##first() または :first
last() または :last	最後の要素を取得します
:not(selector)	指定されたセレクターを除くすべての要素を取得します
:even	すべての要素を取得します偶数のインデックス値の場合、インデックス番号は 0
から始まります:odd	奇数のインデックス値を持つすべての要素を取得します。インデックス 番号は 0
:eq(index)	指定されたインデックス値を持つ要素を取得します。インデックス番号は 0 から始まります
より小さいすべての要素を取得します。指定されたインデックス値の場合、インデックス番号は 0
h1、h2 などのすべてのヘッダー タイプ要素を取得します。要素コレクション
アニメーション効果を実行している要素を取得します
2) コンテンツ フィルター セレクター

セレクター

関数の説明

:empty :has(selector) :parent#可視性フィルターセレクターは、要素が可視かどうかの特性に基づいて要素を取得します

:contains(text)	テキストを取得指定されたテキストを含む Elements
子要素またはテキストを含まない空の要素をすべて取得します
一致したセレクターを含む要素を取得します
子要素またはテキストを含む要素を取得します
3) 可視性フィルター

#セレクター関数の説明

:hiddenすべての非表示要素、またはそれらの要素を取得しますタイプ hidden Element:visbleすべての表示要素を取得4) 属性フィルター

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

#セレクター

関数の説明

##[属性]指定された属性要素を含むコンテンツを取得します特定の値である指定された属性に等しい要素を取得します#[attribute$=value]指定された属性が含まれる要素を取得します何らかの値で終わる Element[attribute*=value]指定された属性に何らかの値が含まれる要素を取得します [selector1][selector2][selectorN]複数の条件を満たす属性を満たす要素を取得します

5) サブ要素フィルター

ページ開発プロセス中に、特定の行を強調表示する必要が生じる場合があります。基本的なフィルターセレクター「:eq(index)」は単一のテーブルを表示するために使用できますが、大量のデータや複数のテーブルの選択ニーズを満たすことはできません。このような機能を実現するために、jQuery は子要素フィルター セレクターを通じてすべての親要素内の要素を簡単に取得できます。

	#[attribute=value]
[attribute!=value]	指定された属性と等しくなく、特定の値である要素を取得します
[attribute^= value]	指定された属性が何らかの値で始まる要素を取得します

#セレクター関数の説明##:nth-child(eq/even/ od/index):first-child:last-child :only-child

各親要素の下にある特定の位置要素を取得します。インデックス番号は 1
から始まります。各親要素の下の最初の子要素
各親要素の下の最後の子要素を取得します
各親要素の下にある子要素を 1 つだけ取得します

6) フォーム オブジェクトの属性フィルター

フォーム オブジェクト属性フィルター セレクターは、有効、無効、チェック済み、選択された属性など、フォーム内のオブジェクトの属性特性を通じて要素を取得します。

#セレクター関数の説明##:enabledGet使用可能な属性を持つすべての要素を形式 使用できない属性を持つすべての要素を形式 フォーム内のすべての選択された要素を取得しますフォーム内のすべての選択されたオプション要素を取得します7) フォーム フィルター

	#:disabled
	# で取得します。 selected
	:selected

フォーム用に特別に設計されたフォーム セレクターを jQuery セレクターに導入し、ページ上のフォーム オブジェクトをすばやく見つけることができます。

#セレクター

関数の説明:input #すべての入力を取得、textarea、select#:radio#:checkboxチェックボックスを取得:送信すべての送信ボタンを取得:画像 すべてを取得画像フィールド:resetすべてのリセット ボタンを取得#:buttonすべてのボタンを取得:fileすべてのファイル フィールドの取得[推奨学習: jQuery ビデオ チュートリアルウェブ フロントエンド ビデオ

:text	すべての単一行テキスト ボックスを取得
:password	すべてのパスワード ボックスを取得
#すべてのラジオ ボタンを取得
、	]

以上がjqueryでフィルタリング機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。