【初心者向け】jQueryのセレクタの種類と使い方

生徒

jQueryのセレクタにはどんな種類がありますか？

先生

jQueryのセレクタの種類や使い方に付いて説明します

JQueryのセレクタ

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

該当する要素すべてを取得する

See the Pen jquery-selector-list by mik20621 (@mik20621) on CodePen.

セレクタの種類

ページ内の全ての要素を取得する（全称セレクタ）

全称セレクタ（ユニバーサルセレクタ）は、ページ内のあらゆる全ての要素を対象にする場合に使用します。

//ページ内のすべての要素を取得するセレクタ
$("*")

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

指定したタグの要素をすべて取得する（要素セレクタ）

要素セレクタは、指定したHTMLタグの要素をすべて取得します。

// divタグの要素をすべて取得する
$("div")

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

指定したidの要素を取得する（IDセレクタ）

指定したIDを持つ要素を取得します。

// id="wrapper"の要素を取得する
$("#wrapper")

See the Pen jQuery-selector-tag by mik20621 (@mik20621) on CodePen.

指定したclassの要素をすべて取得する（クラスセレクタ）

指定したclassを持つ要素をすべて取得します。

// class="red"の要素を取得する
$(".red")

See the Pen jQuery-selector-tag by mik20621 (@mik20621) on CodePen.

指定した属性の要素をすべて所得する（属性セレクタ）

指定した属性の値を持つ要素を取得する

// href属性に"example"の文字を含むaタグの要素を取得する
$("a[href*="example"]")

See the Pen jQuery-selector-ID by mik20621 (@mik20621) on CodePen.

 [属性]は属性を持つすべての要素を取得

[ ]で囲んだ属性を持つすべての要素を取得します。

See the Pen jQuery_attribute_selector_all by mik20621 (@mik20621) on CodePen.

 [属性=値]は値が完全一致する要素をすべて取得

[属性=値]は値が完全に一致する要素をすべて取得します。

// href属性が"example"のaタグの要素を取得する
$("a[href="example"]")

See the Pen jQuery_attribute_selector_PerfectMatch by mik20621 (@mik20621) on CodePen.

 [属性~=値]は値を含む要素をすべて取得

[属性〜=値]は属性の中の1個に値を含む要素をすべて取得します。

See the Pen jQuery_attribute_selector_PartialMatch by mik20621 (@mik20621) on CodePen.

 [属性^=値]は値が先頭一致する要素をすべて取得

[属性^=値]は値の文字列が先頭に一致する要素をすべて取得します。

See the Pen jQuery_attribute_selector_FirstMatch by mik20621 (@mik20621) on CodePen.

 [属性$=値]は値が末尾一致する要素をすべて取得

[属性=値]は値の文字列が末尾に一致する要素をすべて取得します。

See the Pen jQuery_attribute_selector_LastMatch by mik20621 (@mik20621) on CodePen.

 [属性!=値]は値が一致しない要素をすべて取得

[属性!=値]は値と一致しない要素をすべて取得します。

See the Pen jQuery_attribute_selector_NotMatch by mik20621 (@mik20621) on CodePen.

 [属性=値][属性=値]は複数の値が一致する要素をすべて取得

[属性=値][属性=値]はつなげた属性と値がすべて一致する要素をすべて取得します。

See the Pen jQuery_attribute_selector_Multi by mik20621 (@mik20621) on CodePen.

 [属性*=値]は値を含む要素をすべて取得

[属性*=値]は値の文字列を含む要素をすべて取得します。

See the Pen jQuery_attribute_selector_PartialMatch by mik20621 (@mik20621) on CodePen.

複合セレクタ

AND条件

複数のセレクタをスペース無しでつなげると、両方とも満たす要素を取得します。

// セレクタ1とセレクタ2の両方に一致する要素を取得する
// $("セレクタＡセレクタＢ")
$("div.text")
$("classA.classB")

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

タグやIDは一つの要素に一つなので、AND条件で使用するのはclassのことが多いです。

OR条件

複数のセレクタを半角カンマでつなげると、いずれかを満たす要素を取得します。

//セレクタ1とセレクタ2の両方に一致する要素を取得する
$("セレクタＡ セレクタＢ")

See the Pen jQuery_selector_AND by mik20621 (@mik20621) on CodePen.

子孫セレクタ

上位に持つ要素を指定して、その下位の該当する要素すべてを指定するには上位に持つ要素 スタイルを適用する要素と半角スペースで区切ります。

<div class="red">
  <p>.redの子要素は赤色<p>
  <div class="child">
    <p>.redの孫要素も赤色<p>
  </div>
</div>
<div class="other">
  <p>範囲外<p>
</div>

$(".red p").css("color","red");

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

子セレクタ

指定した親要素（一つ上の階層）に持つ要素を指定する場合は直上の親要素 > 指定したい要素の形で指定します。

//セレクタA
$("セレクタＡ > セレクタＢ")

See the Pen jQuery_selector_child by mik20621 (@mik20621) on CodePen.

隣接セレクタ

指定した親要素を直上（一つ上の階層）に持つ要素を指定する場合は、直上の親要素 > 指定したい要素の形で指定します。

// セレクタＡの直後の要素Ｂ
// $("セレクタＡ + セレクタＢ")

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

間接セレクタ

指定した要素の次以降の要素を指定する場合は、指定する要素　〜　次以降で一致させる要素の形で指定します。

See the Pen jQuery_selector_ indirect by mik20621 (@mik20621) on CodePen.