jQueryで要素を選択するセレクタの使い方【初心者向け】
プログラミング初心者向けに、jQueryでセレクタを使って特定の要素を選択する方法を解説しています。セレクタの書き方を説明し、実際にセレクタで要素を指定して動きを確認しています。セレクタによって作業も効率化するので、ぜひご覧ください。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。
JavaScriptのライブラリであるjQueryでセレクタの使い方を解説しています。
ある要素だけ動きを出したいなど特定の要素に処理を行う際に便利なので、ぜひ理解していきましょう。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
セレクタとは
一言で言えば、特定の要素を選択するための処理のことです。例を挙げて説明してみましょう。
以下のようなhtmlがあったとします。
<p class="p1">p1</p> <p class="p2">p2</p> <p class="p3">p3</p> <h1 class="h1">h1</h1> <h1 class="h2">h2</h1> <h1 class="h3">h3</h1>
jQueryを実装する時に「p1のみに処理を適用したい」であったり、「h1属性全てに処理を適用したい」など処理によって様々な要望が出てくると思います。そのようなjQueryを任意の要素にのみ適用させるための処理がセレクタです。
HTMLタグやクラス指定がありますね。
jQueryの$()の中にタグやclass属性の名前を書くと、その要素を取得できるんだよ。
HTMLタグであっても、class属性であっても同じように書いて取得できるんですね！
そうそう。HTMLタグとid属性とclass属性の場合について見てみよう！
セレクタを指定する書き方
実際にセレクタを指定してみましょう。以下のhtmlの特定の要素を選択していきましょう。
<p class="p1">p1</p> <p class="p2">p2</p> <p class="p3">p3</p> <h1 id="h1">h1</h1> <h1 id="h2">h2</h1> <h1 id="h3">h3</h1>
セレクタを使ったscriptタグ内の処理を以下に記述しています。
<script>
$(function(){
$(“p”) //p要素全て
$(“.p1”) //p1クラスのみ
$(.p1.p2“) //p1とp2クラス
$(#h1) //idがh1の要素
</script>
上の四つのセレクタを覚えれば基礎的なレベルのものではほとんど対応することができるでしょう。
実際に書いてみよう
実際にセレクタを使用して処理を書いてみましょう。今回は指定したセレクタの色を個別に変更するコードを書いていきます。jQuery適用前は以下のようになっています。
では、実際にセレクタで指定した色を変更してみましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$( function() {
$("p").css("color","blue");
$("#h1").css("color","red");
$("#h2").css("color","green");
} );
</script>
</head>
<body>
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
<h1 id="h1">h1</h1>
<h1 id="h2">h2</h1>
<h1 id="h3">h3</h1>
</body>
</html>
セレクタ毎にcssを書き換えて色を変更しています。以下のように色が変更していれば成功です。
まとめ
今回はセレクタを使って簡単に処理を書いていきました。
非常にシンプルな例のみの実行となりましたが、セレクタには他にも「liの最後の要素」や、「入れ子になっているクラス内のクラス要素」など、様々な要素を指定することが出来ます。
セレクタを使いこなすことができればコードも簡潔になります。ぜひ勉強してみてください。
指定したidやHTMLタグの中にあるテキストの色が変わっていますね。
JavaScriptだけの場合だと、getElermentById関数では、id属性しか取得出来なくて、他の関数を使わなければならなかったけど、jQueryだとまとめて同じように書けるんだ。
それは、良いですね！
もっと違う指定の仕方なども出来るんだけど、とりあえずid属性、class属性、HTMLタグを指定して要素を取得できる、そしてCSSなどを変更できるって覚えておきたいね。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
