jqueryフィルターインスタンスの使用法の概要

Web アプリケーションでは、ほとんどのクライアント側の操作はオブジェクト操作に基づいています。オブジェクトを操作するには、まずオブジェクトを取得するための強力なセレクターが提供されます。 jQuery セレクターは、選択オブジェクトとフィルター条件の 2 つの部分に分かれています。オブジェクトを選択すると、どのオブジェクトを取得するかが示され、フィルタリング条件は、取得したオブジェクトをフィルタリングし、最終的に特定の特性を満たすオブジェクトを残すことです。

1. オブジェクトを選択します

1).Basic

·#id は、指定された ID に基づいて要素と一致します。例: $("#id")
·element は、指定された要素名に基づいてすべての要素と一致します。例: $("p")
·.class は、指定されたクラスに基づいて要素と一致します。例: $(".style1");
·* すべての要素に一致します。例: $("*")
·selector1,selector2,selectorN は、各セレクターに一致する要素を結合して一緒に返します。例: $("#id,p,.style1")

2).Form

·:button はすべてのボタンと一致します。例: $(":button")
·:checkbox はすべての チェックボックス と一致します。例: $(":checkbox")
·:file はすべてのファイル フィールドに一致します。例: $(":file")
·:hidden は、すべての非表示要素、またはタイプが hidden の要素に一致します。例: $("input:hidden")
·:image はすべての画像フィールドに一致します。例: $(":image")
·:input は、すべての input、textarea、select、button 要素に一致します。例: $(":input")
·:password はすべての パスワード ボックスと一致します。例: $(":password")
·:radio は、すべての ラジオ ボタンと一致します。例: $(":radio")
·:reset はすべてのリセット ボタンに一致します。例: $(":reset")
·:submit すべての送信ボタンと一致します。例: $(":submit")
·:text はすべての単一行テキスト ボックスに一致します。例: $(":text")
·:header は、h1、h2、h3 などのヘッダー要素と一致します。例: $(":header").css("background", "#EEE");

2.フィルター条件

1).属性フィルター

·[属性*=値]が一致特定の属性とは、特定の値を含む要素です。例: $("input[name*='man'")
·[attribute!=value] は、指定された属性を含むすべての要素と一致しますが、その属性は特定の値と等しくありません。例: $(input[name!='man');
·[attribute$=value] は、指定された属性が何らかの値で終わる要素と一致します。例: $("input[name$='man']")
·[attribute=value] は、指定された属性が特定の値である要素と一致します。例: $("input[name='man']");
·[attribute] は、指定された属性を含む要素と一致します。例: $("p[id]")
·[attribute^=value] は、指定された属性が何らかの値で始まる要素と一致します。例: $("input[name^='man']")
·[selector1][selector2][selectorN] は同時に複数の条件を満たします。例: $("input[id][name$='man']")
·:hidden はすべての非表示要素に一致します。例: $("tr:hidden")
·:visible は、すべての表示要素に一致します。例: $("tr:visible")
·:checked は、選択されたすべての選択要素 (チェック ボックス、ラジオ ボタンなど、select のオプションを除く) に一致します。例: $("input:checked")
·:disabled は、無効になっているすべての要素に一致します。例: $("input:disabled")
·:enabled は、使用可能なすべての要素と一致します。例: $("input:enabled")
·:selected は、選択されたすべてのオプション要素と一致します。例: $("select option:selected")

2) コンテンツ フィルタリング

·:contains(text) は、指定されたテキストを含む要素と一致します。例: $("p:contains('John')")
·:empty は、子要素またはテキストを含まないすべての空の要素に一致します。例: $("td:empty")
·:has(selector) は、セレクターによって一致する要素を含む要素に一致します。例: $("p:has(p)");
·:parent は、子要素またはテキストを含む要素に一致します。例: $("td:parent")

3) 階層フィルタリング

