jQueryにおけるセレクタってなに？セレクタを指定する6つの方法

システム
エンジニア

サイト制作でjQueryを使うことになったのですが、どういう言語なのでしょうか？

プロジェクト
リーダー

一言でいうならJavaScriptのライブラリですね。まずは基本構文と基本的なセレクタとメソッドから触れていきましょうか。

そもそもjQueryにおけるセレクタとは？

jQueryでのセレクタとは、「そのページ内の、操作対象のHTMLの要素を特定するもの」です。

セレクタはjQueryを使うときに欠かせないもので、様々な指定方法があります。また、複数の条件を組み合わせて操作対象を特定したり、特定の条件を除外することもできます。

jQueryでページ内のHTMLの要素を操作するときは、このセレクタで要素と、どのような操作をするかを指定します。

jQueryの基本構文

jQueryを利用するには、公式サイトからファイルをダウンロードする、CDN(Content Delivery Network)と呼ばれるファイルを利用する、の二通りの方法があります。

公式サイトからダウンロードする場合は、jQueryのファイルを事前にダウンロードして保存しておきます。

jQueryの宣言はJavaScriptのソースファイルの宣言と同様にjQueryの格納先を指定するだけです。

jQueryを利用するための基本構文

jQueryを利用するための基本構文は「<script type=””text/javascript”” src=””FILENAME””></script>」と記述し、FILENAMEの箇所にはファイル名が入ります。

FILENAMEの箇所に記述するファイル名は、ファイルをダウンロードした場合はファイルパスを、CDNを使う場合は目的のCDNのURLを指定します。

jQueryは実行するプログラムの前に読み込む

jQueryの読み込みは、jQueryを利用するスクリプトを記述したJavaScriptのファイルよりも先に指定しなければなりません。

これは、HTMLファイル内に記述された内容には優先順位があり、上から順に読み込まれるためです。この指定の順番が逆になり、jQueryの読み込みがスクリプトを記述したファイルより後になると、読み込みエラーになるため注意が必要です。

jQueryでセレクタを指定する6つの書き方

セレクタの指定方法は多数あり、タグやタグに付随する情報などからjQueryの処理の対象にするタグを特定します。jQueryを利用するときはセレクタに指定できるようにタグに付随する情報を付与しておかなければならないでしょう。

ここではHTMLタグ、階層的に要素を指定する、id属性、class属性、要素の属性で指定する方法、要素の内容の有無で指定する方法を見ていきましょう。

セレクタを指定する書き方1：HTMLタグで指定する方法

HTMLは「h1タグ」「pタグ」「imgタグ」「divタグ」などの「タグ」で構成されています。HTMLタグで指定する方法とは、これらのタグをセレクタとして指定して操作する方法です。

$(‘p’)と指定すればそのHTMLファイル内のすべてのpタグが、また、$(‘img’)と指定すればそのHTMLファイル内のすべてのimgタグがjQueryの操作の対象となります。

セレクタを指定する書き方2：階層的に要素を指定する方法

ほとんどのHTMLは階層構造になっていて、divタグにpタグやimgタグなどを含むといった定義ができます。jQueryのセレクタでは、階層構造をたどることで「特定のタグに含まれているタグの指定」ができます。

特定のタグに含まれているタグの指定は、「$(‘div > p’)」と記述すれば「divタグ内のpタグ」という意味になります。この場合、divタグに含まれないpタグは対象にはなりません。

セレクタを指定する書き方3：id属性で指定する方法

HTMLのタグにはidを指定でき、jQueryのセレクタにはこのidを指定できます。

セレクタの指定方法は「#」に続けて指定するidを記述します。$(‘#text1’)とすれば、idとして「text1」が指定されているタグのみが対象になります。

ひとつのページ内では、同一のid名はただ一つのみ定義できます。セレクタとしてidを指定した時は対象となるタグはただ一つに決まります。

セレクタを指定する書き方4：class属性で指定する方法

HTMLのタグにはclassを指定でき、jQueryのセレクタにはこのclass名を指定できます。

