よく使用される jQuery selectors_jquery のまとめ

Dom プログラミングでは、ID または TagName に基づいて Dom オブジェクトを取得するために使用できる関数は限られていますが、jQuery では、ページ上のオブジェクトを取得し、返されたオブジェクトを変換するのに役立つ非常に強力なセレクターが提供されます。 jQueryラッパーセットとして。この記事では主によく使われるjQueryセレクターを分類して紹介します。

jQuery セレクターは、基本セレクター、階層セレクター、フィルター セレクター、フォーム セレクターの 4 つのカテゴリに大別できます。
フィルター セレクターは、単純フィルター セレクター、コンテンツ フィルター セレクター、可視性フィルター セレクター、属性フィルター セレクター、子要素フィルター セレクター、およびフォーム オブジェクト属性フィルター セレクターに分類できます。

基本セレクター:

$("#myELement") ID 値が myElement と等しい要素を選択します。ID 値は繰り返すことができないため、要素
のみを取得します。 $("div") すべての div タグ要素を選択し、div 要素の配列を返します
$(".myClass") myClass クラスの CSS を使用してすべての要素を選択します
$("*") ドキュメント内のすべての要素を選択[/code]
ジョイントの選択にはさまざまな選択方法を使用できます。たとえば、$("#myELEment,div,.myclass")

などです。

カスケードセレクター:

$("form input") フォーム要素内のすべての入力要素を選択します
$("#main > *") ID 値が main
であるすべての子要素を選択します $("label input") すべてのラベル要素の次の入力要素ノードを選択します
テストされたセレクターは、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)") シーケンス番号が 4 より大きいすべての td 要素を選択します
$ ("TD: LL (4)") TD 要素内のシリアル番号が 4 未満のすべての TD 要素を選択します
$(":ヘッダー")
$("div:アニメーション")

コンテンツフィルターセレクター:

$("div:contains('John')") John テキストを含むすべての div 要素を選択します

$("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、button を含むすべてのフォーム入力要素を選択します
$(":text") すべてのテキスト入力要素を選択します
$(":password") パスワード入力要素をすべて選択
$(":radio") すべてのラジオ入力要素を選択します
$(":checkbox") チェックボックスの入力要素をすべて選択します
$(":submit") すべての送信入力要素を選択します
$(":image") すべての画像入力要素を選択します
$(":reset") すべてのリセット入力要素を選択します
$(":button") すべてのボタン入力要素を選択します
$(":file") すべてのファイル入力要素を選択します
$(":hidden") hidden

タイプのフォームの入力要素または非表示フィールドをすべて選択します

フォーム要素フィルターセレクター:

$(":enabled") 操作可能なフォーム要素をすべて選択します
$(":disabled") 操作できないフォーム要素をすべて選択します
$(":checked") チェックされたすべてのフォーム要素を選択します
$("select option:selected") すべての選択された子要素の中から選択された要素を選択します