jquery selector_jqueryの使い方を詳しく解説

jQuery のセレクターは非常に強力です。一般的に使用される要素の検索メソッドを簡単にまとめます。

$("#myELEment") id 値が myElement と等しい要素を選択します。id 値は重複できません。ドキュメント内では myElement という ID 値が 1 つだけあるため、取得するのは唯一の要素
$ ("div") ですべての DIV タグ要素を選択し、DIV 要素配列
$ (". MyClass") を返します。 MyClass クラスの使用を選択します CSS のすべての要素
$("*") ドキュメント内のすべての要素を選択するには、結合選択にさまざまな選択方法を使用できます。たとえば、$("#myELement, div,.myclass")

カスケードセレクター:
$("form input") フォーム要素内のすべての入力要素を選択します
$("#main > *") すべてのサブ要素を選択しますmain
$("label input") の id 値を使用して、すべてのラベル要素の次の入力要素ノードを選択します。テスト後、セレクターは、入力ラベル
$( の直後に続くすべての入力ラベル要素を返します。 "#prev ~ div" ) 兄弟セレクター。このセレクターは、ID が prev

であるタグ要素の同じ親要素に属するすべての div タグを返します。基本フィルター セレクター:
$("tr:first")すべての tr 要素の最初の
$("tr:last") を選択します。 すべての tr 要素の最後の
$("input:not(:checked) span") を選択します。
をフィルタリングします。
: チェックされたセレクターのすべての入力要素

$("tr:even")すべての tr 要素の 0 番目、2 番目、4 番目... 要素を選択できます (注: 選択されたとき複数の要素があり、アレイであるため、シーケンス番号は0）

$（ "TR：ODD"）から始まります(「td:eq(2)」) すべての td 要素のうち、通し番号 2 の td 要素を選択できます
$ ("td: gt (4)")より大きいシリアル番号を持つ td 要素を選択できます。 4すべてのTD要素のうち
$（ "td：gt（4）"）要素
$（ "td：ll（4）"） - ‐ ‐ out out out out out out out out out out header")
$("div:animated")
コンテンツ フィルター セレクター:

$("div:contains('John')") div $("td:empty") 空の要素をすべて選択します td 要素の配列 (テキスト ノードは含まれません)
$("div:has(p)") p タグを含むすべての div 要素を選択します ビジュアル フィルター親ノードの要素配列
のセレクター:

$("div:hidden") すべての非表示の div 要素を選択します
$("div:visible") すべての Visual div 要素を選択します
属性フィルターセレクター:

$("div[id]") id 属性を含むすべての div 要素を選択します
$("input[name='newsletter']" ) 名前が次のすべての入力要素を選択します属性は 'newsletter' と等しい

$("input[name!='newsletter']") name 属性が 'newsletter' と等しくないすべての入力要素を選択します

$(" input[name^='news']") name 属性が 'news' で始まるすべての入力要素を選択します
$("input[name$='news']") 属性が ' で終わる名前の入力要素をすべて選択します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") 入力、テキストエリア、選択、ボタンを含むすべてのフォーム入力要素を選択できます。すべてのパスワード入力要素を選択
$(":radio")使用する 使用する 使用する 一緒に使用する 使用する 使用する 使用する アウト アウト– out out すべての送信入力要素
$(":image") すべてのボタン入力要素を選択できます
$(":file") ファイル入力要素をすべて選択
$(":hidden") すべて選択フォームの非表示または非表示フィールドの入力要素

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

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



名前を選択 "S_03_22" の入力テキストボックスの直前の td のテキスト値
$("input[@ name =S_03_22]").parent().prev().text()

名前は
$("input[@ name ^='S_']").not("[@ name $='_R']")

で始まりますradio_01
$("input[@ name =radio_01][@checked]").val();


$("A B" ) すべての子ノードを検索しますA 要素の下 (間接的な子ノードを含む)
$("A>B") A 要素の下の直接の子ノードを検索
$("A B") A 要素の背後にある兄弟ノード (間接的な子ノードを含む) を検索ノード
$("A~B") 間接的な子ノードを除く、A 要素の背後にある兄弟ノードを検索します。

1. $("A B") A 要素の下にある兄弟ノードを検索します すべての子ノード間接子ノード

を含む 例:

HTML コード:

名前:< /label>

"ニュースレター" />

jQuery コード:

$( "form input")
結果:

[ gt;, ]

2. $ ("A>B") A 要素の下にある直接の子ノードを検索します
例: すべて一致フォーム内の子入力要素。

HTML コード:




コードをコピー


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

名前:

ニュースレター:< /label>

jQuery コード:




コードをコピー

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

$("フォーム > 入力") 結果:

コードをコピー

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

[ ]

3. $("A B") 間接的な子ノードを含む、A 要素の後の兄弟ノードを検索します
例: ラベル

HTML コードに続くすべての入力要素と一致します:

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

名前:

ニュースレター:
ニュースレター" />

jQuery コード:

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

$("ラベル入力" )

結果:

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

[ , ]

4. A の後の兄弟ノードを検索します。要素 (非直接の子ノード
を除く) 例:

形式の兄弟であるすべての入力要素を検索します。HTML コード:

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

Name:

< ;フィールドセット>



jQuery コード:

コードをコピー

コードは次のとおりです:$("フォーム ~ 入力 ")

結果:

コードをコピー

コードは次のとおりです:[ ]