• HOME > 
  • JavaScript > 
  • jQueryのセレクターの種類と使い方【初心者にもわかりやす...

jQueryのセレクターの種類と使い方【初心者にもわかりやすく解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2022年03月05日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

jQueryのセレクターとは?

jQueryのセレクターとは、操作したいHTML要素の特定に使うものです。

基本的な考え方はCSSのセレクターと変わりません。

jQueryの場合は、セレクタ―で指定した要素に対して、メソッドを使ってスタイルを変更したり、値を取得したり、テキストを書き換えるなど様々な操作を行うことができます。

リンク先のサムネイル
CSSのセレクターとは?

CSSのセレクタ―は、スタイルを適用させたいHTML要素の特定に使います。セレクタ―を使ってスタイルを指定することで、同じスタイルを使いまわしたり一部分にだけ違うスタイルを適用させることが可能になります...【もっと読む】

基本の記述の仕方

jQueryのセレクターは、「$("セレクター名")」というように記述します。CSSと同じく、HTMLタグやクラス名、IDなどがセレクターとして使うことができます。

例えばメソッドを使う場合や変数にする場合はそれぞれ以下のように記述します。

jQuery

//メソッドで操作する場合
$("div").css({
    "background":"#f9f9f9",
});
//変数にする場合
var target = $("span");

jQueryのセレクターの種類と使い方

jQueryのセレクターには、HTMLのタグをはじめとして、クラス名やID、属性を使用することができます。要素の親子関係を利用してセレクターとして指定することも可能です。

また、jQueryを使うとHTMLを操作してクラスやIDの変更や削除、追加を行うことが可能ですが、その操作によって後から変更したクラスやIDもセレクターとして使用することができます。

タグを使う

「div」や「p」などのHTMLタグをセレクターとして使用します。

タグをセレクターに使用すると、同じタグの要素全てを一括で操作することができます。

HTML

<div>ダミーテキスト1</div>
<div>ダミーテキスト2</div>
<div>ダミーテキスト3</div>
<div>ダミーテキスト4</div>
<div>ダミーテキスト5</div>

jQuery

$("div").css({
    "background":"#d40000",
});

プレビュー

ダミーテキスト1
ダミーテキスト2
ダミーテキスト3
ダミーテキスト4
ダミーテキスト5

クラスを使う

HTMLで要素に付与したクラス名をセレクターとして使用します。

クラスをセレクターに使用すると、同じクラス名を持つ要素をまとめて操作することができます。

CSSと同様に、クラス名の前に「.」(ドット)を付けて記述します。

HTML

<div>ダミーテキスト1</div>
<div class="target">ダミーテキスト2</div>
<div>ダミーテキスト3</div>
<div class="target">ダミーテキスト4</div>
<div>ダミーテキスト5</div>

jQuery

$(".target").css({
    "background":"#d40000",
});

プレビュー

ダミーテキスト1
ダミーテキスト2
ダミーテキスト3
ダミーテキスト4
ダミーテキスト5

IDを使う

HTMLで要素に付与したIDをセレクターとして使用します。

IDをセレクターに使用すると、そのIDを持つ要素のみを操作することができます。

CSSと同様に、クラス名の前に「#」(シャープ)を付けて記述します。

HTML

<div>ダミーテキスト1</div>
<div id="target_2" class="target">ダミーテキスト2</div>
<div>ダミーテキスト3</div>
<div class="target">ダミーテキスト4</div>
<div>ダミーテキスト5</div>

jQuery

$("#target_2").css({
    "background":"#d40000",
});

プレビュー

ダミーテキスト1
ダミーテキスト2
ダミーテキスト3
ダミーテキスト4
ダミーテキスト5

属性を使う

属性とは、aタグの「href="###"」の部分やinputタグの「type="text"」などの部分のことを指します。

セレクター全体を「"」で囲んでいる場合は属性の値は「'」で囲みます。(反対にセレクター全体を「'」で囲んでいるのであれば、属性の値は「""」で囲むようにしてください。)

