JQuery セレクターの基本チュートリアル: 基本セレクター、階層セレクター、フィルター セレクター

伊谢尔伦
リリース: 2017-06-17 15:45:09
オリジナル
1602 人が閲覧しました

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"、すべての