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

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

投稿日:

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

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

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年07月02日
ユーザーがセレクトボックスの値を変更したタイミングでフォームの送信を実行するという処理を実装する機会があったので、その方法を備忘録として残しておきます。
サムネイル

JSでチェックボックスの全選択全解除を行う方法【すべて選択】

2024年07月02日
フォームのチェックボックスの数が多いときにあると便利な、ワンクリックで全選択や全解除できる機能をJavaScriptで作る機会があったので、その方法を備忘録として残します。
サムネイル

JSで配列の重複チェックを行う【Setオブジェクトを利用】

2024年07月02日
JavaScriptで配列の中に重複する値が存在するか判定したい状況があり、その時に調べたことを備忘録として残しておきます。今回は単純に重複しているかどうかだけ分かればよかったので、「Setオブジェクト」を使って重複チェックを行う方法を選びました。
サムネイル

JSのkeyup・keydown・keypressの違い【キ……

2024年06月13日
JavaScriptの「keyup」「keypress」「keydown」はいずれもユーザーのキーボードイベントを処理したい時に使用します。それぞれ処理が発火するタイミングなどに違いがあるので、用途に応じた使い分けが必要です。
サムネイル

JSでテキストボックスに入力された値を即時取得する【this……

2024年06月13日
ユーザーがinputのテキストボックスに入力した値をJavaScriptを使って即時取得して処理させたい状況がありましたので、その方法を備忘録として残しておきます。
サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。