jQueryのセレクターの使い方【令和版jQuery入門】

今回はjQueryの便利なセレクター機能について書いています。

jQueryのセレクターとは？

jQueryのセレクターは、HTML要素を選択して操作するための重要な機能です。
jQueryはCSSのセレクターと同様のシンタックスを使用して、HTMLドキュメント内の要素を簡単に選択できます。

この機能により、特定の要素に対してスタイルの適用やイベントハンドラの追加、内容の変更などが簡単に行えます。

基本的なセレクター

要素のセレクトに関して、基本的な使い方を書いています。

要素セレクター

要素セレクターは、HTMLタグ名を使って要素を選択します。
例えば、<p>タグを選択するには以下のようにします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>要素セレクターの例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<p>これは段落1です。</p>
<p>これは段落2です。</p>

<script>
    $(document).ready(function() {
        // すべての<p>要素のテキストを変更
        $("p").text("変更されたテキストです。");
    });
</script>

</body>
</html>

解説

このコードでは、$("p")セレクターを使用して、全ての<p>タグを選択しています。
その後、text()メソッドを使って、全ての<p>タグ内のテキストを「変更されたテキストです。」に変更しています。

「$(document).ready()」のタイミングなので、ページが読み込まれると動作します。

動作確認

実行すると、このように<p>タグの中のテキストが書き換わったことが確認できました。

idセレクター

idセレクターは、特定のid属性を持つ要素を選択します。
「#」記号を使ってidを指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>idセレクターの例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<p id="message">これは特定の段落です。</p>

<script>
    $(document).ready(function() {
        // idがmessageの要素のテキストを変更
        $("#message").text("このテキストは変更されました。");
    });
</script>

</body>
</html>

解説

このコードでは、idセレクターを使用して、id属性がmessageの要素を選択しています。
次に、text()メソッドを使ってその要素のテキストを「このテキストは変更されました。」に変更しています。

動作確認

動作を確認すると、idセレクターで要素が取れて「これは特定の段落です。」から「このテキストは変更されました。」に書き換わりました。

classセレクター

classセレクターは、特定のclass属性を持つ要素を選択します。
「.」記号を使ってクラス名を指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>クラスセレクターの例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<p class="highlight">この段落は強調されています。</p>
<p class="highlight">この段落も強調されています。</p>

<script>
    $(document).ready(function() {
        // クラスがhighlightの要素のテキストを変更
        $(".highlight").text("強調されたテキストです。");
    });
</script>

</body>
</html>

解説

このコードでは、classセレクターを使用して、class属性がhighlightの要素を選択しています。
そして、text()メソッドを使ってその要素のテキストを「強調されたテキストです。」に変更しています。

動作確認

動作を確認すると、下記のように指定したclass属性の要素が変わっていることが確認できました。

複合セレクター

jQueryでは、複数のセレクターを組み合わせて使用することができます。

子孫セレクター

子孫セレクターは、特定の要素の中に含まれる他の要素を選択します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子孫セレクターの例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<div class="container">
    <p>この段落はコンテナ内にあります。</p>
</div>

<script>
    $(document).ready(function() {
        // .container内の<p>要素のテキストを変更
        $(".container p").text("コンテナ内の段落です。");
    });
</script>

</body>
</html>

解説

このコードでは、セレクターを使用して、class属性がcontainerの要素内にあるすべての<p>要素を選択しています。
このようにclassセレクターを使用した後に、そのタグ内の子要素をスペースを入れて指定することができます。

その後にtext()メソッドを使って、その<p>要素のテキストを「コンテナ内の段落です。」に変更しています。

同様にして、さらに下の階層の要素を指定することも可能です。
下記のような構造のときに

<div class="container">
    <div id="id_selector">
        <div>テスト</div>
        <p>この段落はコンテナ内にあります。</p>
    </div>
</div>

このように指定すると、「この段落はコンテナ内にあります。」の箇所だけ書き換わります。

$(".container div p").text("コンテナ内の段落です。");

兄弟セレクター

兄弟セレクターは、同じ親要素を持つ要素を選択します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兄弟セレクターの例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<h1>見出し</h1>
<p>見出しの次の段落です。</p>

<script>
    $(document).ready(function() {
        // <h1>要素の次の<p>要素のテキストを変更
        $("h1 + p").text("見出しの次の段落が変更されました。");
    });
</script>

</body>
</html>

解説

このコードでは、セレクターを使用して、<h1>要素の次にある<p>要素を選択しています。
「+」を書くことで、最初に指定した<h1>タグの次に出現する<p>要素を選択しています。

そして、text()メソッドを使ってその要素のテキストを「見出しの次の段落が変更されました。」に変更しています。

例えば、同じセレクタを使ったときに<p>タグが下記のように並んでいた場合は、<h1>要素の次の最初の<p>タグが選択されます。

<h1>見出し</h1>
<p>見出しの次の段落です。</p> <!--- ここだけが書き換わる --->
<p>見出しの次の段落です。</p>
<p>見出しの次の段落です。</p>

属性セレクター

属性セレクターは、特定の属性を持つ要素を選択します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性セレクターの例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<a href="https://example.com">リンク1</a>
<a href="https://another-example.com">リンク2</a>

<script>
    $(document).ready(function() {
        // href属性がhttps://example.comの<a>要素のテキストを変更
        $("a[href='https://example.com']").text("このリンクは変更されました。");
    });
</script>

</body>
</html>

解説

このコードでは、セレクターを使用して、<a>タグのhref属性がhttps://example.com`の`<a>要素を選択しています。
このように、鉤括弧([])を使用して、属性と属性の値まで指定することができます。

そして、text()メソッドを使ってその要素のテキストを「このリンクは変更されました。」に変更しています。

下記は<div>タグのカスタムデータ属性(data-color)を指定している例です。
このようにタグと属性値指定して、要素をセレクトすることができます。

$("div[data-color='red-text']").text("赤文字!!");

フィルターセレクター

フィルターセレクターを使用すると、特定の条件に一致する要素を選択できます。

:firstセレクター

「:first」を使うと、指定したタグの最初に出てくる要素を取得できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:firstセレクターの例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>

<script>
    $(document).ready(function() {
        // 最初の<p>要素のテキストを変更
        $("p:first").text("最初の段落が変更されました。");
    });
</script>

</body>
</html>

解説

このコードでは、セレクターを使用して、最初の<p>要素を選択しています。
<p>タグに:firstをつけることで、一番最初に出てくる<p>タグの要素を取得することができます。

そして、text()メソッドを使ってその要素のテキストを「最初の段落が変更されました。」に変更しています。

:lastセレクター

「:last」を使うと、指定したタグの最後に出てくる要素を取得できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:lastセレクターの例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>

<script>
    $(document).ready(function() {
        // 最後の<p>要素のテキストを変更
        $("p:last").text("最後の段落が変更されました。");
    });
</script>

</body>
</html>

解説

このコードでは、セレクターを使用して、最後の<p>要素を選択しています。
<p>タグに:lastをつけることで、一番最後に出てくる<p>タグの要素を取得することができます。

そして、text()メソッドを使ってその要素のテキストを「最後の段落が変更されました。」に変更しています。

まとめ

jQueryのセレクターを使うことで、HTML要素を簡単に選択して操作することができました。
下記のセレクターを使用することで、Webページ内の特定の要素に対して柔軟に操作を行うことができました。

・要素セレクター
・idセレクター
・classセレクター
・複合セレクター
・属性セレクター
・フィルターセレクター

jQueryを使うときには、セレクターで要素を指定することは必須になるので、しっかり覚えておきましょう。