セレクタの指定方法は「.(ドット)」に続けて指定するclass名を記述します。$(‘.text’)とすればclassとして「text」が指定されているタグが対象になります。

1つのページ内には同じclass名を指定できるため、classで指定するとページ内にある特定の条件のタグをすべて対象にできます。

セレクタを指定する書き方5：要素の属性をもとに指定する方法

セレクタとしてタグに指定されたidやclass以外の属性に指定された値を使用でき、「HTML要素[属性=値]」と記述します。

<input type=””text”” name=””user-name”” value=””””>のときは、HTML要素はinput、属性は「name」、値は「user-name」になり、セレクタは「$(‘input[name=””user-name””]’)」となります。

セレクタを指定する書き方6：内容がある要素を指定する方法

セレクタには「テキストや子要素を含んでいる」という条件を指定できます。ここでは含まれている子要素にテキストなどが含まれているかどうかは問いません。

「テキストや子要素を含んでいる」の指定方法は、「$(“”要素名:parent””)」と記述します。要素名にはHTMLタグ、id、classを指定します。

:parentの指定はdivタグやpタグなどの「範囲を囲むタグ」で使用します。

not・or・andを使ったセレクタを指定する方法3つ

jQueryのセレクタには、複数の要素の条件の全てに一致するものだけを対象にするand、複数の要素の条件のいずれかに一致するものを対象にするor、そして指定した要素を対象外にするnotがあります。

これらは一般的なプログラミング言語のand、or、notの記述方法とは異なり、独自の記述方法になります。タグの定義とこれらのセレクタを組み合わせることで細かな条件を指定できます。

セレクタを指定する方法1：notを使ったセレクタを指定する方法

セレクタには「指定したidやクラスを対象外にする」といった指定もできます。対象外を指定するときは「not()」を使い、「$(“”要素名””).not(除外する条件)」と記述します。

「pタグを対象にするが、idとしてtext02またはtext04が指定されているものを除く」という条件のときは、「$(‘p’).not(‘#text02, #text04’)」と記述します。

セレクタを指定する方法2：orを使ったセレクタを指定する方法

セレクタをorでつなぐには、対象となるセレクタを並べてそれぞれを「,」で区切り、「$(“”セレクタ , セレクタ””)」と記述します。

「divタグとspanタグのいずれかを対象にする」という条件のときは、「$(“”div,span””)」と記述します。また、「testクラスとsampleクラスのいずれかを対象にする」という条件のときは、「$(“”.test,.sample””)と記述します。

セレクタを指定する方法3：andを使ったセレクタを指定する方法

セレクタをandでつなぐには、対象となるセレクタを並べて、「$(“”セレクタ1セレクタ2″”)」と記述します。

「testクラスが指定されているdivタグを対象にする」という条件のときは、「$(“”div.test””)」と記述します。また、「testクラスとsampleクラスの両方のクラスが指定されているタグを対象にする」という条件のときは、「$(“”.test.sample””)と記述します。

正規表現を使ったセレクタの指定方法

jQueryでは正規表現を使ったセレクタの指定もでき、一般的な正規表現である、前方一致、後方一致、部分一致、不一致を使えます。これらはタグに指定されているidやクラスが特定の文字列で始まっているか、終了しているか、などを指定し、条件に一致するものを対象にできます。

また、jQuery独自の指定方法に「idが指定されている」があり、値を問わずidが指定されているタグのみを対象にできます。

jQueryのセレクタへの理解を深めよう

jQueryのセレクタの書き方は多様で、複数の要素の組み合わせも指定できます。

jQueryのセレクタやメソッドを使いこなすことで、どのように動いているかが分かってきます。また、分岐やループ、演算処理などと併せて理解することで作りたい処理を作成することができます。

自身で作る場合には、初めは他のコードの動作を見ながら、どのようにして動いているかを参考に組み上げていくのがポイントです。

システム
エンジニア

jQueryにおいては、まずセレクタとメソッドを理解しないといけませんね。

プロジェクト
リーダー

はい。jQueryの根幹になる部分ですから、しっかり使いこなせるようにしましょう。