jQuery セレクターの完全なコレクションの詳細な説明

平たく言えば、セレクターは「特別なセマンティクスを表す文字列」です。セレクター文字列が上記のメソッドに渡される限り、さまざまな Dom オブジェクトを選択して、jQuery ラッパー セットの形式で返すことができます。 jQuery セレクターの分類に苦労しました。本での分類が jQuery の公式の分類と全く異なるため、とりあえず CSS3 セレクターの規格を理解せずに、実用性を重視して説明することにしました。 jQuery の公式分類に準拠しました。

jQuery のセレクターは CSS3 セレクター標準をサポートしています。以下は W3C の最新の CSS3 セレクター標準です:

http://www.w3.org/TR/css3-selectors/

セレクター標準ではjQueryで使用できます。

jQueryのセレクターは機能に応じて主に「select」と「filter」に分かれており、これらは同時に使用してセレクター文字列を形成することができます。主な違いは、「フィルター」のセレクターが、以前に一致したコンテンツからフィルターする条件を指定することです。「フィルター」セレクターは単独で使用することもできます。これは、すべての「*」からフィルターすることを意味します。 例:

$( ":[title]")

は次と同等です:

$ ("*:[title]")

"Select" 関数を持つセレクターには、関数が "select" であるため、デフォルトの範囲がありません。

以下のセレクターカテゴリでは、「フィルター」の分類は「フィルター」セレクターを意味し、それ以外の場合は「選択」関数のセレクターを意味します

jQueryセレクターは次のカテゴリに分類されます。 [説明]

1. [名前] をクリックして、このメソッドの jQuery 公式ドキュメントに移動します

2. 次のセクションの jQuery セレクター ラボでさまざまなセレクターをテストできます

1.

解説

例

#id

要素IDに基づいて選択

$("divId") ID divIdの要素を選択

element

要素の名前に基づいて選択

$(" a") 要素をすべて選択

.class

要素のCSSクラスに従って選択

$(".bgRed") CSSクラスがbgRedである要素を選択

*

すべての要素を選択

$("*") ページ上のすべての要素を選択します

selector1、

selector2、

selectorN

複数のセレクターを「,」で区切って、セレクター文字列に結合できます。

