一晩かけて検索と並べ替えを行った後、私はついに、最も包括的な JQuery フィルター選択メソッドのセットと考えるべきものを思いつきました。すべてのコードがテストされます。

最初の HTML コード

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

HTML コード

<頭>

<フォーム名="フォーム1" id="フォーム1" クラス="フォーム1" アクション="" メソッド="投稿">

<テーブル名="テーブル1" id="テーブル1" クラス="テーブル1">

こんにちは、世界!

JS コード

1.DOM オブジェクトと JQuery パッケージングセット

1. document.getElementById()、document.getElementsByName() などを通じて取得するものは、DOM オブジェクトまたは DOM オブジェクトセットを取得し、後者は DOM オブジェクトセットを取得します。

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

var text11_dom=document.getElementById("text11");

var text11_dom=document.getElementsByName("text11")[0];

var text11_dom=document.all.text11;//ここで、text11 は名前値または ID 値のいずれかになります

var text11_dom=document.all[10];

2. JQuery が提供する関数を使用する場合は、まず JQuery パッケージセットを構築する必要があります。$() を通じて返されるのは、JQuery パッケージセットです。

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

var text11_jquery=$("#text11");

2. JQuery パッケージングセットと DOM オブジェクトを相互に変換します

1. DOM オブジェクトは JQuery 属性メソッドを使用できませんが、$() を通じて DOM オブジェクトを JQuery ラッパーセットに変換できます。

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

var text11_dom=document.getElementById("text11");

var text11_jquery=$(text11_dom);

2. JQuery ラッパーセットでは、.length など一部の DOM オブジェクトの属性メソッドを使用できますが、.value など使用できない属性メソッドもあります。角括弧とインデックスを追加することで、対応する DOM オブジェクトを取得できます。 JQuery ラッパーセット後の値

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

var text11_dom=$("#text11")[0];

3. これは、各ループ中、またはイベントがトリガーされたときの DOM オブジェクトでもあります

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

$("#text11").click(function(){

var text11_dom_value=this.value;

アラート(text11_dom_value);

});

3. $ 記号は、JQuery の JQuery オブジェクトへの参照を表します。JQuery には 4 つのコアメソッドがあります。

1.jQuery(html[,ownerDocument]): HTML 元の文字列に基づいて Dom 要素を動的に作成します

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

$("

こんにちは!

").appendTo("body");

2.jQuery ( elements ): 1 つ以上の Dom オブジェクトを jQuery パッケージセットにカプセル化します。これは、上記の DOM オブジェクトと JQuery パッケージセット間の変換です
3.jQuery( callback ): $(document).ready() の短縮形

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

$(関数(){

alert("こんにちは!");

});

4.JQuery(selector[,context]): 指定された範囲内で条件を満たす JQuery パッケージセットを検索します。 Context は、DOM オブジェクトセットまたは JQuery パッケージセット
です。すべての tr タグで ID text11 の要素の JQuery ラッパーセット
を検索します

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

var text11_query=$("#text11","tr");

===================jQuery セレクター===================

1. 基本セレクター基本

1. タグ名に基づいて選択します

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

var input_query=$("input");

2. ID 値に基づいて
を選択します

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

var text11_query=$("#text11");

3. クラス値に基づいて選択します

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

var text11_query=$(".text11");

4. 条件を同時に満たす複数の JQuery パッケージングセットを選択します。条件を区切るには、
を使用します。

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

var text_query=$("#text11,.text12");

5. すべての DOM 要素を選択します

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

var all_query=$("*");

2. 階層

1. すべての tr タグからその下にある id 値が text11 であるすべての要素を取得します

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

var text11_query=$("tr #text11");

2. すべての td タグの下にあるすべての直接入力サブ要素
を取得します

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

var input_query=$("td>input");

3. ID text11 の要素の後ろにあるクラス button11 要素を取得し、条件を満たす要素を 1 つだけ取得します。 text11 と button11 は同じレベルです

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

var button11_query=$("#text11 .button11");

4. ID が text11 の要素の後ろにあるクラス button11 を持つすべての要素を取得します

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

var button11_query=$("#text11~.button11");

3. 基本フィルター

1. 最初の入力要素を取得します

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

var input_query=$("input:first");

2. 最後の入力要素
を取得します

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

var input_query=$("input:last");

3. すべての未選択の入力要素を取得します

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

var input_query=$("input:not(:checked)");

4. 最初の入力要素を 1 としてカウントし、奇数番号の入力要素をすべて検索します

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

var input_query=$("input:even");

5. 2 番目の入力から始めて、偶数番号の入力要素をすべて検索します

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

var input_query=$("input:odd");

6. インデックス 1 の入力要素を見つけます。インデックス値は 0 から始まります

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

var input_query=$("input:eq(1)");

7. インデックスが 0
より大きいすべての入力要素を検索します

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

var input_query=$("input:gt(0)");

8. インデックスが 2
未満の入力要素をすべて検索します。

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

var input_query=$("input:lt(2)");

9. ページ上のすべてのtitle要素
を取得します

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

var h_query=$(":header");

10. アニメーション効果を実行しているすべての要素を取得します

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

var anime_query=$(":animated");

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

1. すべての HTML コンテンツで「Hello World!」を含むすべての h1 要素を検索します。

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

var h1_query=$("h1:contains('Hello world!')");

2. サブタグを含まない、または空の HTML コンテンツを持つすべての td 要素
を取得します

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

var td_query=$("td:empty");

3. 入力サブ要素
を含むすべての td 要素を検索します。

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

var td_query=$("td:has(input)");

4. サブタグを含む、または HTML コンテンツを持つすべての td 要素を検索します

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

var td_query=$("td:parent");

5. 可視性フィルター可視性フィルター

1. すべての非表示の入力要素を検索します

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

var input_query=$("input:hidden");

2. 表示されているすべての入力要素を検索します

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

var input_query=$("input:visible");

6. 属性フィルター 1. id 属性
を含むすべての入力要素を検索します。

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

var input_query=$("input[id]");

2. 名前の値が text11
である入力要素を見つけます。

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

var input_query=$("input[name='text11']");

3. 名前の値が text11
と等しくないすべての入力要素を検索します。

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

var input_query=$("input[name!='text11']");

4. 名前の値がテキスト
で始まる入力要素を見つけます。

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

var input_query=$("input[name^='text']");

5. 名前の値が 11
で終わるすべての入力要素を検索します。

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

var input_query=$("input[name$='11']");

6. 名前の値に ext
が含まれるすべての入力要素を検索します。

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

var input_query=$("input[name*='ext']");

7. id 属性を含み、name 値に ext
が含まれるすべての入力要素を検索します。

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

var input_query=$("input[id][name*='ext']");

7. 子フィルター

1. 親要素
内のすべての子要素の中で 2 番目にランクされているすべての入力要素を検索します。 nth-child() のパラメータはオプションであり、ここでは偶数は偶数としてカウントされ、奇数はここで奇数としてカウントされます。これは、親要素を持つすべての入力要素が選択されることを意味します。入力要素は 1 つとしてカウントされます

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

var input_query=$("input:nth-child(2)");

2. 親要素
内のすべての子要素の中で最初にランク付けされるすべての入力要素を検索します。

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

var input_query=$("input:first-child");

3. 親要素
内のすべての子要素の中で最後にある入力要素をすべて検索します。

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

var input_query=$("input:last-child");

4. 親要素
内の唯一の子要素である入力要素をすべて検索します。

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

var input_query=$("input:only-child");

8. フォームセレクターフォーム