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

.NET開発者のためのブログメディア

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

SE: 自作のWebサイトでjQueryを使ってみたいです。

PL: jQueryはソースコードが比較的短くできるため、開発がしやすいですよ。特にWeb開発の初心者にもおすすめです。

jQueryのセレクタとは

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

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

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

・要素セレクタ（HTMLのタグ名で指定する場合）

$(“tag_name”)

・IDセレクタ（IDで指定する場合）

$(“#id”)

・クラスセレクタ（クラス名で指定する場合）

$(“class_name”)

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

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

jQueryのセレクタを実装する

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

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

<!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>