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万円東京都豊島区(池袋駅)
関連記事Related Posts
-
jQuery UIのダウンロードの手順と使い方
「jQuery UI」を利用すると、Webサイトの画面項目に動きを付けることや、画面の見た目がリッチなデザインを作成することができます。 主にカレンダー、アコーディオン、ダイアログ、エフェクトなど、多くの機能が用意されて […]
-
jQueryのサンプル利用のメリットとデメリット&使えるサンプル3選
「jQuery」はJavaScriptのライブラリ群で、多くの機能が用意されているため、非常に便利なライブラリです。 jQueryを利用しているWebサイトも多いため、サンプルコードを公開しているサイトも多いです。 サン […]
-
【2020年1月版】最新のjQueryのバージョンは3.4.1 使い方や注目の機能とは
Web開発でよく利用されるjQueryですが、今回のリリースが3系で最後のバージョンとなるようで話題となっています。 この記事ではjQueryについて、気になるアップデートでの追加機能や、前のバージョンからの変更点を紹介 […]
-
jQueryで要素の表示と非表示を行う方法その2【showとhide】
jQueryでは、showメソッド・hideメソッドを使うことで要素の表示・非表示を切り替えることができます。今回は、show / hideメソッドの概要から実際の使い方までを解説していきます。ぜひ、参考にしてみてくださ […]
-
【jQueryが動かない】Chromeのデベロッパーツールで原因を見つける方法
「jQueryを記述したのに動かない！」と悩んでいないでしょうか。しかし、心配はご無用です。Chromeのデベロッパーツールを使えば、エラーの原因を短時間で見つけることができます。修正の仕方が分からなくて時間ばかり過ぎて […]
