.NET開発者のためのブログメディア
jQueryのセレクタの基本的な使い方【HTML要素を指定する】
Webページを作成していると、「ここはこんな動きにしたい」と思うことがあるのではないでしょうか。そこで活躍するのが、jQueryのセレクタです。この記事では、jQueryを利用する上で必須の「セレクタ」について解説していきたいと思います。ぜひ、参考にしてみてください。
- SE
- 自作のWebサイトでjQueryを使ってみたいです。
- PL
- jQueryはソースコードが比較的短くできるため、開発がしやすいですよ。特にWeb開発の初心者にもおすすめです。
目次
jQueryのセレクタとは
はじめに、jQueryのセレクタについて概要を抑えておきましょう。「セレクタ」とは、特定の要素を取得するために記述する処理のことです。
例えば、「ソースコードの1つ目のラジオボタンを選択済みにしたい」という場合、jQueryで$()の括弧内に「操作したい要素名」と「行いたい処理」を記述することで、簡単に動的なページを作成することができます。
操作したい要素名は、下記のようにHTMLのタグ名やID、クラス名などで指定することができます。
- ・要素セレクタ（HTMLのタグ名で指定する場合）
- ・IDセレクタ（IDで指定する場合）
- ・クラスセレクタ（クラス名で指定する場合）
$(“tag_name”)
$(“#id”)
$(“class_name”)
※行いたい処理はこの後ろに[.()]のように指定します。
これらの処理はHTML側で記述できる場合もあるのですが、jQueryで切り分けて記述した方が見やすいというメリットがあります。そのため、セレクタはjQueryで記述することをおすすめします。
jQueryのセレクタを実装する
ここでは、実際にjQueryのセレクタを使ってみたいと思います。
今回は基本中の基本である、文字の色を変更する処理をセレクタで行っていきます。
下記のようにコードを記述します。今回はそれぞれ違う色にしたいので、クラス名で指定していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>セレクタサンプル</title> <!--jQueryを使うために、<head>内に下記コードを追加--> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!--jQueryを記述する際は<script>で囲む--> <script> $( function() { // セレクタで指定し行いたい処理を記述 $(".red").css("color","red"); $(".yellow").css("color","yellow"); $(".blue").css("color","blue"); } ); </script> </head> <body> <div id="color"> <p class="red">赤</p> <p class="yellow">黄</p> <p class="blue">青</p> </div> </body> </html> |
そして、ブラウザで実行します。
少し黄色が見えにくいですが、しっかり文字の色が変更されています。
- SE
- jQueryのセレクタは、「操作したい要素＋行いたい処理」の形でシンプルに記述されていますね。
- PL
- ソースコードが短いからより見やすいですね。ぜひ、活用してみてください！
jQueryのセレクタで簡単に動的ページを作成する
この記事では、jQueryのセレクタの概要から実装方法までを解説していきました。jQueryはソースコードが短く、シンプルな記法となっているため、初心者の方も学習しやすいことがメリットです。基本であるセレクタをマスターして、イメージどおりのWebページを作成してみてください。
