• HOME
  • JavaScript
  • jQueryのはじめの一歩！セレクタの指定方法を解説
  • JavaScript
  • javascript
  • jQuery

jQueryのはじめの一歩！セレクタの指定方法を解説

jQueryのはじめの一歩！セレクタの指定方法を解説

jQueryで機能をつける場所を指定するのがセレクタです。要素（タグ）やクラス名、id名を記入するのが一般的です。しかし、コードが長くなればなるほど、クラス、idが多くなります。クラス名やid名だけで指定すると、クラス、idが把握しきれなくなります。

そのために、jQueryでは様々な方法でセレクタを指定する方法があります。本記事ではセレクタの指定方法を解説します。指定方法はたくさんあるので、よく使うセレクタを抜粋しています。

セレクタってなに？

セレクタとはjQueryを使って機能をつけたい対象を指定することです。例えばliタグに色を変える機能をつけたい場合、liがセレクタになります。セレクタはタグ名だけでなく、クラス名、id名でも指定することができます。

jQueryでの記述は$(“セレクタ”)です。シングルクォーテーション(‘’)もしくはダブルクォーテーション（””）で囲うことを忘れないようにしましょう。指定の仕方はたくさんあり、覚えるのは大変ですが、基本的なセレクタのみ覚えて、残りは調べれらるようにしましょう。

セレクタを指定するコードの書き方（基本編）

要素を取り出す

htmlの要素を指定する方法は$(“タグ名”）です。例えば、liタグを指定したい場合は$(“li”)と記述します。同じタグがある場合は、全てのタグに適用されます。もし特定のタグのみを指定したいときは後述の「class名を指定する」や「id名を指定する」、「セレクタを細かく指定するための方法」を参考にしてください。

クラスを指定する

クラスを指定する場合は、$(“.hoge”）です。クラス名を指定する際はピリオド(.)をつけます。忘れやすいので気を付けましょう。もし、jQueryがうまく動かないときはピリオドのつけ忘れのケースが多いです。 

idを指定する

idを指定する場合は、$(“#huga”)です。idを指定する際はシャープ(#)をつけます。シャープはピリオドに比べて見やすいため見落としは少ないですが、クラス名と同様にシャープを忘れてjQueryが動かないということもあります。

id名はhtmlファイル内で複数回使えないため、「これにしかこの機能を持たせない」というところに使うことがおすすめです。

セレクタを複数指定する。

2つ以上のセレクタを指定したいときはカンマ(,)を使いましょう。例えば、header-listとfooter-listという2つのクラスを指定したいとします。記述方法は$(“.header-list, .footer-list”)です。

セレクタを細かく指定するための方法

要素内のクラスを指定する。

要素内のクラスを指定する方法は$(“要素.クラス名”)です。クラスは同じ処理を行いたい要素に同じクラス名をつけます。しかし、特定要素内のクラスでは処理を1つ増やしたいというときに便利です。

子要素すべてを指定する

ある要素のすべての子要素を指定するのは$(“親要素のセレクタ” > “子要素のセレクタ”)で指定する事ができます。子要素とはある要素の直下にある要素を指します。実際のコードで説明します。　

<div>
  <ul>
    <li>セレクタ1</li>
    <li>セレクタ2</li>
  </ul>
</div>

divタグから見てulが子要素になります。ちなみにliは孫要素と呼ばれます。開始タグか終了タグの間にある要素を子要素で、子要素の子要素は孫要素です。合わせて子孫要素と呼ばれるので知っておくと便利です。

他にも$(‘div’).children();で取得する方法があります。

子孫セレクタ

子孫セレクタを指定する場合は$(“親要素 子孫要素”)です。親要素と子孫要素の間にスペースを入れます。子孫要素は指定したいタグ名を入れましょう。

覚えておくと便利なセレクタ

全ての要素

すべての要素に機能をつけるときは*（全称セレクター）を使います。$(“*”)と記述します。他にも要素内のすべてに機能をつける場合もアスタリスクを使用します。div内のすべての要素に機能をつける場合は、$(“div *”)となります。

要素の部分にはクラス名、id名も指定できます。

this

thisは同じ機能内で、最初に指定した要素と同じ要素を指定する際に使われます。クリックイベントなどの時によく使われます。例えば、ボタンを押すとボタン自体の文字色が変わるというコードを書きます。

$('button').on('click', function () {
  $('button').css('color', 'red');
});

$(“button”)が同じ物を指しています。このとき、２つめの$(“button”)は$(this)と記述することで同じ役割を果たします。ここでthisにはシングルクォーテーションやダブルクォーテーションは必要ないので気をつけましょう。

サンプルコードを下に載せます。こちらはボタンを押すとボタン内の文字が変わるコードです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <button>OK</button>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $('button').on('click', function () {
        $(this).text("Let's Go");
      });
    </script>
  </body>
</html>

フィルター

フィルターは複数の同じ要素に条件付きでしていするときに使います。基本的な種類だけ下で紹介します。セレクタの後ろにコロン(:)をつけて指定します。

セレクタ:firstー最初の要素

セレクタ:lastー最後の要素

セレクタ:evenー偶数番の要素

セレクタ:oddー奇数番の要素

セレクタ:index(n)ーn番目の要素

セレクタを指定しないとページ全体に対してのフィルターになるのでご注意ください。

まとめ

jQueryでセレクタを指定する方法を解説しました。セレクタの指定は動きをつけたり、イベントのきっかけを作る上で必ず必要になります。セレクタの指定方法をたくさん知っておけば、無駄にクラス名を増やしたりする必要もなくなります。

指定方法がわからないから適当にクラス名をつけておくのはコードが複雑になります。プログラミングはシンプルなコードにすればするほど、メンテナンスもしやすいです。コードも短くなるため、セレクタの指定方法は知っておくことをおすすめします。