jQuery のセレクターは非常に強力です。一般的に使用される要素検索メソッドを簡単にまとめます。
jQuery セレクターを使用すると、ページ要素の取得がより簡単かつ柔軟になり、開発者のストレスが大幅に軽減されます。建物を建てるのと同じように、レンガやタイルがなければ建物を建てることはできません。要素を取得できない場合、どうやって他の操作について話すことができるでしょうか? jQueryセレクターの重要性が分かります。もちろん、すべてのセレクターを一度にマスターするのは非常に困難であり、練習と蓄積が必要です。
これで、正式に jQuery セレクターの研究に入ります。私たちは jQuery セレクターを分類して学習し、jQuery セレクターを次の種類に分けます:
1. 基本セレクター
◦id 要素 ID に基づいて
を選択します
◦要素名 要素名に基づいて
を選択します
◦classname 要素の CSS クラス名に基づいて
例:
それぞれの要素の値を取得できます。上記の 3 つは最も一般的なセレクターであり、その中で ID セレクターが最も効率的であるため、可能な限り使用する必要があります。
2. レベルセレクター
◦先祖子孫 先祖と子孫セレクター
◦親 > 子 親子ノードセレクター
◦前へ 次へ 同じレベルセレクター
◦prev ~ 兄弟フィルターセレクター
例:
3. 基本フィルターセレクター
◦:first 最初の要素を検索
◦:last 最後の要素を検索します
◦:not(selector) 指定されたセレクター
に一致する要素を削除します
◦:even 0 から数えて偶数のインデックス値を持つ要素と一致します
◦:odd 0 から数えて奇数のインデックス値を持つ要素と一致します
◦:eq(index) 0
から始まる指定されたインデックスを持つ要素と一致します。
◦:gt(index) 指定されたインデックス値より大きい要素 に一致します
◦:lt(index) 指定されたインデックス値より小さい要素
と一致します。
◦:header h1、h2、h3 などのタグを選択します (まだ使用されていません)
◦:animated アニメーション効果を実行している要素と一致します (まだ使用されていません)
◦:empty 子要素またはテキスト を含まないすべての空の要素と一致します。 ◦:has(selector) セレクター によって一致する要素と一致します。
例:
5. 可視性フィルター
◦:hidden 非表示の要素と一致します
◦:visible 可視要素と一致します
例:
6. 属性フィルター
◦[attribute=value] 属性が指定された値である要素と一致します
◦[attribute^=value] 一致する属性は、指定された値
で始まる要素です。
◦[attribute$=value] 一致する属性は、指定された値
で終わる要素です
◦[attribute*=value] 属性に指定された値
例:
JQuery セレクターはここにまとめられています。これらは基本的に学習プロセスで遭遇するものであり、まだまとめられていない部分がいくつかあります。しばらく練習すれば、誰もが jQuery セレクターを上手に使いこなせるようになると思います。
$("#myELement") ID 値が myElement と等しい要素を選択します。ID 値は繰り返すことができません。そのため、取得されるのは要素
だけです。
$("div") すべての div タグ要素を選択し、div 要素の配列を返します
$(".myClass") myClass クラスの CSS を使用してすべての要素を選択
$("*") ドキュメント内のすべての要素を選択します。 結合選択にはさまざまな選択方法を使用できます。たとえば、$("#myELEment,div,.myclass")
です。
カスケードセレクター:
$("form input") フォーム要素内のすべての入力要素を選択します
$("#main > *") ID 値が main
であるすべてのサブ要素を選択します
$("label input") すべてのラベル要素の次の入力要素ノードを選択します。テスト後、セレクターはすべての入力ラベル要素の直後に入力ラベル
を返します。
$("#prev ~ div") 兄弟セレクター。このセレクターは、ID prev
を持つタグ要素の同じ親要素に属するすべての div タグを返します。
基本的なフィルターセレクター:
$("tr:first") すべての tr 要素の最初のものを選択します
$("tr:last") すべての tr 要素の最後を選択します
$("input:not(:checked) スパン")
フィルターアウト: チェックされたセレクターのすべての入力要素
$ ("TR: EVEN") すべての TR 要素のうち、0、2、4 ... ... 個人要素を選択します (注: 選択された複数の要素は選択時の配列であるため、シリアル番号は 0 から始まります)
$("tr:odd") すべてのtr要素の1番目、3番目、5番目…の要素を選択します
$("td:eq(2)") すべての td 要素のうち、シリアル番号 2 の td 要素を選択します
$("td:gt(4)") td 要素内のシーケンス番号が 4 より大きいすべての td 要素を選択します
$("td:ll(4)") td 要素内のシーケンス番号が 4 未満のすべての td 要素を選択します
$(":header")
$("div:animated")
$("div:contains('John')") は、div
内の John テキストを含むすべての要素を選択します
$("td:empty") 空のすべての td 要素の配列を選択します (テキスト ノードは含まれません)
$("div:has(p)") p タグを含むすべての div 要素を選択します
$("td:parent") td を親ノードとするすべての要素配列を選択します
$("div:hidden") 非表示の div 要素をすべて選択します
$("div:visible") 表示されているすべての div 要素を選択します
属性フィルターセレクター:
$("div[id]") id 属性を含むすべての div 要素を選択します
$("input[name='newsletter']") name 属性が 'newsletter' と等しいすべての入力要素を選択します
$("input[name!='newsletter']") は、name 属性が 'newsletter' と等しくないすべての入力要素を選択します
$("input[name^='news']") name 属性が 'news' で始まるすべての入力要素を選択します
$("input[name$='news']") name 属性が 'news' で終わるすべての入力要素を選択します
$("input[name*='man']") name 属性に 'news' が含まれる入力要素をすべて選択します
$("input[id][name$='man']") このセレクターは、id 属性を含み、属性が man
で終わるすべての要素を取得します。
子要素フィルターセレクター:
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n 1)")
$("div span:first-child") すべての div 要素の最初の子ノードの配列を返します
$("div span:last-child") すべての div 要素の最後のノードの配列を返します
$("div button:only-child") すべての div に子ノードが 1 つだけあるすべての子ノードの配列を返します
フォーム要素セレクター:
$(":input") input、textarea、select、ボタン
を含むすべてのフォーム入力要素を選択します
$(":text") すべてのテキスト入力要素を選択します
$(":password") パスワード入力要素をすべて選択
$(":radio") すべてのラジオ入力要素を選択します
$(":checkbox") チェックボックスの入力要素をすべて選択します
$(":submit") すべての送信入力要素を選択します
$(":image") すべての画像入力要素を選択します
$(":reset") すべてのリセット入力要素を選択します
$(":button") すべてのボタン入力要素を選択します
$(":file") すべてのファイル入力要素を選択します
$(":hidden") 非表示
タイプのフォームの入力要素または非表示フィールドをすべて選択します
フォーム要素フィルターセレクター:
$(":enabled") 操作可能なフォーム要素をすべて選択します
$(":disabled") 操作できないフォーム要素をすべて選択します
$(":checked") チェックされたすべてのフォーム要素を選択します
$("select option:selected") は、select
の子要素の中から選択されたすべての要素を選択します。
「S_03_22」という名前の入力テキストボックスの前の td のテキスト値を選択します
$("input[@ name =S_03_22]").parent().prev().text()
名前は「S_」で始まり「_R」で終わりません
$("input[@ name ^='S_']").not("[@ name $='_R']")
radio_01
という名前のラジオによって選択された値
$("input[@ name =radio_01][@checked]").val();
$("A B") は、間接的な子ノード
を含む、A 要素の下のすべての子ノードを検索します。
$("A>B") は、A 要素
の下にある直接の子ノードを検索します。
$("A B") は、間接的な子ノードを含む、A 要素の背後にある兄弟ノードを検索します
$("A~B") は、間接的な子ノードを除く、A 要素の背後にある兄弟ノードを検索します
1. $("A B") は、間接的な子ノード
を含む、A 要素の下のすべての子ノードを検索します。
例:
形式のすべての入力要素を検索します。
HTMLコード:
<フォーム>
<ラベル>名前:
<フィールドセット>
jQuery コード:
$("フォーム入力")
結果:
2. $("A>B") は、A 要素
例: フォーム内のすべての子入力要素と一致します。
HTMLコード:
<フォーム>
jQuery コード:
$("フォーム > 入力")
結果:
[
3. $("A B") は、間接的な子ノード
を含む、A 要素の背後にある兄弟ノードを検索します。
例: ラベル
に続くすべての入力要素と一致します。
<フォーム>
<ラベル>名前:
<フィールドセット>
jQuery コード:
$("ラベル入力")
結果:
[ , ]
4. $("A~B") は、間接的な子ノードを除く、A 要素の背後にある兄弟ノードを検索します
例:
という形式の兄弟であるすべての入力要素を検索します。
HTMLコード:
<フォーム>
<ラベル>名前:
<フィールドセット>
jQuery コード:
$("フォーム ~ 入力")
結果:
[ ]