ホームページ > 記事 > ウェブフロントエンド > jquery で一般的に使用されるセレクターの型とその使用原則の紹介

jquery で一般的に使用されるセレクターの型とその使用原則の紹介

伊谢尔伦オリジナル: 2017-06-16 10:23:311615ブラウズ

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

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

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

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

jquery で一般的に使用されるセレクターの型とその使用原則の紹介

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

: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 拡張機能)

:hidden

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

:image

要素と一致します。このフィルターは jquery で一般的に使用されるセレクターの型とその使用原則の紹介要素 (jQuery 拡張機能) :input

と一致しないことに注意してください: 、

、<select> ( jQuery 拡張機能):last は、選択されたリストの最後の要素と一致します ((jQuery 拡張機能):last-child 一致した要素は、その親ノードの最後の子要素です。 注:これは、「:last」とは異なります:lt(n) ドキュメントの順序に基づいて、0 から始まる選択されたリスト内のシーケンス番号が n より小さい要素と一致します (jQuery 拡張機能):not(sel) インラインセレクターselに一致しない要素と一致
:nth(n) 「:eq(n)」(jQueryの拡張)と同じ
: nth -child(n) 一致した要素は、親ノードの n 番目の子要素です。 。数値、偶数という単語、奇数という単語、または計算式を指定できます。 親ノードの子要素のうち2位または4位の要素を選択するには、「:nth-child(even)」を使用します。 「:nth-child(odd)」を使用して、親ノードの子要素の中で 1 位、3 位などにランク付けされた要素を選択します。 
より一般的な状況は、n が xn または x n+y などの計算式であり、x と y は整数、n はリテラル n です。したがって、nth-child(3n+1) を使用して、1 番目、4 番目、7 番目などの要素を選択できます。 
このフィルターのシーケンス番号は 1 から始まるので、要素が親ノードの最初の子要素である場合、それは奇数の要素とみなされ、3n ではなく 3n+1 に一致することに注意してください。 ":even" および ":odd" フィルターと区別するために、後者によって照合されるシーケンス番号は 0 から始まります。 
:odd は、リスト内の (0 から始まる) 奇数の要素と照合します。シーケンス番号に注意してください。要素 1 と 3 は、それぞれ 2 番目と 4 番目に一致する要素です (jQuery 拡張機能)
:only-child 親ノードの唯一の子ノードである要素と一致します
:parent ":empty" (jQuery の拡張機能) ではなく、親ノードの要素と一致します。 
:password <input type="password"> 要素と一致します (jQuery の拡張機能)。 
: radio は <input type="”radio”"> 要素に一致します (j Query の拡張) 
:reset は <input type="”reset”<button">
:selected 選択された <option> 要素と一致します (jQuery 拡張機能) </option>
: submit <input type="”submit”"> 要素と <button type="”submit”"> 要素に一致します</button>
:text <input type="”text”"> 要素に一致します(jQuery拡張子) :visible 現在表示されているすべての要素に一致: 一般的に、これらの要素のoffsetWidthとoffsetHeightの値は、「:hidden」の逆で0ではないと考えられます。 注: 表にリストされているセレクターの一部は、括弧内のパラメーターを受け入れます。たとえば、以下のセレクターは、単語「」が含まれている限り、親ノードの子要素の中で 1 位または 2 位にランクされている要素を選択します。 JavaScript".element.p:nth-child(3n+1): text (JavaScript):not(:has(a)) 一般に、タグタイプのプレフィックスを指定するとフィルターを実行できます。より効率的 効率的です。たとえば、ラジオ ボタンを選択するには、単に「:radio」を使用するよりも、ラベル プレフィックスを追加しない場合は、「input:radio」を使用する方が効率的です。通常、セレクター "#" address" は、より明示的な "form#address" よりも効率的です。 
 2. 組み合わせセレクターの使用法 単純なセレクターを組み合わせるには、特別な演算子または「コンビネーター」を使用します。ドキュメントツリー内の要素間の関係を表現します。次の表は、jQuery でサポートされる組み合わせセレクターの一覧です。これらの組み合わせセレクターは、CSS3 でサポートされているものと同じです。 セレクターを組み合わせた例をいくつか示します:「ブロック引用 i 」 // // <blockquote> の 要素 
</blockquote>
 "#OUTPUT+*" // ID = "Output" 要素 
 の背後にある兄弟要素& gt; h1+p" // & lt; p class="note"> 内で & lt; h1 & gt; 要素に続きます 
 セレクターの結合は 2 つのセレクターの結合に限定されないことに注意してください。 3 つ以上のセレクターも許可されます。組み合わせセレクターは左から右に処理されます。 
3. セレクターの組み合わせ $() 関数に渡される (またはスタイルシートで使用される) セレクター グループは、1 つまたは合成されたセレクターで構成されるカンマ区切りのリストです。複数の単純なセレクターまたは組み合わせたセレクター。セレクター グループに一致する要素は、セレクター グループ内の任意のセレクターに一致する必要があるだけです。私たちにとって、単純なセレクターもセレクター グループと考えることができます。セレクター グループの例をいくつか示します。 
"h1, h2,h3" // <h1>、<h2>、<h3> 要素に一致します。 </h3>
</h2>
</h1>
"#p1、#p2、#p3 " // ID p1、p2、または p3 の要素と一致します 
"p.note, p.note" // class="note" の 
 および 
 要素と一致します 
 "body> ;p,p.note>p" // および の子要素 

注: CSS および jQuery セレクター構文では、単純なセレクターでかっこを使用できます。一部のフィルターでは使用できますが、より一般的なグループ化では使用できません。たとえば、セレクター グループまたはセレクターの組み合わせをかっこで囲んで、単純なセレクターとして扱うことはできません:
(h1, h2, h3)+p //Illegal
h1+p, h2+p, h3 +p //正しい書き方

 2. 選択方法
 $() 関数でサポートされているセレクター構文に加えて、jQuery ではいくつかの選択メソッドも定義されています。この章で説明した jQuery メソッドのほとんどは、選択された要素に対して何らかの操作を実行します。選択方法は異なります。選択した要素のセットを変更したり、抽出、展開したり、単に新しい選択操作の開始点として機能したりします。 
このセクションでは、これらの選択方法について説明します。これらの選択メソッドのほとんどは、セレクター構文と同じ機能を提供していることがわかります。 
選択した要素を抽出する最も簡単な方法は、位置によって要素を抽出することです。 first() によって返される jQuery オブジェクトには最初に選択された要素のみが含まれ、last() によって返される jQuery オブジェクトには最後の要素のみが含まれます。より一般的には、 eq() メソッドによって返される Query オブジェクトには、指定されたシーケンス番号を持つ選択された要素が 1 つだけ含まれます。 (jQuery 1.4 では、選択範囲の最後から数えて、負の数も許可されます。) これらのメソッドによって返される jQuery オブジェクトには要素が 1 つだけ含まれていることに注意してください。これは、一般的な配列のシリアル番号とは異なります。配列のシリアル番号によって返される単一の要素は、jQuery によってパッケージ化されません:
var paras=$("p");
paras.first() //最初の A 要素のみを選択します 
paras.last()スルー Paras.eq (-2) // を選択します。最後から 2 番目 & lt; p & gt; 
paras [1] // 2 番目の要素自体 
位置によって選択範囲を抽出するより一般的な方法は、slice()oです。jQueryのslice()メソッドはArray.slice()メソッドに似ています。前者は開始と終了のシリアル番号を受け入れます(負のシリアル番号は次から計算されます)。返される jQuery オブジェクトには、開始番号から終了番号までの要素のセットが含まれます (ただし、終了番号は含まれません)。終了シーケンス番号を省略した場合、返されるオブジェクトには開始シーケンス番号からのすべての要素が含まれます。 Element
$("p").slice(-3) //最後の 3 要素を選択します
filter() は、3 つの呼び出しメソッドを持つ一般的な選択フィルタリング メソッドです:
セレクター文字列を filter() に渡すと、セレクターと一致する選択された要素のみを含む jQuery オブジェクトが返されます。 
 別の jQuery オブジェクトを filter() に渡すと、これら 2 つの Query オブジェクトの共通部分を含む新しい jQuery オブジェクトが返されます。要素の配列、または単一のドキュメント要素を filter() に渡すこともできます。 
 判定関数を filter() に渡すと、一致する要素ごとに関数が呼び出されます。 filter() は、判定関数が true (または任意の true 値) である要素のみを含む jQuery オブジェクトを返します。判定関数を呼び出す場合、thisの値は現在の要素、パラメータは要素番号です。 
$("p").filter(".note") //$("p.note")と同じ
$("p").filter($(".note") )) // $("p.note") と同じ 
$("p").filter(function(idx){return idx%2 == 0}) // $("p と同じ: ") も 
not() メソッドと同じです。filter() と意味が逆であることを除けば、filter() と同じです。セレクター文字列を not() に渡すと、セレクターに一致しない要素のみを含む新しい jQuery オブジェクトが返されます。 jQuery オブジェクト、要素の配列、または単一の要素を not() に渡すと、明示的に除外された要素を除く、選択されたすべての要素が返されます。判定関数を not() に渡す場合、判定関数は filter() と同様に呼び出されます。ただし、返される jQuery オブジェクトには、判定関数が false またはその他の false 値を返す原因となる要素のみが含まれる点が異なります。 $(" p").not("#header, #footer"); //2 つの特別な要素を除くすべての要素
 jQuery 1.4 では、選択範囲を抽出する別の方法は has() メソッドです。セレクターが渡された場合、 has() は、子孫がセレクターと一致する選択された要素のみを含む新しい jQuery オブジェクトを返します。ドキュメント要素が has() に渡される場合、選択された要素セットが、指定された要素の祖先ノードである選択された要素に調整されます:
$("p").has("a[href]" ) // リンクを含む段落 
 add() メソッドは、選択範囲をフィルタリングまたは抽出するのではなく、展開します。 $() 関数に渡されるパラメータ (関数を除く) は、add() メソッドにも渡すことができます。 add() メソッドは、元の選択された要素に加えて、$() 関数に渡されたパラメーターによって選択された (または作成された) 要素を返します。 add() は重複する要素を削除し、要素がドキュメント内の順序になるように結合された選択を並べ替えます。 $("p, p") //セレクターグループを使用 $("p").add(p) //セレクターをadd()に渡す
$ ("p").add( $("p")) //jQuery オブジェクトを add() に渡します
var paras = document.getElementsByTagName("p") //配列のようなオブジェクト 
 $("p") .add(paras); // add() に要素配列を渡します
 1. 前に選択した要素セットに復元します
 メソッドのチェーン呼び出しを実現するために、 jQuery オブジェクトのメソッドは最終的に呼び出し元のオブジェクトを返します。ただし、このセクションで説明するメソッドはすべて、新しい jQuery オブジェクトを返します。チェーン内で呼び出しを続けることはできますが、チェーン呼び出しの後に操作された要素セットは、チェーン呼び出しの開始時の要素セットではなくなる可能性があることを明確に認識する必要があります。 