前述したクラスやIDも属性のひとつなので、「div[class='target']」という書き方でも指定することができます。

属性セレクターは、前方一致や後方一致といった指定の方法が使えるということが特徴です。

前方一致を使う

ある属性の最初が特定の文字列と一致する要素を指定したい場合は、属性と文字列を「^=」で結びます。

次の例ではIDが「shi」で始まる要素を指定しているので、「shinjuku-ku」「shibuya-ku」のみが操作対象になります。

HTML

<div id="sample_zokusei1" class="sample_zokusei">
    <div id="shinjuku-ku">新宿区</div>
    <div id="shibuya-ku">渋谷区</div>
    <div id="toshima-ku">豊島区</div>
    <div id="yokomaha-shi">横浜市</div>
    <div id="saitama-shi">さいたま市</div>
</div>

jQuery

$("#sample_zokusei1 div[id^='shi']").css({
    "color":"#d40000",
});

プレビュー

新宿区
渋谷区
豊島区
横浜市
さいたま市

後方一致を使う

ある属性の末尾が特定の文字列と一致する要素を指定したい場合は、属性と文字列を「$=」で結びます。

次の例ではIDが「shi」で終わる要素を指定しているので、「yokohama-shi」「saitama-shi」のみが操作対象になります。

HTML

<div id="sample_zokusei2" class="sample_zokusei">
    <div id="shinjuku-ku">新宿区</div>
    <div id="shibuya-ku">渋谷区</div>
    <div id="toshima-ku">豊島区</div>
    <div id="yokomaha-shi">横浜市</div>
    <div id="saitama-shi">さいたま市</div>
</div>

jQuery

$("#sample_zokusei2 div[id$='shi']").css({
    "color":"#d40000",
});

プレビュー

新宿区
渋谷区
豊島区
横浜市
さいたま市

部分一致を使う

ある属性が特定の文字列を含んでいる要素を指定したい場合は、属性と文字列を「*=」で結びます。

次の例では、どの要素のIDにも「shi」という文字列が含まれているので、全てが対象になります。

HTML

<div id="sample_zokusei3" class="sample_zokusei">
    <div id="shinjuku-ku">新宿区</div>
    <div id="shibuya-ku">渋谷区</div>
    <div id="toshima-ku">豊島区</div>
    <div id="yokomaha-shi">横浜市</div>
    <div id="saitama-shi">さいたま市</div>
</div>

jQuery

$("#sample_zokusei3 div[id*='shi']").css({
    "color":"#d40000",
});

プレビュー

新宿区
渋谷区
豊島区
横浜市
さいたま市

不一致を使う

ある属性に特定の値を持たない要素のみを指定したい場合は、属性と値を「!=」で結びます。

下の例では、IDが「toshima-ku」以外の要素が操作対象になります。

HTML

<div id="sample_zokusei4" class="sample_zokusei">
    <div id="shinjuku-ku">新宿区</div>
    <div id="shibuya-ku">渋谷区</div>
    <div id="toshima-ku">豊島区</div>
    <div id="yokomaha-shi">横浜市</div>
    <div id="saitama-shi">さいたま市</div>
</div>

jQuery

$("#sample_zokusei4 div[id!='toshima-ku']").css({
    "color":"#d40000",
});

プレビュー

新宿区
渋谷区
豊島区
横浜市
さいたま市

要素の親子関係を使う

要素の親子関係をセレクターに使用するには、親要素のセレクターの後ろに半角スペースを空けて子要素のセレクターを記述します。

下の例では、sample_parent1の子要素のdivのみ操作しています。

HTML

<div id="sample_parent1" class="sample_parent">
    <div class="sample_child">ダミーテキスト1</div>
    <div class="sample_child">ダミーテキスト2</div>
</div>
<div class="sample_child">ダミーテキスト3</div>
<div class="sample_child">ダミーテキスト4</div>
<div class="sample_child">ダミーテキスト5</div>

jQuery

$("#sample_parent1 div").css({
    "color":"#d40000",
});

プレビュー

