.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. jQueryのセレクタの基本的な使い方【HTML要素を指定する】

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

  • Javascript
  • プログラミング言語
公開日時:   更新日時:
jQueryのセレクタの基本的な使い方【HTML要素を指定する】
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

    Webページを作成していると、「ここはこんな動きにしたい」と思うことがあるのではないでしょうか。そこで活躍するのが、jQueryのセレクタです。この記事では、jQueryを利用する上で必須の「セレクタ」について解説していきたいと思います。ぜひ、参考にしてみてください。

    システム
    エンジニア
    自作のWebサイトでjQueryを使ってみたいです。
    プロジェクト
    リーダー
    jQueryはソースコードが比較的短くできるため、開発がしやすいですよ。特にWeb開発の初心者にもおすすめです。

    jQueryのセレクタとは

    はじめに、jQueryのセレクタについて概要を抑えておきましょう。「セレクタ」とは、特定の要素を取得するために記述する処理のことです。

    例えば、「ソースコードの1つ目のラジオボタンを選択済みにしたい」という場合、jQueryで$()の括弧内に「操作したい要素名」と「行いたい処理」を記述することで、簡単に動的なページを作成することができます。

    操作したい要素名は、下記のようにHTMLのタグ名やID、クラス名などで指定することができます。

    • ・要素セレクタ(HTMLのタグ名で指定する場合)
    • $(“tag_name”)

    • ・IDセレクタ(IDで指定する場合)
    • $(“#id”)

    • ・クラスセレクタ(クラス名で指定する場合)
    • $(“class_name”)

    ※行いたい処理はこの後ろに[.()]のように指定します。

    これらの処理はHTML側で記述できる場合もあるのですが、jQueryで切り分けて記述した方が見やすいというメリットがあります。そのため、セレクタはjQueryで記述することをおすすめします。

    jQueryのセレクタを実装する

    ここでは、実際にjQueryのセレクタを使ってみたいと思います。
    今回は基本中の基本である、文字の色を変更する処理をセレクタで行っていきます。

    下記のようにコードを記述します。今回はそれぞれ違う色にしたいので、クラス名で指定していきます。
    コード実装例

    そして、ブラウザで実行します。
    実行結果

    少し黄色が見えにくいですが、しっかり文字の色が変更されています。

    システム
    エンジニア
    jQueryのセレクタは、「操作したい要素+行いたい処理」の形でシンプルに記述されていますね。
    プロジェクト
    リーダー
    ソースコードが短いからより見やすいですね。ぜひ、活用してみてください!

    jQueryのセレクタで簡単に動的ページを作成する

    この記事では、jQueryのセレクタの概要から実装方法までを解説していきました。jQueryはソースコードが短く、シンプルな記法となっているため、初心者の方も学習しやすいことがメリットです。基本であるセレクタをマスターして、イメージどおりのWebページを作成してみてください。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job