実際の状況はさらに複雑です。ここで説明する選択メソッドは、新しい ejQuery オブジェクトを作成または返すときに、その派生元の古い jQuery オブジェクトに内部参照を追加します。これにより、jQuery オブジェクトのリンクされたリストまたはスタックが作成されます。 end() メソッドは、スタックをポップし、保存された jQuery オブジェクトを返すために使用されます。一連の呼び出しで end() を呼び出すと、一致する要素のセットが以前の状態に復元されます。次のコードを考えてみましょう: 
//すべての 要素を検索し、その中の 
 要素を探します 
// 要素を追加します。 ; 要素 A border
//まずは連鎖呼び出しを使わずに
var ps = $("p");
var paras = p.find("p");
 paras .addClass("highlight");
ps.css("border", "solid black 1px"); 
//以下は、チェーン呼び出しを使用して 
を実現する方法を示しています。 $( "p").find("p").addClass("highlight").end().css("border", "solid black 1px");
//順序を逆にすることもできます回避すべき操作の呼び出し end()
$("p").css("border", "solid block 1px").find("p").addClass("highlight");
手動で定義する場合 end() メソッドとの互換性を維持しながら要素のセットを選択するには、新しい要素のセットを配列または配列のようなオブジェクトとして Push5tack() メソッドに渡すことができます。指定した要素が新しく選択された要素になり、以前に選択した要素セットがスタックにプッシュされます。その後、end() メソッドを使用してそれらを復元できます。 //すべての Elements を選択します
sel.pushStack(document.getElementsByTagName("p")); //すべての 要素に変更します
sel.end(); 
 end() メソッドとそれが使用する選択スタックについて説明しましたが、最後に説明する必要があるメソッドが 1 つあります。 andSelf() は、現在選択されているすべての要素と、以前に選択されていたすべての要素を含む新しい jQuery オブジェクトを返します (重複は削除されます)。 andSelf() は add() メソッドと同じですが、おそらく「addPrev」の方がわかりやすい名前です。例として、上記のコードの次のバリエーションを考えてみましょう: 要素とその親ノードの 
 要素に境界線を追加します。 ("p ") .find (" p "). Andset (). // Find & lt; p" in & lt; p end (). end 2. 選択した要素をコンテキストとして使用します
 上記の filter()、add()、および not() メソッドは、選択されたそれぞれの要素セットに対して交差、結合、および差分の演算を実行します。 jQuery は、現在選択されている要素のセットをコンテキストとして使用できる他の選択メソッドも定義します。選択された要素ごとに、これらのメソッドは選択された要素をコンテキストまたは開始点として使用して、選択された要素の新しいセットを取得し、すべての新しい選択された要素の結合を含む新しい jQuery オブジェクトを返します。 add() メソッドと同様に、要素がドキュメント内に表示される順序で配置されるように、重複した要素が削除され、並べ替えられます。 このカテゴリを選択するための最も一般的な方法は find() です。現在選択されている各要素の子孫の中から、指定されたセレクター文字列に一致する要素を検索し、一致した子孫のセットを表す新しい jQuery オブジェクトを返します。これらの新しく選択された要素は、選択された要素の既存のセットにマージされないことに注意してください。また、find() は filter() とは異なります。filter() は新しい要素を選択するのではなく、現在選択されている要素セットを単に減らすだけであることに注意してください。$("p").find("p") //$("p p") と同じように要素を検索します