ダミーテキスト1
ダミーテキスト2
ダミーテキスト3
ダミーテキスト4
ダミーテキスト5

直下の子要素のみを指定する

親子関係にある要素同士を「>」を使って結ぶと、親要素の直下にある子要素のみ指定することができます。

下の例では、ダミーテキスト1とダミーテキスト2は直下の子要素ではないため操作の対象になりません。

HTML

<div id="sample_parent2" class="sample_parent">
    <div>
        <div class="sample_child">ダミーテキスト1</div>
        <div class="sample_child">ダミーテキスト2</div>
    </div>
    <div class="sample_child">ダミーテキスト3</div>
    <div class="sample_child">ダミーテキスト4</div>
    <div class="sample_child">ダミーテキスト5</div>
</div>

jQuery

$("#sample_parent2 > .sample_child").css({
    "color":"#d40000",
});

プレビュー

ダミーテキスト1
ダミーテキスト2
ダミーテキスト3
ダミーテキスト4
ダミーテキスト5

直後の要素を指定する

「+」(プラス)を使うと直後に隣接した要素だけを指定することができます。

下の例では、「#sample_child2」の直後のdivであるダミーテキスト3のみを操作しています。

HTML

<div id="sample_parent3" class="sample_parent">
    <div class="sample_child">ダミーテキスト1</div>
    <div id="sample_child2" class="sample_child">ダミーテキスト2</div>
    <div class="sample_child">ダミーテキスト3</div>
    <div class="sample_child">ダミーテキスト4</div>
    <div class="sample_child">ダミーテキスト5</div>
</div>

jQuery

$("#sample_child2 + div").css({
    "color":"#d40000",
});

プレビュー

ダミーテキスト1
ダミーテキスト2
ダミーテキスト3
ダミーテキスト4
ダミーテキスト5

以降の要素を指定する

「~」を使うと以降に続く要素を指定することができます。

「+」との違いは隣接していないものも対象になるという点です。

下の例では、「#sample_child1」以降にある「.sample_child」クラスを持つ要素を指定しています。ダミーテキスト3にはクラスが無いので操作されませんが、それ以降でも該当するものは対象になっています。

HTML

<div id="sample_parent4" class="sample_parent">
    <div id="sample_child1" class="sample_child">ダミーテキスト1</div>
    <div class="sample_child">ダミーテキスト2</div>
    <div>ダミーテキスト3</div>
    <div class="sample_child">ダミーテキスト4</div>
    <div class="sample_child">ダミーテキスト5</div>
</div>

jQuery

$("#sample_child1 ~ .sample_child").css({
    "color":"#d40000",
});

プレビュー

ダミーテキスト1
ダミーテキスト2
ダミーテキスト3
ダミーテキスト4
ダミーテキスト5

複数の要素をセレクターにする

異なる複数の要素をまとめてセレクターとして指定したい場合は、「,」(カンマ)で区切って記述します。

HTML

<div id="target_A">ダミーテキストA</div>
<div id="target_B">ダミーテキストB</div>
<div id="target_C">ダミーテキストC</div>
<div id="target_D">ダミーテキストD</div>
<div id="target_E">ダミーテキストE</div>

jQuery

$("#target_A,#target_B").css({
    "background":"#d40000",
});

プレビュー

ダミーテキストA
ダミーテキストB
ダミーテキストC
ダミーテキストD
ダミーテキストE

入力状態をセレクターにする

フォームなどでユーザーの入力状態に応じて操作したい場合などに使用します。

セレクターの後ろに「:」(ダブルコロン)を付けて状態を指定します。

チェックされた状態

チェックボックスがチェックされた状態の要素を指定するときは、「:checked」を使います。

下の例では、チェックボックスに隣接するspanの色が変わるようにしています。

HTML

<div id="selector_checked" class="selector_pre">
    <div id="checked_count">チェックの数は「<span>0</span>個」です。</div>
    <input type="checkbox"><span>東京</span>
    <input type="checkbox"><span>埼玉</span>
    <input type="checkbox"><span>神奈川</span>
