jQueryフィルター selector_jquery の詳細説明

フィルターセレクター

フィルター セレクターは主に、特定のフィルター ルールを通じて必要な DOM 要素をフィルターで除外します。セレクターはすべて「:」で始まります。

さまざまなフィルタリング ルールに従って、フィルタ セレクタは、基本フィルタリング、コンテンツ フィルタリング、可視性フィルタリング、属性フィルタリング、サブ要素フィルタリング、およびフォーム オブジェクト属性フィルタリング セレクタに分類できます。

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

基本的なフィルター セレクターの例

最初の div 要素の背景色を #bbffaa に変更します

最後の div 要素の背景色を #bbffaa に変更します

クラスが 1 ではないすべての div 要素の背景色を #bbffaa に変更します

偶数のインデックス値を持つ div 要素の背景色を #bbffaa に変更します

奇数のインデックス値を持つ div 要素の背景色を #bbffaa に変更します

インデックス値が 3 より大きい div 要素の背景色を #bbffaa に変更します

インデックス値が 3 の div 要素の背景色を #bbffaa に変更します

インデックス値が 3 未満の div 要素の背景色を #bbffaa に変更します

すべてのタイトル要素の背景色を #bbffaa に変更します

現在アニメーション化されているすべての要素の背景色を #bbffaa に変更します

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

コンテンツ フィルタリング セレクターのフィルタリング ルールは、主に、それに含まれるサブ要素とテキスト コンテンツに反映されます

コンテンツ フィルタリング セレクターの例

テキスト「di」を含む div 要素の背景色を #bbffaa に変更します

子要素 (またはテキスト要素) を含まない空の div 要素の背景色を # bbffaa に変更します

class mini 要素を含む div 要素の背景色を #bbffaa に変更します

子要素 (またはテキスト要素) を含む div 要素の背景色を #bbffaa に変更します

可視性フィルターセレクター

可視性フィルター セレクターは、表示ステータスと非表示ステータスに基づいて、対応する要素を選択します

Visible selector: hidden には、style 属性の表示が none である要素だけでなく、テキスト非表示フィールド () やvisible:hidden などの要素も含まれます

可視性フィルターセレクターの例

表示されているすべての div 要素の背景色を #bbffaa に変更します

すべての非表示の要素を選択し、jQuery の show() メソッドを使用して表示し、背景色を # bbffaa に設定します

すべての非表示のテキストフィールドを選択し、その値を印刷します

属性フィルターセレクター

属性フィルター セレクターのフィルター ルールは、要素の属性を通じて対応する要素を取得することです

属性フィルターセレクターの例

次の要素を選択し、背景色を #bbffaa に変更します

属性 title を含む div 要素。

属性 title 値が「test」に等しい div 要素。

title 属性の値が「test」と等しくない要素を分割します (title 属性のない要素も選択されます)。

属性タイトル値が「te」で始まる div 要素。

属性タイトル値が「est」で終わる div 要素。

属性 title 値に「es」が含まれる div 要素。

属性 ID を持つ div 要素を選択し、結果で「es」を含む属性 title 値を持つ div 要素を選択します。

子要素フィルターセレクター

nth-child() セレクターについては、次のように詳しく説明します。

(1) :nth-child(even/odd): 各親要素のインデックス値が偶数 (奇数) である要素を選択できます

(2):nth-child(2): 各親要素の下にあるインデックス値 2 の要素を選択できます

(3):nth-child(3n): 各親要素のインデックス値が 3 の倍数である要素を選択できます

(3):nth-child(3n 1): 各親要素の下でインデックス値が 3n 1 である要素を選択できます

子要素フィルターセレクターの例

次の要素を選択し、背景色を #bbffaa に変更します

クラス 1 の各 div の親要素の下にある 2 番目の子要素。

クラス 1 の各 div の親要素の下にある最初の子要素

クラス 1 の各 div の親要素の下にある最後の子要素

クラス 1 の div 親要素の下に子要素が 1 つだけある場合は、この子要素を選択します

フォームオブジェクト属性フィルターセレクター

このセレクターは主に、選択されたフォーム要素をフィルター処理します

フォームオブジェクト属性フィルターセレクターの例

jQuery オブジェクトの val() メソッドを使用して、フォーム内の使用可能な 要素の値を変更します。 jQuery オブジェクトの val() メソッドを使用して、使用できない 要素の値を変更します。

の形式で

jQuery オブジェクトの length プロパティを使用して、選択された複数選択ボックスの数を取得します

jQuery オブジェクトの text() メソッドを使用して、ドロップダウン ボックスで選択されたコンテンツを取得します

フォームセレクター

上記はすべて jQuery フィルター セレクターに関するもので、友人にとって役立つことを願っています。