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

当ページのリンクには広告が含まれています。
  • URLをコピーしました!
生徒

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

先生

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

この記事で分かること
  • jQueryのセレクタの種類と使い方
目次

JQueryのセレクタ

jQueryで一番使用するのは、ページ内の要素にアクセスするセレクタです。

CSSと同様のセレクタだけでなくjQuery独自のセレクタもあり、JQueryを使用することでより簡単に、ページ内の要素にアクセスすることができます。

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

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

セレクタは該当する要素をすべてリストで取得します。

取得したリストから1個ずつ取り出して各要素に対して処理を行うことができます。

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の両方に一致する要素を取得する
// $("セレクタAセレクタB")
$("div.text")
$("classA.classB")

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

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

OR条件

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

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

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
$("セレクタA > セレクタB")

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

隣接セレクタ

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

// セレクタAの直後の要素B
// $("セレクタA + セレクタB")

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

間接セレクタ

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

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

よかったらシェアしてね!
  • URLをコピーしました!
目次