</div>

jQuery

$("input[type='checkbox']").on("change",function(){
    var checkedCount = $("input[type='checkbox']:checked").length;
    $("#checked_count span").text(checkedCount);
});

プレビュー

チェックの数は「0個」です。
東京 埼玉 神奈川

this

「this」はCSSにはないセレクターの指定の方法になります。

ユーザーのアクションに応じて操作する要素を特定することができます。

下の例では、thisをセレクターにすることでクリックした要素だけ操作しています。

HTML

<div class="sample_button">ボタン1</div>
<div class="sample_button">ボタン2</div>
<div class="sample_button">ボタン3</div>

jQuery

$(function(){
    $(".sample_button").on("click",function(){
        $(".sample_button").removeClass("active");//一旦全てのactiveを除去
        $(this).addClass("active");//クリックされた要素にだけactiveを付与
    });
});//end function

プレビュー

どれかをクリックしてください。
ボタン1
ボタン2
ボタン3

jQueryでは疑似要素はセレクターに使用できない

疑似要素はCSSだけで作り出してスタイルを設定できる要素で、主にアイコンを表示するなど装飾目的で使用されます。「before」と「after」が代表的な疑似要素です。

疑似要素はサイトのデザインを作るうえで欠かせませんが、jQueryでは他のセレクターと同様に指定しても、直接操作することができません

下の例では、ボタンクリックで疑似要素の表示非表示を切替ようとしていますがjQueryで疑似要素は操作できないので、何も起きません。

HTML

<div id="sample_giji1" class="sample_giji">クリックしてください</div>

CSS

.sample_giji::before{
    content:"疑似要素";
    display: inline-block;
    background:#d40000;
    color:#fff;
    border-radius: 5px;
    padding: 5px;
}

jQuery

$("#sample_giji1").on("click",function(){
    $("#sample_giji1:before").css({
        "display":"none",
    });
});

プレビュー

疑似要素を操作できない例
クリックしてください

jQueryで疑似要素を操作する方法

サイトのデザインを作る上で疑似要素は多用しますので、jQueryで操作したい状況も訪れます。

解決策として、元となる要素にクラスを追加したり削除することで疑似要素のスタイルを変更するという方法があります。

今回は「toggleClass」メソッドを使用して、「sample」クラスに対して新たに「hide」というクラスを付与します。

CSS側では、最初に作った「sample」の疑似要素の他に「hide」の疑似要素のスタイルとして「display:none」を指定しておきます。

toggleClassメソッドはクリックするたびにクラスの付け外しが行われるので、クラスが追加されたときは非表示、クラスが外されたときは元通り表示されるという挙動を実現できます。

HTML

<div id="sample_giji2" class="sample_giji">クリックしてください</div>

CSS

.sample_giji::before{
    content:"疑似要素";
    display: inline-block;
    background:#d40000;
    color:#fff;
    border-radius: 5px;
    padding: 5px;
}
/*疑似要素を操作*/
#sample_giji2.hidden:before{
    display: none;
}

jQuery

$("#sample_giji2").on("click",function(){
    $("#sample_giji2").toggleClass("hidden");
});

プレビュー

疑似要素を操作できる例
クリックしてください

疑似クラスhoverを操作する場合

疑似クラスのhoverもjQueryでは操作できませんが、同様の方法を使えばスタイルの変更を行うことができます。

なお、マウスホバーに関してはjQueryのmouseoverメソッドなどを使ってCSSを操作することが可能です。

まとめ

jQueryはユーザーのアクションに応じて処理を行うことがほとんどです。処理が分岐されたときに操作したい要素を特定するためには、適したセレクターの記述方法を使い分ける必要があります。

広告
広告

関連する記事

サムネイル

JSでビデオやピクチャが現在どのソース要素を表示しているか取……

2024年11月07日
表示中のsource要素のファイルパスをJSで取得したい picture要素(video)要素とsource要素を使って画像(動画)を表示させている時に、Jav […]
サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]