JQuery セレクターとフィルター Organized_jquery

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

最初の HTML コード

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

HTML コード

<頭>



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

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

<オプション値="select311">オプション1
option2
option3

こんにちは、世界!

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. フォームセレクター フォーム

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

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

var input_query=$(":input");

2. すべてのテキスト ボックス要素を検索

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

var text_query=$(":text");

3. すべてのパスワード ボックス要素を検索します

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

varpassword_query=$(":password");

4. すべてのチェックボックスを見つけます

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

var checkbox_query=$(":checkbox");

5. すべての送信ボタン要素を検索します

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

var submit_query=$(":submit");

6. すべての画像ドメイン要素を検索

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

var image_query=$(":image");

7. Find all reset button elements

Copy code The code is as follows:

var reset_query=$(":reset");

8. Find all button elements

Copy code The code is as follows:

var button_query=$(":button");

9. Find all file field elements

Copy code The code is as follows:

var file_query=$(":file");

9. Form Filters

1. Find all available input elements

Copy code The code is as follows:

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

2. Find all unavailable input elements

Copy code The code is as follows:

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

3. Find all selected radio checkboxes

Copy code The code is as follows:

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

4. Find all selected drop-down boxes

Copy code The code is as follows:

var option_query=$("option:selected");