·ancestor子孫は、指定された祖先要素の下にあるすべての子孫要素に一致します。例: $("form input")
·parent > child は、指定された親要素の下にあるすべての子要素と一致します。例: $("form > input")
·prev + next prev 要素の直後にあるすべての next 要素に一致します。例: $("label + input")
·prev ~兄弟は、prev 要素の後のすべての兄弟要素と一致します。例: $("form ~ input")
·:first-child は最初の子要素と一致します。例: $("ul li:first-child")
·:last-child は最後の子要素と一致します。例: $("ul li:last-child")
·:nth-child(index/even/odd/equation) は、親要素の下にある N 番目の子要素または奇数偶数要素と一致します。例: $("ul li:nth-child(2)")
·:only-child 要素が親要素の唯一の子要素である場合、その要素が一致します。例: $("ul li:only-child")

4) メソッド フィルター

·:animated は、アニメーション効果を実行しているすべての要素に一致します。例: $("p:animated");
·:eq(index) は、指定されたインデックス値を持つ要素と一致します。例: $("tr:eq(1)")
·:even は、0 から数えて偶数のインデックス値を持つすべての要素に一致します。例: $("tr:even")
·:first は、最初に見つかった要素と一致します。例: $("tr:first")
·:gt(index) は、0 から数えて、指定されたインデックス値より大きいすべての要素に一致します。例: $("tr:gt(0)")
·:last は最後に見つかった要素と一致します。例: $("tr:last")
·:lt(index) は、指定されたインデックス値よりも小さいすべての要素に一致します。例: $("tr:lt(2)")
·:not(selector) 指定されたセレクターに一致するすべての要素を削除します。例: $("input:not(:checked)")
·:odd は、0 から数えて奇数のインデックス値を持つすべての要素と一致します。例: $("tr:odd")

jQuery でフィルタリングするためのメソッドの概要

1.add()

は、2 つの式にそれぞれ一致する要素の結果セットをリンクするために使用されます。

[JavaScript] view plaincopy

1. $("p").add("div");

p と div を一致させます。つまり、すべての p と div を見つけて、一致する要素に入れます。

[javascript] view plaincopy

1. $("p div");

も同じ機能を実現します。

2.andself()

フィルターされた要素または検索された要素の場合は、以前に選択した要素を追加します。

[javascript] plaincopy

1.$("div").find("span").andself().addClass("test");

3.end()

最新のものに戻るone 「破壊的」操作の前に、一致した要素リストは前の一致状態に変更されます。

いわゆる「破壊的」操作とは、取得した jQuery 要素 (find、add、children、not、prev など) をさらに照合することを指します。

4.filter()

パラメータが 1 つ以上の式の場合、フィルタリングに使用されます。

パラメータが関数の場合、falseとして返された要素は削除され、それ以外の場合は保持されます。

[javascript] プレーンコピーを表示します

1. $("p").filter(function(){

2. return $("ol",this).length==0;

3. });

取得されるのは

にolを含まない要素です。

5.map()

一連の要素を他の配列に変換します。

1. $("p").append($("input").map(function(){

2. return $(this).value();

3. }).get() .join(","));

は、すべての input タグ の値を "," で接続された string に合成し、

要素に追加します。

6.children()

子要素の子要素に関係なく、一致する要素セット内の各要素のすべての子要素を含む要素セットを取得します。

7.closest（）およびparents（）

要素の一致の開始 現在の要素の一致が開始されますルート要素まで 結果を返す まず、一致する要素を含むコレクションを取得します。各要素の要素のセット兄弟要素の直後にあります。

2 番目に、現在一致する要素の背後にあるすべての兄弟要素を取得します。

3 番目の方法は、渡されたパラメーターが見つかるまで、現在の要素の後のすべての兄弟要素を検索することです。 9.parent() 一致するすべての要素の一意の親要素を含む要素のセットを取得します。 10.prev()、prevAll()、prevUntil()はnextと同じですが、前の要素のみを取得します。

11.siblings()

それ自体を除く、選択された要素のすべての兄弟要素のセットを取得します。 しかし、andself() メソッドを追加すると、自分自身と同僚を取得できます。

以上がjqueryフィルターインスタンスの使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。