1.基本セレクター
基本セレクターは、JQuery で最も一般的に使用されるセレクターであり、要素 ID、クラス、タグ名によって DOM 要素を検索します。これは非常に重要であり、以下の内容はこれをベースに段階的に改良したものです。
1). "$("#id")、id で指定された要素を取得します。id はグローバルに一意であるため、メンバーは 1 つだけです。
2). "$(".class")、クラスで指定された要素を取得します。異なる要素は同じクラス属性を持つことができるため、複数のメンバーを持つことができます。
3). "$("element")、要素 (div、table などの要素名) で指定された要素を取得します。要素には複数のメンバーが含まれる場合があります。
4) 「$("*")」、ドキュメントに相当するすべての要素を取得します。
5). "$("selector1,selector2,...,selectorN")"、各セレクターに一致する要素をマージして一緒に返します。 selector1 に一致するセット + selector2 に一致するセット +... + selectorN に一致するセットを返します。次 层2. レイヤー選択とは何ですか?レベルは父子関係と兄弟関係のノードです。したがって、階層セレクターは、指定された要素の親ノード、子ノード、兄弟ノードを取得するために使用されます。
1). "$("ancestor子孫")"、祖先要素以下のすべての要素を取得します。
2). "$("parent > child")"、親要素の下にあるすべての子要素を取得します (第 1 レベルの子要素のみが含まれます)。
3). "$("pre + next")"、pre 要素の直後にある次の兄弟要素を取得します。
4). "$("pre ~兄弟")"、pre要素の後のすべての兄弟要素を取得します。
3. フィルターセレクター
フィルター?必ずフィルター条件を追加する必要があります。 「$("div:first")」など、「:」を介してフィルター条件を追加すると、div 要素コレクション内の最初の div 要素が返されます。first はフィルター条件です。
さまざまなフィルタリング ルールに従って、フィルタ セレクタは、基本フィルタリング、コンテンツ フィルタリング、可視性フィルタリング、属性フィルタリング、サブ要素フィルタリング、およびフォーム オブジェクト属性フィルタリング セレクタに分類できます。
1). 基本的なフィルター セレクター
a) 「:first」、最初の要素を選択します。これもコレクションに配置されることを忘れないでください。 JQuery は
DOM オブジェクトのコレクションであるためです。たとえば、「$("tr:first")」は、すべての tr 要素の最初の tr 要素を返しますが、これはコレクションに保存されています。
b) 「:last」、最後の要素を選択します。たとえば、「$("tr:last")」は、すべての tr 要素の最後の tr 要素を返しますが、これはまだコレクションに保存されています。
c) “:not(selector)”、指定されたセレクターに一致するすべての要素を削除します。たとえば、「$("input:not(:checked)")」はすべての入力要素を返しますが、選択された要素 (ラジオ ボタン、複数選択ボックス) は削除されます。 d) “:even”、すべての要素のうち偶数番号の要素を選択します。 JQuery オブジェクトはコレクションであるため、ここでの偶数はコレクションのインデックスを指し、インデックスは 0 から始まります。
e) ":odd"、すべての要素の中から奇数の要素を選択し、インデックスは 0 から始まります。
f) “:eq(index)”、指定されたインデックスの要素を選択します。インデックスは 0 から始まります。
g) ":gt(index)"、インデックスが指定されたインデックスより大きく、インデックスが 0 から始まる要素を選択します。
h) ":lt(index)"、インデックスが指定されたインデックスより小さい要素を選択し、インデックスは 0 から始まります。
i) 「:header」、hq、h2 などのすべてのタイトル要素を選択します。
j) “:animated”、現在実行されているすべてのアニメーション要素を選択します。
2) コンテンツ フィルター セレクター
要素とテキスト コンテンツに対する操作です。
a) 「:contains(text)」、テキスト テキスト コンテンツを含む要素を選択します。
b) 「:empty」は、子要素やテキスト ノードを含まない空の要素を選択します。
c) 「:has(selector)」は、セレクターに一致する要素を含む要素を選択します。
d) “:parent”、子要素またはテキストノードを含む要素を選択します。 (親ノードです)
3) 可視性フィルター セレクター
表示または非表示のステータスに基づいて要素を選択します。
「:hidden」は、すべての非表示の要素を選択します。
「:visible」は、すべての表示要素を選択します。
Visible selector: hidden には、style 属性の表示が none である要素だけでなく、テキスト非表示フィールド () やvisible:hidden などの要素も含まれます。
4)。
a) 「[属性]」、この属性を持つ要素を選択します。
b) "[attribute=value]"、指定された属性値を値として持つすべての要素を選択します。
c) "[attribute !=value]"、属性値が value ではないすべての要素を選択します。
d) "[attribute ^= value]"、属性値が value で始まるすべての要素を選択します。
e) "[attribute $= value]"、属性値が value で終わるすべての要素を選択します。
f) "[attribute *= value]"、属性値に value が含まれるすべての要素を選択します。
g) 複合セレクターである「[selector1] [selector2]...[selectorN]」は、まず [selector1] で選択してセット A に戻り、次にセット A で [selector2] で選択してセット B に戻ります。 set B は、[selectorN ] を介して選択し、結果セットを返します。
5). 子要素フィルターセレクター
名前からわかるように、特定の要素の子要素を選択します。
a) ":nth-child(index/even/odd)"、インデックスを持つ要素、偶数のインデックスを持つ要素、奇数のインデックスを持つ要素を選択します。
l nth-child(even/odd): 各親要素の下のインデックス値が偶数(奇数)である要素を選択できます。
l nth-child(2): 各親要素の下にあるインデックス値 2 の要素を選択できます。
l nth-child(3n): 各親要素の下のインデックス値が 3 の倍数である要素を選択できます。
l nth-child(3n + 1): 各親要素配下のインデックス値が 3n + 1 の要素を選択できます。
b) 「
:first-child」、最初の子要素を選択します。
c) 「:last-child」、最後の子要素を選択します。 d) ":only-child"、親要素がこの子要素のみを持つ唯一の子要素を選択します。单 表6). フォームフィルター選択
フォーム要素のフィルター選択を選択します。
a) ":input"、すべての 、
b) 「:text」、すべてのテキスト ボックス要素を選択します。
c) 「:password」、すべてのパスワード ボックス要素を選択します。
d) 「:radio」、すべてのラジオボタン要素を選択します。
e) 「:checkbox」ですべてのチェックボックス要素を選択します。
f) 「:submit」、すべての送信ボタン要素を選択します。
g) 「:image」、すべての画像ボタン要素を選択します。
h) “:reset”、すべてのリセットボタン要素を選択します。
i) 「:button」、すべてのボタン要素を選択します。
j) “:file”、すべての file Uploadfield 要素を選択します。
k) 「:hidden」、すべての非表示の要素を選択します。单 表7). フォームオブジェクト属性フィルタリングセレクター
テーブル要素属性のフィルタ選択を選択します。
「:enabled」は、使用可能なすべての要素を選択します。
「:disabled」はすべての無効化要素を選択します。
「:checked」は、ラジオボタンやチェックボックスなど、選択されたすべての要素を選択します。
「:selected」は、
ドロップダウン リスト ボックスやリスト ボックスなど、選択されているすべての要素を選択します。
以上がJQuery セレクターの基本チュートリアル: 基本セレクター、階層セレクター、フィルター セレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。