jQueryセレクターの説明:クラスセレクター、IDセレクターなど

jQueryセレクター

jQueryは、CSSスタイルのセレクターを使用してHTMLページのパーツまたは要素を選択します。次に、jQueryメソッドまたは関数を使用して要素で何かを実行できます。

これらのセレクターの1つを使用するには、ドル記号とその後ろの括弧を入力します$()。これはjQuery()関数の省略形です。括弧内に、選択する要素を追加します。一重引用符または二重引用符のいずれかを使用できます。この後、括弧と使用するメソッドの後にドットを追加します。

jQueryでは、クラスセレクターとIDセレクターはCSSのものと似ています。先に進む前に、そのことを簡単に確認しましょう。

CSSのIDセレクター

CSS IDセレクターは、特定のhtml要素にスタイルを適用します。CSS IDセレクターは、HTML要素のID属性と一致する必要があります。サイト全体の複数の要素に適用できるクラスとは異なり、特定のIDはサイトの1つの要素にのみ適用できます。CSS IDは、CSSクラスのプロパティを上書きします。特定のIDを持つ要素を選択するには、ハッシュ(#)文字を記述し、その後に要素のIDを記述します。

構文

#specified_id { /* styles */ }

IDセレクターを他のタイプのセレクターと組み合わせて、非常に特定の要素のスタイルを設定できます。

section#about:hover { color: blue; } div.classname#specified_id { color: green; }

IDに関する注意

可能であれば、スタイリング時にIDを使用しないでください。特異性が高く、スタイルをインライン化するか、スタイルをに追加した場合にのみオーバーライドできます。IDの重みは、クラスセレクターとタイプセレクターをオーバーライドします。

IDセレクターはHTML要素のID属性と一致する必要があることに注意してください。

特異性

IDセレクターは特異性が高いため、オーバーライドが困難です。クラスの特異性ははるかに低く、一般に、特異性の問題を回避するために要素のスタイルを設定するための推奨される方法です。

これは、すべての段落要素を選択し、それらに「選択済み」のクラスを追加するjQueryメソッドの例です。

This is a paragraph selected by a jQuery method.

This is also a paragraph selected by a jQuery method.

$("p").addClass("selected");

OK、jQueryに戻ります

jQueryでは、クラスセレクターとIDセレクターはCSSと同じです。特定のクラスの要素を選択する場合は、ドット(.)とクラス名を使用します。特定のIDを持つ要素を選択する場合は、ハッシュ記号(#)とID名を使用します。HTMLでは大文字と小文字が区別されないため、HTMLマークアップとCSSセレクターは小文字のままにしておくことをお勧めします。

クラスによる選択:

Paragraph with a class.

$(".p-with-class").css("color", "blue"); // colors the text blue

IDによる選択:

  • List item with an ID.
  • $("#li-with-id").replaceWith("

    Socks

    ");

    クラスとIDとともに特定の要素を選択することもできます。

    クラス別選択

    特定のクラスの要素を選択する場合は、ドット(。)とクラス名を使用します。

    Paragraph with a class.

    $(".pWithClass").css("color", "blue"); // colors the text blue

    クラスセレクターをタグ名と組み合わせて使用​​して、より具体的にすることもできます。

      My Wish List
    `

    $("ul.wishList").append("
  • New blender
  • ");

    IDで選択

    特定のID値を持つ要素を選択する場合は、ハッシュ記号(#)とID名を使用します。

  • List item with an ID.
  • $("#liWithID").replaceWith("

    Socks

    ");

    クラスセレクターと同様に、これはタグ名と組み合わせて使用​​することもできます。

    News Headline

    $("h1#headline").css("font-size", "2em");

    フィルタとして機能するセレクタ

    フィルタとして機能するセレクタもあります。通常、コロンで始まります。たとえば、:firstセレクターは、その親の最初の子である要素を選択します。これは、いくつかのリスト項目を含む順序付けされていないリストの例です。リストの下のjQueryセレクターは最初のものを選択します

  • リスト内の要素(「1つ」のリスト項目)を使用して、.cssメソッドを使用してテキストを緑色にします。

    • One
    • Two
    • Three
    $("li:first").css("color", "green");

    注: JavaScriptでcssを適用することは良い習慣ではないことを忘れないでください。あなたは常にcssファイルであなたのスタイルを与えるべきです。

    別のフィルタリングセレクター:contains(text)は、特定のテキストを持つ要素を選択します。一致させたいテキストを括弧内に配置します。これは2つの段落の例です。jQueryセレクターは「Moto」という単語を受け取り、その色を黄色に変更します。

    Hello

    World

    $("p:contains('World')").css("color", "yellow");

    同様に、:lastセレクターはその親の最後の子である要素を選択します。以下のJQueryセレクターは最後のものを選択します

  • Original text


  • リスト内の要素(「3つの」リストアイテム)を使用して、.cssメソッドを使用してテキストを黄色にします。

    $("li:last").css("color", "yellow");

    注: jQueryセレクターでWorldは、はすでに二重引用符のペアの中にあるため、単一引用符で囲まれています。文字列が意図せず終了しないように、常に二重引用符の中に一重引用符を使用してください。

    複数のセレクターjQueryでは、複数のセレクターを使用して、1行のコードを使用して同じ変更を複数の要素に適用できます。これを行うには、異なるIDをコンマで区切ります。たとえば、IDがcat、dog、ratの3つの要素の背景色をそれぞれ赤に設定する場合は、次のようにします。

    $("#cat,#dog,#rat").css("background-color","red");

    これらは、jQueryで使用できるセレクターのほんの一部です。jQuery Webサイトの完全なリストへのリンクについては、「詳細情報」セクションを参照してください。

    詳しくは:

    • jQueryセレクターの完全なリスト