jQueryのセレクタの基本的な使い方【HTML要素を指定する】

Webページを作成していると、「ここはこんな動きにしたい」と思うことがあるのではないでしょうか。そこで活躍するのが、jQueryのセレクタです。この記事では、jQueryを利用する上で必須の「セレクタ」について解説していきたいと思います。ぜひ、参考にしてみてください。
- システム
エンジニア - 自作のWebサイトでjQueryを使ってみたいです。
- プロジェクト
リーダー - 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> |
そして、ブラウザで実行します。
少し黄色が見えにくいですが、しっかり文字の色が変更されています。
- システム
エンジニア - jQueryのセレクタは、「操作したい要素+行いたい処理」の形でシンプルに記述されていますね。
- プロジェクト
リーダー - ソースコードが短いからより見やすいですね。ぜひ、活用してみてください!
jQueryのセレクタで簡単に動的ページを作成する
この記事では、jQueryのセレクタの概要から実装方法までを解説していきました。jQueryはソースコードが短く、シンプルな記法となっているため、初心者の方も学習しやすいことがメリットです。基本であるセレクタをマスターして、イメージどおりのWebページを作成してみてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
数多くのエンジニアが集まります。

-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。


新着案件New Job
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万~30万円東京都品川区(大崎駅)遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万~60万円東京都港区(六本木駅)病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万~30万円東京都豊島区(池袋駅)開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万~50万円東京都豊島区(大塚駅)債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万~67万円東京都文京区(後楽園駅)PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万~55万円東京都豊島区(池袋駅)