このカテゴリの他のメソッドは、現在選択されているオブジェクトを表す新しい jQuery オブジェクトを返しますelement 各要素の子要素、兄弟要素、または親要素にフォーカスします。ほとんどの場合、オプションのセレクター文字列を引数として受け入れます。セレクターが渡されない場合、すべての子要素、兄弟要素、または親要素が返されます。セレクターが渡されると、一連の要素がフィルター処理され、一致する要素のみが返されます。 
children() メソッドは、選択された各要素の直接の子要素を返します。これは、オプションのセレクター パラメーターでフィルター処理できます。 
//「header」と「footer」の ID を持つ子ノード要素を探します。要素 
// のすべての 要素は $("#header>span, #footer>span")
$("#header, #footer").children(" span" )
contents() メソッドは、テキスト ノードを含む各要素のすべての子ノードを返す点を除いて、children() メソッドに似ています。選択した要素セットに <iframe> 要素がある場合、contents() は <iframe> コンテンツのドキュメント オブジェクトも返します。 content() はオプションのセレクター文字列パラメーターを受け入れないことに注意してください。返されるドキュメント ノードは正確には要素ではなく、セレクター文字列は要素ノードを記述するためにのみ使用されるためです。 </iframe></iframe>
next() メソッドと prev() メソッドは、選択された各要素の次と前の兄弟要素 (存在する場合) を返します。セレクターが渡された場合、セレクターに一致する兄弟要素のみが選択されます:
$("h1").next("p") //$("h1+p") と同じ
 $("h1").prev() //<h1>要素の前の兄弟要素 </h1>
nextAll() と prevAll() は、選択された各要素の前後にあるすべての兄弟要素 (存在する場合) を返します。 Brothers() メソッドは、選択された各要素のすべての兄弟要素を返します (選択された要素自体は独自の兄弟要素ではありません)。これらのメソッドにセレクターを渡すと、一致する兄弟要素のみが返されます: 
$("#footer").nextAll("p") // #footer 要素の直後にあるすべての兄弟要素
$("#footer").prevAll() //#footer 要素の前にあるすべての兄弟要素
 jQuery 1.4 以降、nextUntil() メソッドと prevUntil() メソッドはセレクター パラメーターを受け入れ、 will select セレクターに一致する要素が見つかるまで、要素の前後にあるすべての兄弟を選択します。セレクターが省略された場合、これら 2 つのメソッドはセレクターなしの nextAll() および prevAll() と同様に機能します。 
parent() メソッドは、選択された各要素の親ノードを返します。 
$("li").parent() // <u1> などのリスト要素の親ノード。 ;ol> 要素 </u1>
parents() メソッドは、選択された各要素の祖先ノードを返します (要素まで)。 parent() とparents() はどちらもオプションのセレクター文字列パラメーターを受け入れます:
$("a[href]").parents("p") //リンクを含む 
 parentsUntil() は、指定されたセレクターに一致する最初の祖先要素が表示されるまで、選択された各要素の祖先要素を返します。 close() メソッドはセレクター文字列を渡す必要があり、選択された各要素の祖先要素 (存在する場合) の中でセレクターに一致する最も近い祖先要素を返します。このメソッドの目的では、要素はそれ自体の祖先であると見なされます。 jQuery 1.4 では、上位要素を 2 番目のパラメーターとして closest() に渡して、jQuery が上向き検索時に指定された要素を超えないようにすることもできます: 
$("a[href]").closest ("p ") //リンクを含む最内層

$("a[href]").parentsUntil(":not(p)") //すべてのパッケージ<a> 要素 
上記は jquery セレクターと原則の完全な紹介です。お読みいただきありがとうございます。 
 </a></select>

以上がjquery で一般的に使用されるセレクターの型とその使用原則の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScriptのページ更新と親関数の呼び出しの使い方を詳しく解説次の記事：JavaScriptのページ更新と親関数の呼び出しの使い方を詳しく解説

続きを見る