jquery selector_jqueryの使い方を詳しく解説-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:52:59

オリジナル

912 人が閲覧しました

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 コード: