jQueryセレクターとは何ですか? jqueryの一般的なセレクターの紹介

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 という名前のラジオの選択された値

$("A B"): 以下のすべての値を検索しますA 要素の子ノード (間接的な子ノードを含む)

$("A>B"): A 要素の下にある直接の子ノードを検索します

$("A+B"): A 要素の背後にある兄弟ノードを検索します。間接的な子ノード

$("A~B"): 間接的な子ノードを除く、A 要素の背後にある兄弟ノードを検索します

4. jquery フォーム セレクター

フォーム セレクターを使用すると、非常に便利にフォームを取得できます。要素または要素のタイプ。

注: 注: 入力で非表示の値を選択する方法は上記の例の使用法ですが、「:hidden」を直接使用すると、ページ内のすべての非表示要素 (幅または幅を持つ要素を含む) に一致します。高さは0。

$(":input") : input、textarea、select、ボタンを含むすべてのフォーム入力要素を選択します

$(":text") : すべてのテキスト入力要素を選択します

$(":password") : 選択すべてのパスワード入力要素

$(":radio") : すべてのラジオ入力要素を選択します

$(":checkbox") : すべてのチェックボックス入力要素を選択します

$(":submit") : すべての送信入力要素を選択します

$(":image") : 画像入力要素をすべて選択

$(":reset") : リセット入力要素をすべて選択

$(":button") : ボタン入力要素をすべて選択

$(": file"): すべてのファイル入力要素を選択します

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

以上がこの記事の概要です。 jquery セレクターの詳細については、PHP 中国語 Web サイトにある jquery オンライン マニュアル を参照してください。 ！ ！

以上がjQueryセレクターとは何ですか? jqueryの一般的なセレクターの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。