ホームページ > 記事 > ウェブフロントエンド > Jquery: 強力なセレクター
Jquery セレクターは、基本セレクター、階層セレクター、フィルター セレクター、フォーム セレクターに分かれており、これら 4 つのセレクターを以下に 1 つずつ紹介します。
1. 基本的なセレクター
それらのほとんどは基本的なセレクターです。基本的なセレクターには、ID セレクター、クラス セレクター、ラベル セレクター、複合セレクター、および "*" セレクターが含まれます。
$("#id") 属性 ID が "id" と等しいすべての要素を選択します。
$(".class_1") 属性クラスが「class_1」であるすべての要素を選択します。
$("p") はすべての
要素を選択します。
$("div,span,p.myClass") は、属性クラスが「myClass」であるすべての
タグの要素のグループを選択します。
$("*") はすべての要素を選択します。
2. 階層セレクター
要素間の階層関係に基づいて特定の要素を取得したい場合は、階層セレクターの使用を選択できます。
$("div p") は
要素を選択します。このセレクターは、次のレベルの要素 (つまり、子要素) ではなく、すべての子孫要素を取得します。
$("div>p") は、
として選択します。
$(".class_1+div") 属性クラスが "class_1" である次の
$(".class_1").next("div") 効果は上記と同じです。
$(".class_1~div") は、属性クラスが "class_1" である要素の背後にあるすべての
$(".class_1").nextAll("div") 効果は上記と同じです。
$(".class_1").siblings("div") 上記の 2 つのセレクターとの違いは、このセレクターには前後の区別がないことです。同じ世代のすべての
3. フィルター セレクター
フィルター セレクターはすべてコロン (:) で始まり、基本フィルター、コンテンツ フィルター、可視性フィルター、属性フィルター、サブ要素フィルター、およびフォーム オブジェクト属性フィルター セレクターに分類できます。
1. 基本的なフィルター セレクター
$("div:first") は、すべての
$("div:last") は、すべての
$("input:not(.class_1)") 属性クラスが "class_1" ではない 要素を選択します。
$("input:even") は、インデックスが偶数である 要素を選択します。
$("input:odd") は、インデックスが奇数である 要素を選択します。
$("input:eq(1)") インデックスが 1 の 要素を選択します。
$("input:gt(1)") インデックスが 1 より大きい 要素を選択します。 (注: 1 より大きく、1 は含まれません)
$("input:lt(1)") インデックスが 1 未満の 要素を選択します。 (注: 1 未満、1 は含まれません)
$(":header") は、Web ページ内のすべての
$("div:animated") は、アニメーション化されている
$(":focus") は、現在フォーカスされている要素を選択します。
2. コンテンツ フィルター セレクター
$("div:contains('I')") テキスト「I」を含む
$("div:empty") は、子要素 (テキスト要素を含む) を含まない空の要素を選択します。
$("div:has(p)") は、
要素を含む
$("div:parent") は、子要素 (テキスト要素を含む) を持つ
3. 可視性フィルターセレクター
$(":hidden") はすべての非表示の要素を選択し、$("input:hidden") はすべての非表示の 要素を選択します。
$("div:visible") は、表示されているすべての
4. 属性フィルターセレクター
$("div[id]") は、属性 ID を持つ
$("div[title=text]") 属性 title が「text」である
$("div[title!=text]") 属性 title が "text" と等しくない
$("div[title^=text]") 属性タイトルが "text" で始まる
$("div[title$=text]") は、属性 title が "text" で終わる
$("div[title*=text]") 属性 title に「text」が含まれる
$('div[title|="text"]') 属性 title が "text" に等しいか、接頭辞として "text" が付いている
$('div[title~="text"]') 属性 title のスペース区切りの値に「text」という文字が含まれる要素を選択します。
$("div[id][title$='text']") 属性 id を持ち、属性タイトルが "text" で終わる
5. 子要素フィルターセレクター
$("div.one:nth-child(2)") 属性クラス「one」を持つ
$("div.one:first-child(2)") 属性クラス「one」を持つ
$("div.one:last-child(2)") 属性クラス「one」を持つ
$("div.one:first-child(2)") 属性クラス「one」を持つ
6. フォーム オブジェクト属性フィルター セレクター
$("#form1 input:enabled") は、フォームで使用可能な 要素を選択します。
$("#form1 input:disabled") は、フォーム内で使用できない 要素を選択します。
$("input:checked") 選択したチェックボックスをオンにします。
$("select:selected") ドロップダウン ボックスで選択した項目を選択します。
(注: この要素を使用不可にするには、要素で無効な属性を「disabled」に設定します)
4. フォームセレクター
$(":input") は、すべての 、
$(":text") は、すべての単一行のテキスト ボックスを選択します。
$(":password") はすべてのパスワード ボックスを選択します。
$(":radio") はすべてのラジオ ボックスを選択します。
$(":checkbox") すべてのチェックボックスをオンにします。
$(":image") はすべての画像ボタンを選択します。
$(":reset") はすべてのリセット ボタンを選択します。
$(":button") はすべてのボタンを選択します。
$(":file") はすべてのアップロード コントロールを選択します。
$(":hidden") はすべての非表示の要素を選択します。
5. セレクターにおけるいくつかの注意事項
1. 一部の属性値には特殊文字が含まれています
例:
2. セレクターにスペースが含まれています
$('.class_1:hidden') と $('.class_1:hidden') の比較。
$('.class_1 :hidden') は、属性クラスが class_1 である要素に含まれる非表示要素を取得します。
$('.class_1:hidden') は、属性クラスが class_1 である要素を取得します。
Jquery: 強力なセレクターに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。