ほとんどのjQueryセレクターは既存のCSSセレクターに基づいているので、おそらくそれが得意です。 ただし、あまり使用されないセレクターがいくつかあります。 この記事では、あまり知られていないが重要なセレクターに焦点を当てます。
リストに行きましょう！
1. [href ^ = "http"]
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }
これらは、リンクが別のサイトにつながるというユーザーへの素晴らしいヒントです。
これは^文字を使用して行われます。 通常、正規表現で行の始まりを示すために使用されます。 href属性がhttpで始まるリンクを選択する場合は、上記の例のセレクターを使用できます。 httpを探していないことに注意してください。 これはオプションであり、さらにhttpsリンクを考慮していません。
2. :: pseudoElement
p::first-line { font-weight: bold; font-size: 1.2em; }
擬似要素を使用して、たとえば、最初の行や最初の文字などの要素フラグメントのスタイルを設定できます。 ブロック要素にのみ適用されます。 ここで、段落の最初の文字を選択します。
p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; }
このコードは、ページ上のすべての段落を検索し、指定されたスタイルを各段落の最初の文字に適用します。 多くの場合、これは「新聞の見出し」の効果を作成するために使用されます。 段落の最初の行を選択します。
p::first-line { font-weight: bold; font-size: 1.2em; }
前の例と同様に機能しますが、この場合、各段落の最初の行が選択されます。
3. [href * = "example"]
a[href*="example"] { color: red; }
アスタリスクは、検索値をhref属性の任意の部分に含めることができることを意味します。 したがって、
http://www.example.com www.example.com example.com.
両方を選択でき
http://www.example.com www.example.com example.com.
4. [データ-* = "foo"]
a[data-filetype="image"] { color: red; }
作成できるさまざまなタイプの画像をカバーするために、いくつかのセレクター：
a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red; }
しかし、これはかなり面倒で、より簡単な方法があります-独自の属性データファイルタイプを作成し、それを画像につながる各リンクに追加する。
<a href="path/to/image.jpg" data-filetype="image"></a>
したがって、次のコードを使用できます。
a[data-filetype="image"] { color: red; }
5 .:アニメーション
現在アニメーション化されているすべての要素を選択するには、アニメーション化セレクターを使用します。 唯一の警告：選択は、jQueryを介してアニメーション化される要素に対してのみ実行されます。
また、CSSでアニメーション化された要素は選択に含まれません。 ただし、アニメーションイベントをリッスンすることで、アニメーションの完了をキャッチできます。
これがどのように実装されているか、リンクを見ることができます。 この例では、呼び出しの前に奇数のdiv要素のみがアニメーション化されます。
$(":animated").css("background","#6F9");
したがって、元々は緑色に塗られていました。 その後のみ、他のすべてのdiv要素のアニメーションが発生します。 ボタンボタンをクリックすると、すべてのdiv要素が緑色に変わります。
6 .:ヘッダー
タイトルを選択するために、$（ "h1 h2 h3 h4 h5 h6"）を記述する必要はありません。$（ "：header"）セレクターを使用できます。 さまざまな見出しを持つarticle要素があるとします。 すべてのヘッダーを選択するには、$（「記事：ヘッダー」）セレクターで十分です。 プロセスを高速化するには、エントリ$（ "article"）。Filter（ "：header"）を使用できます。
$("article :header").each(function(index) { $(this).text((index + 1) + ": " + $(this).text()); });
CodePenの例。
JQueryには、フォーム要素を操作するための多数のセレクターがあります。 たとえば、ボタンはすべてのボタンを選択し、チェックボックスはチェックボックス型のすべてのフォーム要素を選択します。
7. [attr！= "Value"]
ほとんどの場合、このようなセレクタは、ページ上の特定の値を持つ属性の存在を判断するために使用されます。 しかし、レコード[attr！= "Value"]を使用して、この属性が存在しないか、指定された値と等しくない要素を選択することもできます。 同等：not（[attr = "value"]）。 [attr = "value"]とは異なり、[attr！= "Value"]はCSS仕様に含まれていないため、$（ "css-selector"）という表記を使用します。Not（ "[attr = 'value'） ] "）。 以下の例では、data-category属性がcssに等しくないすべての要素に、不一致クラスが追加されます。 このフェイントは、JavaScriptを介してデバッグするときに役立ちます。
$("li[data-category!='css']").each(function() { $(this).addClass("mismatch"); $(".mismatch").attr("data-category", attributeValue); });
同様の例のデモンストレーション 。
8 .:含む（テキスト）
このセレクタは、検索テキストが存在する要素を選択します。 たとえば、Lorem Ipsumのすべてのフレーズを特定の色にする必要があります。 このサンプルでは大文字と小文字が区別されます。
HTML：
<section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat<b>Lorem Ipsum</b>.</p> <a href="https://en.wikipedia.org/wiki/Lorem_ipsum">Lorem Ipsum Wikipedia Link</a> </section> <section> <p>This <span class="small-u">lorem ipsum</span> should not be highlighted.</p> </section> <ul> <li>A Lorem Ipsum List</li> <li>More Elements Here</li> </ul>
すべてのオプションを強調表示するJavaScriptコード：
$("section:contains('Lorem Ipsum')").each(function() { $(this).html( $(this).html().replace(/Lorem Ipsum/g, "<span class='match-o'>Lorem Ipsum</span>") ); });
9. [foo〜= "bar"]
a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; }
別の興味深いトリック。 Tildaでは、スペースで区切られた値を持つ属性を選択できます。
<a href="path/to/image.jpg" data-info="external image"> </a>
この手法を使用すると、必要な組み合わせで選択を行うことができます。
/* data-info, external */ a[data-info~="external"] { color: red; }
/* data-info, image */ a[data-info~="image"] { border: 1px solid black; }
10 .: has（セレクター）
直接の子孫である必要はない、目的のセレクターを含むすべての要素を選択します。 ：（）があり、必ずしもCSS仕様の一部ではありません。 ブラウザの新しいバージョンでパフォーマンスを向上させるには、次のようなエントリを使用します：$（ "pure-css-selector"）。Has（selector）、not not $（ "pure-css-selector：has（selector）"）。
例：リンクがある要素の色を変更します。
HTML：
<ul> <li>Pellentesque <a href="dummy.html">habitant morbi</a> tristique senectus.</li> <li>Pellentesque habitant morbi tristique senectus.</li> (... more list elements here ...) <li>Pellentesque habitant morbi tristique senectus.</li> <li>Pellentesque <a href="dummy.html">habitant morbi</a> tristique senectus.</li> </ul>
JavaScript：
$("li:has(a)").each(function(index) { $(this).css("color", "crimson"); });
このフラグメントのロジックは非常に単純です。リストのすべての要素を調べ、リンクの存在を確認し、リンクがある場合は、指定された色で要素に色を付けます。 この例は CodePenにあります。
実際にはほとんど使用されないが、開発にはまだ有用な10個のセレクターを調べました。 これで選択は終わりです。新しく便利なjQueryセレクターを自分で見つけてください。 いい一日を