jQuery selectors_jquery の包括的なまとめ

jQuery のセレクターは非常に強力です。一般的に使用される要素検索メソッドを簡単にまとめます。

jQuery セレクターを使用すると、ページ要素の取得がより簡単かつ柔軟になり、開発者のストレスが大幅に軽減されます。建物を建てるのと同じように、レンガやタイルがなければ建物を建てることはできません。要素を取得できない場合、どうやって他の操作について話すことができるでしょうか? jQueryセレクターの重要性が分かります。もちろん、すべてのセレクターを一度にマスターするのは非常に困難であり、練習と蓄積が必要です。

これで、正式に jQuery セレクターの研究に入ります。私たちは jQuery セレクターを分類して学習し、jQuery セレクターを次の種類に分けます:

1. 基本セレクター

◦id 要素 ID に基づいて
を選択します ◦要素名 要素名に基づいて
を選択します ◦classname 要素の CSS クラス名に基づいて

を選択します

例:

コードをコピーします コードは次のとおりです:

要素名に基づいて選択

コードをコピーします コードは次のとおりです:

jQuery("#ID").val();
jQuery("a").text();
jQuery(".classname").val();

それぞれの要素の値を取得できます。上記の 3 つは最も一般的なセレクターであり、その中で ID セレクターが最も効率的であるため、可能な限り使用する必要があります。

2. レベルセレクター

◦先祖子孫 先祖と子孫セレクター
◦親 > 子 親子ノードセレクター
◦前へ 次へ 同じレベルセレクター
◦prev ~ 兄弟フィルターセレクター

例:

コードをコピーします コードは次のとおりです:

1
2

コードをコピーします コードは次のとおりです:

// div 内の a タグの内容を取得します。結果は 12
です。 jQuery("#divTest a").text();
// div の直接の子ノードを出力し、その結果が投資になります
jQuery("#divTest>input").val();
//ID next を持つ同じレベルの次の要素を出力し、その結果が責任を負います
jQuery("#次の入力").val();
//上記と同様、タイトル付きの要素です。結果は学習です
。 jQuery("#next~[タイトル]").val();

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

◦:first 最初の要素を検索
◦:last 最後の要素を検索します
◦:not(selector) 指定されたセレクター
に一致する要素を削除します ◦:even 0 から数えて偶数のインデックス値を持つ要素と一致します
◦:odd 0 から数えて奇数のインデックス値を持つ要素と一致します
◦:eq(index) 0
から始まる指定されたインデックスを持つ要素と一致します。 ◦:gt(index) 指定されたインデックス値より大きい要素 に一致します ◦:lt(index) 指定されたインデックス値より小さい要素
と一致します。 ◦:header h1、h2、h3 などのタグを選択します (まだ使用されていません)
◦:animated アニメーション効果を実行している要素と一致します (まだ使用されていません)

例:

コードをコピーします コードは次のとおりです:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              

コードをコピーします

コードは次のとおりです: //最初の li コンテンツは投資につながります jQuery("li:first").text(); //最後の li の内容には責任が伴います

jQuery("li:last").text();

//選択されていない値を入力すると、結果は学習されません
jQuery("li input:not(:checked)").val();
//偶数の li の結果は投資成熟度です
jQuery("li:even").text();
//インデックスが奇数である li の結果は財務管理責任です
jQuery("li:odd").text();
//インデックスが 2 より大きい li の内容には責任が生じます
jQuery("li:gt(2)").text();
//インデックスが 1 未満の li の内容は投資になります
jQuery("li:lt(1)").text();




4. コンテンツフィルター

◦:contains(text) 指定されたテキストを含む要素と一致します

◦:empty 子要素またはテキスト を含まないすべての空の要素と一致します。 ◦:has(selector) セレクター によって一致する要素と一致します。

例:

コードをコピーします

コードは次のとおりです:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

コードをコピーします コードは次のとおりです:

// hyip を含む li の内容は hyip Investment hyip になります
jQuery("li:contains('hyip')").text();
//空のliの次のliの内容が財務管理となる
jQuery("li:empty li").text();
//aタグを含むliの内容が投資となる
jQuery("li:has(a)").text();

5. 可視性フィルター

◦:hidden 非表示の要素と一致します
◦:visible 可視要素と一致します

例:

コードをコピーします コードは次のとおりです:

• 表示


• 非表示

コードをコピーします コードは次のとおりです:

//目に見えない li の内容は、目に見えない
になります。 jQuery("li:hidden").text();
//可視 li の内容は可視です
jQuery("li:visible").text();

6. 属性フィルター

◦[attribute=value] 属性が指定された値である要素と一致します
◦[attribute^=value] 一致する属性は、指定された値
で始まる要素です。 ◦[attribute$=value] 一致する属性は、指定された値
で終わる要素です ◦[attribute*=value] 属性に指定された値

が含まれる要素と一致します。

例:

コードをコピーします コードは次のとおりです:

//name は hyipinvest の値で、結果は hyipinvest
です alert(jQuery("input[name='hyipinvest']").val());
//名前が hyip で始まる値は hyip 投資になります
alert(jQuery("input[name^='hyip']").val());
// 名前が hyip で終わる値は、investment hyip になります
alert(jQuery("input[name$='hyip']").val());
//name には oo の値が含まれており、結果は HYIP
になります。 alert(jQuery("input[name*='oo']").val());

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 要素の背後にある兄弟ノードを検索します。
例: ラベル
に続くすべての入力要素と一致します。

HTMLコード:

<フォーム>
<ラベル>名前: <フィールドセット>

ニュースレター:

jQuery コード:
$("ラベル入力")

結果:
[ , ]

4. $("A~B") は、間接的な子ノードを除く、A 要素の背後にある兄弟ノードを検索します

例:
という形式の兄弟であるすべての入力要素を検索します。
HTMLコード:
<フォーム>
<ラベル>名前: <フィールドセット>
ニュースレター:

jQuery コード:
$("フォーム ~ 入力")

結果:
[ ]