$("#divId, a, .bgRed ”)

[学習上の提案]: 当面は基本的なセレクターを覚えておいてください。次のセクション「jQuery セレクター ラボ」に直接ジャンプできます。 " 実践的な練習用です。後で戻ってきてすべてのセレクターをゆっくり学習するか、到着したら戻って確認してください。

2. 階層セレクター Hierarchy

名前

説明

例

ancestor子孫

使用"form input" は、フォーム内のすべての入力要素を選択します。つまり、ancestor (祖先) の場合、descendant (子孫) が入力になります。

$(".bgRed div") 内のすべての

要素を選択します。 CSS クラスが bgRed である要素。

parent > child

親の中に子が含まれている必要があり、親クラスが親要素である必要があります。

$(".myList>li") myList 要素の直接の子ノード

オブジェクトとして CSS クラスを選択します。

prev + next

prev と next は同じレベルの 2 つの要素です

$(" #hibiscus+img") は、その ID を持つハイビスカス要素の背後にある img オブジェクトを選択します。

prev ~兄弟

Select 兄弟に基づいてフィルタリングされる prev の背後にある要素

注: 兄弟はフィルタです

$("#someDiv ~[title]") は、someDiv

3 の ID を持つオブジェクトの背後にある title 属性を持つすべての要素を選択します。 基本フィルター 基本フィルター

名前

説明

例

:first

最初に見つかった要素と一致します

テーブルの最初の行を検索します:$("tr:first")

:last

最後に見つかった要素と一致します

テーブルの最後の行を検索します: $("tr:last")

: not(selector)

指定されたセレクターに一致するすべての要素を削除します

選択されていない入力要素をすべて検索します: $(" input:not(:checked)”)

:even

から数えて偶数のインデックス値を持つすべての要素と一致します0

テーブルの行 1、3、5…を検索します: $(“tr:even”)

:odd

0 から数えて奇数のインデックス値を持つすべての要素と一致します

行 2、4、および行を検索しますテーブルの 6: $("tr:odd")

:eq(index)

指定された 1 つの要素を特定のインデックス値と照合します

注: インデックスは 0 からカウントされます

2 行目を検索します: $("tr :eq(1)")

:gt(index)

指定されたインデックス値より大きいすべての要素と一致します

注: インデックスは 0 から数え始めます

2 行目と 3 行目、つまりインデックス値を探しますは 0 より大きい 1 と 2 です: $("tr:gt(0)")

:lt(index)

結果セット内のインデックスが N より小さい要素を選択します

注: インデックス0から数え始めます

最初と2行目を検索します。つまり、インデックス値が2より小さい0と1です: $("tr:lt(2)")

:header

Select h1、h2、h3 などのすべてのヘッダー タグ。

ページ内のすべてのタイトルに背景色を追加します: $(“:header”).css(“background”, “#EEE”) ;

:animated

一致アニメーション効果を実行しているすべての要素

アニメーション効果を実行していない要素に対してのみアニメーション効果を実行します: $(“#run”).click(function(){

$(“div: not(:animated)”) .animate({ left: “+=20″ }, 1000);

});

4. コンテンツ フィルターコンテンツ フィルター

名前

説明

例

:contains(text)

指定されたテキストを含む要素を照合します

「John」を含むすべての div 要素を検索します:$("div:contains('John')")

:empty

子要素またはテキストを含まないすべての空の要素と一致します。

子要素またはテキストを含まないすべての空の要素を検索します: $("td:empty")

:has(selector)

子要素またはテキストを含まないすべての空の要素と一致します。セレクター 要素の要素

p 要素を含むすべての div 要素にテキスト クラスを追加します: $("div:has(p)").addClass("test");

:parent

子要素と一致するか、テキスト要素

子要素またはテキストを含むすべての td 要素を検索します: $("td:parent")

5. 可視性フィルター非表示要素

注: バージョン 1.3.2 では、hidden はそれ自体またはその親クラスの要素と一致します。ドキュメント内のスペースを占有しないでください。CSS 可視性属性を使用して、表示されないようにスペースを占有する場合は、hidden を入力しないでください。

非表示の tr 要素をすべて検索します: $("tr:hidden")

:visible

表示されているすべての要素を照合します

表示されているすべての tr 要素を検索します: $("tr:visible")

6. 属性のフィルタリング 属性フィルター

名前

説明

例

[属性]

指定された要素を含む要素を照合します属性

id 属性を含むすべての div 要素を検索します:

$("div[id]")

[attribute=value]

指定された属性が特定の値である要素に一致します

name 属性を持つすべての入力要素を検索しますis Newsletter:

$("input[name='newsletter']").attr("checked" , true);

[attribute!=value]

指定された属性に特定の値が含まれていない要素と一致します

name 属性が Newsletter ではないすべての入力要素を検索します:

$("input[name!=' Newsletter']").attr("checked", true);

[attribute^=value]

次の要素に一致します指定された属性は何らかの値で始まります

$("input[name^='news ']")

[attribute$=value]

指定された属性が何らかの値で終わる要素と一致します

その値を持つすべての入力要素を検索します名前は 'letter' で終わります:

$("input[name$= 'letter']")

[attribute*=value]

特定の値を含む要素として指定された属性と一致します

その名前を持つすべての入力要素を検索しますcontains 'man':

$("input[name* ='man']")

[attributeFilter1][attributeFilter2][attributeFilterN]

複合属性セレクター。複数の条件を同時に満たす必要がある場合に使用されます。

id を含み、その name 属性が man:

$("input[id][name$='man']") で終わるすべての属性を検索します

7. 子フィルター

名前

説明

例

:nth-child(index/even/odd/equation)

は、親要素の下にある N 番目の子要素または奇数-偶数要素と一致します

':eq(index)' は 1 つの要素のみと一致しますが、これは子要素と一致しますすべての親要素。 :nth-child は 1 から始まり、:eq() は 0 から始まります。

以下を使用できます:

nth-child(even)

:nth-child(odd)

:nth-child(3n)

:nth-child(2)

:nth-child(3n+1)

:nth - child(3n+2)

各 ul:

$("ul li:nth-child(2)")

:first-child

最初の子要素と一致する 2 番目の li を検索します

' :first ' は 1 つの要素のみに一致しますが、このセレクターは各親要素に対して 1 つの子要素に一致します

各 ul:

$("ul li:first-child") の最初の li を見つけます

: last-child

は、最後の子要素

':last' は 1 つの要素のみに一致し、このセレクターは各親要素に対して 1 つの子要素に一致します

各 ul:

$( "ul li:last-child") の最後の li を検索します

:only-child

ある要素が親要素内で唯一の子要素である場合、その要素は照合されます

親要素に他の要素が含まれている場合、その要素は照合されません。

ul:

$("ul li:only-child")

8 の唯一の子要素である li を見つけます。 textarea、select、button 要素

すべての入力要素を検索:

$(":input")

:text

すべてのテキスト ボックスに一致

すべてのテキスト ボックスを検索:

$(":text")

:password

すべてのパスワード ボックスに一致

すべてのパスワード ボックスを検索:

$(":password")

:radio

すべてのラジオ ボタンに一致

すべてのラジオ ボタンを検索

:checkbox

すべてに一致 チェックボックス

すべて検索チェックボックス:

$(":checkbox")

:submit

すべての送信ボタンと一致します

すべての送信ボタンを検索します:

$(":submit")

:image

すべての画像フィールドと一致します

すべての画像と一致しますフィールド:

$(":image")

:reset

すべてのリセット ボタンに一致

すべてのリセット ボタンを検索:

$(":reset")

:button

すべてのボタンに一致

すべてのボタンを検索:

$(“:button”)

:file

すべてのファイルフィールドと一致する

すべてのファイルフィールドを検索する:

$(“:file”)

9. フォームフィルタリング Form Filters

Name

Description

説明

:enabled

使用可能なすべての要素と一致します

使用可能なすべての入力要素を検索します:

$("input:enabled")

:disabled

使用できない要素をすべて照合します

使用できない入力要素をすべて検索します:
$("input:disabled")

:checked

チェックされた選択されたすべての要素 (チェックボックス、ラジオ ボタンなど、select のオプションを除く) を照合します

検索選択されたすべてのチェックボックス要素:
$("input:checked")

:selected

選択されたすべてのオプション要素と一致する

選択されたすべてのオプション要素を検索する:
$(" select option:selected")

jQuery セレクター コレクションの詳細な説明と関連記事については、PHP 中国語 Web サイトに注目してください。