jqueryセレクター、css3セレクターと各種セレクター 非常に柔軟なjqueryセレクターとして、どのように使用しますか？

1. jQuery セレクターの基本的な使用法

CSS3 セレクター標準ドラフトによって定義されたセレクター構文では、jQuery はかなり完全なサブセットのセットをサポートし、いくつかの非標準の追加もサポートしていますが、非常に便利です疑似クラス。注: このセクションは jQuery セレクターについて説明します。これらのセレクターの多く (すべてではありません) は CSS スタイル シートで使用できます。セレクターの構文は 3 レベルの構造になっています。最も単純な形式のセレクターを見たことがあるでしょう。 「#te st」は、id 属性「test」を持つ要素を選択します。 「blockquote」はドキュメント内のすべての

要素を選択し、「p.note」はクラス属性「note」を持つすべての

要素を選択します。単純なセレクターは、結合文字が区切り文字として使用されている限り、「p.note>p」や「blockquote i」などの「結合セレクター」に結合できます。単純なセレクターと結合されたセレクターは、カンマ区切りのリストにグループ化することもできます。このタイプのセレクター グループは、$() 関数に渡される選択の最も一般的な形式です。組み合わせたセレクターとセレクター グループを説明する前に、まず単純なセレクターの構文を理解する必要があります。

1. 単純なセレクターの使用法

単純なセレクターの始まりは (明示的または暗黙的に) タグ型宣言です。たとえば、

要素のみに興味がある場合は、単純なセレクターを「P」で始めることができます。選択した要素がタグ名と関係がない場合は、代わりにワイルドカード「*」を使用できます。セレクターがタグ名またはワイルドカードで始まらない場合、ワイルドカードが暗黙的に含まれます。

タグ名またはワイルドカードは、代替文書要素の初期セットを指定します。単純なセレクターでは、タグ型宣言の後の部分は 0 個以上のフィルターで構成されます。フィルターは、記述された順序で左から右に適用され、それぞれのフィルターによって、選択された要素のセットが絞り込まれます。次の表に、jQuery でサポートされるフィルターを示します。

jQuery Selection Filter

Filter 意味

#id id属性がidである要素と一致します。有効な ITML ドキュメントでは、同じ ID を持つ複数の要素が存在することはありません。そのため、このフィルターは通常、スタンドアロンのセレクターとして使用されます

.class クラス属性 (スペースで区切られた A に解析された文字列) と一致します。クラス word のすべての要素を含む単語のリスト)

[attr] attr 属性を持つすべての要素と一致します (値に関係なく)

[attr=val] attr 属性を持つすべての要素と一致しますattr 属性と値 val

[attr!=val]であるすべての要素 attr 属性を持たないすべての要素と一致する、または attr 属性の値が val ではない ((jQuery 拡張機能)

[attr^=val] attr属性値がvalで始まる要素と一致する

[attr$=val] attr属性値がvalで終わる要素と一致する

[attr*=val] ] attr 属性値に val が含まれる要素と一致する 要素

[attr~=val] は、attr 属性がスペースで区切られた単語のリストとして解釈される場合、単語 val を含む要素と一致します。 selector "p.note" は "p[class~" と同じです。 =note]" と同じです

[attr|=val] attr 属性値が val で始まり、その後に他の文字が含まれない要素と一致します。それ、または他の文字はハイフンで始まる要素です

:animated matches アニメーション化される要素、アニメーションは jQuery によって生成されます

:button 要素と 要素に一致します (jQuery 拡張機能)

:checkbox 要素 (jQuery 拡張機能)、このフィルターは、入力タグ "input:checkbox" を明示的にプレフィックスとして付けるとより効率的です指定されたテキストを含む要素 (jQuery 拡張機能)。このフィルタの括弧はテキストの範囲を指定します。引用符は必要ありません。フィルターされた要素のテキストは、textContent または innerText 属性によって決まります。これは、タグやコメントのない、元のドキュメントのテキストです。

: 無効 無効な要素と一致します

: 空 子ノードに一致しません。テキストコンテンツのない要素

:enabled 無効になっていない要素と一致します

:eq(n) ドキュメントの順序に基づいて選択されたリストのn番目の要素と一致し、シリアル番号は0から始まります( jQuery拡張子)

:even はリスト内の偶数番号の要素と一致します。最初の要素のシーケンス番号は 0 なので、実際には 1 番目、3 番目、5 番目…の要素が選択されます (jQuery 拡張機能)

:file matches :first はリストの最初の要素と一致します。 ":eq(0)" (jQuery 拡張機能) と同じ

:first-child 一致した要素は、その親ノードの最初の子要素です。注: これは、「:first」とは異なります

:gt(n) ドキュメントの順序に基づいて 0 から始まる、選択されたリスト内の n より大きいシリアル番号を持つ要素と一致します (jQuery 拡張機能)

: has( sel) 一致した要素には、埋め込みセレクター sel

:header と一致する子孫要素があります すべてのヘッダー要素と一致します:

、

、

、

、

または

(jQuery 拡張機能)

画面上に表示されないすべての要素と一致します: 一般的に、これらの要素の offsetWidth と offsetHeight は 0 であると見なされます

要素と一致します。このフィルターは 要素 (jQuery 拡張機能) :input