Lesson 2

セレクタ

Lesson 2 Chapter 1
要素を選択する

Lesson1ではjQueryの基本的な知識やメリットについて学んできました。
Lesson2では、Lesson1の「基本的な構文」のチャプターにて、軽く説明を行いました「セレクタ」について、より深掘りして学んでいきましょう。

まず、最初のチャプターでは、「セレクタ」の「要素を選択」する方法について説明します。

Lesson1のおさらいとなりますが、「セレクタ」は、HTMLドキュメント内の対象の要素を指定するためのものです。
タグや、クラス、ID、属性など、HTMLドキュメント上の要素であれば基本的にどれでも指定することが可能です。
そこで、まずは一番初歩的な「対象の要素を指定」する方法について、見ていきましょう。

以下に、サンプルコードを記載します。

sample.html
<body>
  <div>divの要素</div>
  <p>pの要素</p>
  <div class="sampleclass">クラスの要素</div>
  <div id="sampleid">IDの要素</div>
</body>

jQueryでは、HTMLドキュメント内の特定のタグ名を指定することで、その要素を選択することができます。
以下に、文法を記載します。

jQuery
$('要素名')

例えば、jQueryの基本構文に従い、セレクタの部分を

jQuery
$('div')

とすることで、HTMLドキュメント内のすべての<div>要素を選択することができます。
つまり、この時、上記のサンプルコードsample.htmlの場合では、<body>タグ内の1行目、3行目、4行目の3つの<div>要素を一括で取得することが可能です。

もちろん、sample.html内の別の要素（タグ）を指定することも可能です。
例えば、<p>要素を取得した場合は、

jQuery
$('p')

とすることで、<body>タグ内の2行目の<p>要素を取得することが可能です。

Lesson 2 Chapter 2
idを選択する

このチャプターでは、「セレクタ」にて「idを選択」する方法について、説明を行います。
こちらもLesson1にて少し触れた内容となりますが、再度おさらいしておきましょう。

以下はサンプルコードです。

sample.html
<body>
  <div>divの要素</div>
  <p>pの要素</p>
  <div class="sampleclass">クラスの要素</div>
  <div id="sampleid">IDの要素</div>
</body>

jQueryでは、HTMLドキュメント内の特定のIDを指定することで、そのIDに紐づいている要素を選択することができます。
以下が文法です。IDを指定する際には、「任意のID名」の先頭に「#（シャープ）」を付ける必要があります。

jQuery
$('#任意のID名')

例えば、jQueryの基本構文に従い、セレクタの部分を

jQuery
$('#sampleid')

と記述します。この時、上記のサンプルコードsample.htmlの<body>タグ内の4行目のid="sampleid"を持つ<div>要素を取得することができます。
サンプルコードには、他にも同じような<div>要素が存在していますが、このように「IDを選択する形を取る」ことで、特定の<div>要素のみを選択することが可能です。

IDは1つしか存在しない

1つのHTMLファイル内には、基本的にIDは1つしか存在しません。そのため、jQueryでIDを指定した場合、取得できる要素は必ず1つですので、こちらも合わせて覚えておきましょう。
※IDは、identifier（意味：識別子）の略です。

Lesson 2 Chapter 3
クラスを選択する

このチャプターでは、「セレクタ」にて「クラスを選択」する方法について、説明を行います。
クラスの選択方法についてもLesson1にて軽く触れた内容となりますが、ここで改めて復習しておきましょう。

以下はサンプルコードです。

sample.html
<body>
  <div>divの要素</div>
  <p>pの要素</p>
  <div class="sampleclass">クラスの要素</div>
  <div id="sampleid">IDの要素</div>
</body>

jQueryでは、HTMLドキュメント内の特定のクラス（class）を指定することで、指定したクラスを持つ要素を選択することができます。
以下が文法です。「任意のクラス名」の先頭に「.（ピリオド）」を付ける必要があります。

jQuery
$('.任意のクラス名')

jQueryの基本構文に従い、セレクタの部分を

jQuery
$('.sampleclass')

とすることで、上記のサンプルコードsample.htmlの<body>タグ内の3行目のclass="sampleclass"を持つ<div>要素を取得することができます。
サンプルコードには、他にも同じような<div>要素が存在していますが、「IDの選択」の際と同じ要領で、「クラスを選択する形を取る」ことで、指定したクラスに紐づく<div>要素のみを選択することが可能です。

クラスは複数存在可能

IDと違い、クラスは、1つのHTMLファイル内に複数設定することが可能です。
そのため、クラスは、共通の処理やスタイルを当てたい要素やタグに対し、設定されることが一般的です。

Lesson 2 Chapter 4
属性を選択する

このチャプターでは、「セレクタ」にて「属性を選択」する方法について、説明を行います。
属性の指定の方法については、今回初めて説明を行いますので、ここでしっかりと理解をしておきましょう。

以下に、今回のサンプルコードを記載します。

sample.html
<body>
  <div>divの要素</div>
  <p>pの要素</p>
  <div class="sampleclass">クラスの要素</div>
  <div id="sampleid">IDの要素</div>
  <input type="text" name="input-name" value="名前を入力してください。">
  <input type="text" name="input-email" value="メールアドレスを入力してください。">
</body>

単純な属性の指定

jQueryでは、HTMLドキュメント内の任意の属性を指定することで、指定した属性に該当する要素を選択することができます。
以下が文法です。

jQuery
$('[任意の属性名]')

jQueryの基本構文に従い、セレクタの部分を

jQuery
$('[class]')

とすることで、上記のサンプルコードsample.htmlにて、class属性を持つ要素を選択することができます。
つまり、この場合、<body>タグ内の3行目のclass="sampleclass"を持つ<div>要素のみを取得することができます。

属性 + 値の指定

また、「任意の属性」に加え、「属性が持つ値」と組み合わせをする形の指定の方法も可能です。その場合の文法を以下に記載します。

jQuery
$('[任意の属性名 = "値"]')

例えば、構文に従い、セレクタを以下のように記述してみました。

$('[name = input-name]')

このように、「属性」と「値」の2つを=（イコール）で結んだ条件として指定することで、上記のサンプルコードsample.htmlにて、name属性の値が「input-name」と一致する属性を持つ要素を選択することができます。
つまり、この場合、<body>タグ内の5行目と6行目に<input>要素が存在し、それぞれname属性を持っていますが、ここからさらに、name属性の値が「input-name」と一致する5行目の<input>要素のみを取得することができます。

値は"完全一致"かどうかが重要

「属性」と「属性が持つ値」の組み合わせ指定の場合、条件として設定した値に"完全一致"する値を持つ属性のみが選択されます。
例えば、$('[name = input]')のように、部分一致の状態の指定の仕方の場合、上記のサンプルコードsample.htmlにて一致する要素が存在せず、結果、正確に要素を選択することができない状態となってしまいますので、ご注意ください。

属性には、他にも様々な指定の方法があります。その他の指定方法について調べてみたい方は、一度、jQueryの公式ドキュメントを参照していただくと良いでしょう。