ホームページ > 記事 > ウェブフロントエンド > JQuery filters_jquery の全シリーズの紹介
1. オブジェクトを選択します
1).基本
・#id 指定された ID に基づいて要素を照合します。例: $("#id")
·element は、指定された要素名に基づいてすべての要素と一致します。例: $("div")
·.class 指定されたクラスに基づいて要素を照合します。例: $(".style1");
·* はすべての要素に一致します。例: $("*")
·selector1,selector2,selectorN は、各セレクターに一致する要素を結合して一緒に返します。例: $("#id,div,.style1")
2).フォーム
・:button はすべてのボタンと一致します。例: $(":button")
·:checkbox はすべてのチェックボックスと一致します。例: $(":checkbox")
·:file はすべてのファイル フィールドに一致します。例: $(":File")
・: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).属性フィルタリング
·[attribute*=value] 指定された属性を、特定の値を含む要素と照合します。例: $("input[name*='man'")
·[attribute!=value] は、指定された属性を含むすべての要素と一致しますが、その属性は特定の値と等しくありません。例: $(input[name!='man');
·[attribute$=value] は、指定された属性が何らかの値で終わる要素と一致します。例: $("input[name$='man']")
·[attribute=value] は、指定された属性が特定の値である要素と一致します。例: $("input[name='man']");
·[attribute] は、指定された属性を含む要素と一致します。例: $("div[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) 指定されたテキストを含む要素と一致します。例: $("div:contains('John')")
·:empty は、子要素またはテキストを含まないすべての空の要素に一致します。例: $("td:empty")
·:has(selector) は、セレクターによって一致する要素を含む要素に一致します。例: $("div:has(p)");
·:parent は、子要素またはテキストを含む要素に一致します。例: $("td:parent")
3) レベルフィルタリング
・ancestor子孫は、指定された祖先要素の下にあるすべての子孫要素と一致します。例: $("form input")
·parent > child は、指定された親要素の下にあるすべての子要素と一致します。例: $("form > input")
·prev next は、prev 要素の直後にあるすべての next 要素と一致します。例: $("label input")
·prev ~ neighbors は、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 は、アニメーション効果を実行するすべての要素と一致します。例: $("div: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")