jQueryセレクターとは何ですか? jqueryの一般的なセレクターの紹介-jsチュートリアル-php.cn

jQuery セレクターは、要素ノードを見つけるために使用されます。jQuery の $() 関数の最も強力で一般的に使用される関数の 1 つは、セレクターを使用して DOM 要素を選択することです。そのため、次の記事では jquery について説明します。は、で一般的に使用されるセレクターです。困っている友達は見てみるといいでしょう。

早速本文に進みましょう~

jquery セレクターには、基本セレクター、階層セレクター、フィルターセレクター、フォームセレクターの 4 つのカテゴリがあります。これらの 4 つのカテゴリをそれぞれ見てみましょう。セレクタ。

1. jquery の基本セレクター

基本セレクターは、JQuery で最も一般的に使用されるセレクターであり、要素 ID、クラス、タグ名を通じて DOM 要素を検索します。

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

。

注: ID は Web ページ内で 1 回のみ使用できます。つまり、ID は一意ですが、クラスは再利用できます。

2. jquery 階層セレクター

階層セレクターは、DOM 要素間の階層関係を通じて要素を取得します。主な階層関係には、親子関係、子孫関係、隣接関係、兄弟関係が含まれます。

$("form input")	すべてのフォーム要素内の入力要素を選択します
$("#main > *")	main の ID 値を持つすべてのサブ要素を選択します
$("label + input")	すべてのラベル要素の次の入力要素ノードを選択します。テスト後、セレクターは、ラベル label の後に入力ラベルが直接続くすべての入力ラベル要素を返します
。 $("#prev ~ div")	兄弟セレクター。このセレクターは、ID prev を持つタグ要素の同じ親要素に属するすべての div タグを返します

注: チェーン操作は、このメソッドが JQuery オブジェクトを返す場合にのみ実行できます。

3. jquery フィルターセレクター

フィルターセレクターは、主に特定のフィルタールールを通じて必要な DOM 要素をフィルターします。フィルタールールは CSS の疑似クラスセレクターと同じ構文を持ちます。つまり、セレクターはすべてで始まります。 a コロン (:) で始まります (CSS 疑似クラスセレクターの詳細については、CSS 学習マニュアルを参照してください)。さまざまなフィルタリングルールに従って、フィルタセレクタは、基本フィルタリング、コンテンツフィルタリング、可視性フィルタリング、属性フィルタリング、サブ要素フィルタリング、およびフォームフィルタリングに分類できます。オブジェクト属性フィルタリングセレクターには 6 種類のセレクターがあります。 jquery の 6 つのフィルターセレクターを個別に簡単に見てみましょう

(1) jquery の基本的なフィルターセレクター

フィルターセレクターは、特定の種類のフィルタールールに従って要素と一致し、記述されるときはすべて (:) で始まります。シンプルフィルターセレクターは、最も広く使用されているタイプのフィルターセレクターです。

$("tr:first"): すべての tr 要素の最初のものを選択します

$("tr:last"): すべての tr 要素の最後のものを選択します

$("input:not(:チェック済み) + スパン"): フィルターアウト: チェック済みセレクターのすべての入力要素

$("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 要素を選択します

$(":header"): h1、h2、h3 などのヘッダー要素と一致します。これは特にタイトルを取得するために使用されますh1やh2などの要素

$("div:animated"):アニメーション効果を実行している全ての要素と一致

(2) jquery content filter selector

content filterの選択主にフィルタのフィルタリングルールが反映されますサブ要素とそれに含まれるテキストコンテンツ。

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

$("td:empty"): 空のすべての TDS を選択します (テキストノードは含まれません) 要素の配列

$("div:has(p)"): pタグを含むすべてのdiv要素を選択

$("td:parent"): tdを親ノードとする要素の配列をすべて選択

(3) jqueryの可視性フィルターセレクター

可視性フィルターセレクターは、要素の表示ステータスと非表示ステータスに基づいて、対応する要素を選択します。

$("div:hidden"): 非表示の div 要素をすべて選択します

$("div:visible"): 表示されている div 要素をすべて選択します

(4) jquery 属性フィルターセレクター

属性フィルターセレクターは、要素の属性を通じて対応する要素を取得します。

$("div[id]"): id 属性を持つすべての div 要素を選択します

$("input[name='newsletter']"): 'newsletter' に等しい name 属性を持つすべての input 要素を選択します

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

$("input[name^='news']"): すべての name 属性を選択します'news' で始まる要素

$("input[name$='news']"): name 属性が 'news' で終わるすべての入力要素を選択します

$("input[name*='man ']" ): name 属性に 'news' が含まれる入力要素をすべて選択します

(5) jquery 子要素フィルターセレクター

$("ul li:nth-child(2)"),$(" ul li:nth- child(odd)"),$("ul li:nth-child(3n + 1)"): 親要素の下にある N 番目の子要素または奇数偶数要素と一致します。このセレクターは、前の eq() に基づいています。 Basic Filters は似ていますが、前者は 0 から始まり、後者は 1 から始まる点が異なります。

$("div span:first-child"): すべての div 要素の最初の子ノードの配列を返します。

$("div span:last-child"): すべての div 要素の最後の子ノードを返します。ノードの数

$("div button:only-child"): すべての div に子ノードが 1 つだけあるすべての子ノードの配列を返します

(6) jquery フォームオブジェクト属性フィルターセレクター

this セレクター主に選択したフォーム要素をフィルタリングします。

$(":enabled"): 操作可能なすべてのフォーム要素を選択します

$(":disabled"): 操作できないすべてのフォーム要素を選択します

$(":checked"): チェックされたフォーム要素をすべて選択します

$("select option:selected"): select 子要素内の選択された要素をすべて選択します

$("input[@ name =S_03_22]").parent().prev() .text(): テキスト値を選択します"S_03_22" という名前の入力テキストボックスの前の TD の

$("input[@ name ^='S_']").not("[@ name $=' _R']"): 名前はで始まります「S_」で「_R」で終わらない

$("input[@ name =radio_01][@checked]").val();: radio_01 という名前のラジオの選択された値