jQueryの全セレクタのまとめ「完全マスター辞典！」

2021年1月21日

jQueryのセレクタは数がお多いので、ひと通りまとめられたものが見たい！

確かに数が多いが、普段良く使うものは限られているだろう。全部一気に覚えようとせずに、使うものから順番に覚え、その都度この記事で調べれば良いのだ！

jQueryの学習に欠かせない「セレクタ」。jQueryのセレクタは、CSSのセレクタを応用したものが多いので理解しやすいが、なにせ種類が多いので、ベテランの人でも以外と知らないセレクタもあったりする。

今回はjQueryで使えるほぼ全部のセレクタを網羅して、例文も添えてまとめた。「セレクタの辞典」としてブックマークして、その都度調べながらじっくり学んでいこう！

できるだけ早くWEBデザイン・プログラミングスキルを習得し、すぐに仕事を始めたい方は、コスパの良いスクールの受講がオススメなので、実際私がスクールを受講した体験を踏まえたおすすめのスクールをご参考に↓

▶ 現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！

現役デザイナーが実際にスクールを２校受講した経験を元に徹底比較調査した、WEBデザインスクールランキング！まず最初に実際…

ちなみにクリエイターの方に朗報！「Adobe CCコンプリートプラン1年版」が約45%OFFでちゃんとした正規方法で購入できる！実際私も３年連続購入しているのでこちらの体験記事を読んでおいて損はない↓

▶ Adobe Creative Cloud [54%OFF]学生価格で｢社会人｣が安く買う方法！(コンプリートプラン)

AdobeCreativeCloudのコンプリートプランが高すぎる！もっと安く買う方法をないかな？AdobeCC（…

jQueryのセレクタとは

jQueryの文法をおさらいすると、jQueryは基本形として「いつ・何を・どうする」という形式で書く必要がある。

このうちjQueryのセレクタとは、「何を」にあたる部分を指す。つまり、操作する「対象物」を指定するのが「セレクタ」である。

セレクタの基本構文

jQueryのセレクタの基本構文のスタイルは＄("セレクタ")の形式で表現され、""（もしくは''）の内側に記述するスタイルで、中身はCSSのセレクタと似た形式で指定するので、CSSが理解できている人であれば、全然むずかしくはない！

簡単な例で言うと「要素セレクタ」はHTMLタグをそのまま記述記述し$("p")は「pタグ」を指定するセレクタの書き方。その他IDやクラスなど様々なセレクタを使って指定するので、順番に学んでいこう。

要素セレクタ

$("要素名")シンプルにHTMLタグを記述するセレクタで$("p")$("ul")$("div")などのように指定する。

簡単な例を$("p")というセレクタを使った例で見てみよう。

HTML

<div>
 <h2>H2タイトル</h2>
 <p>P要素の色が変わる</p>
</div>
<p>P要素の色が変わる</p>

jQuery

$(function(){
 $("p").css("color","orange");
});

このjQueryの記述は「HTMLが読み込まれると同時にp要素の色をオレンジ色に変える」という命令文になっている。

ブラウザ表示

H2タイトル

P要素の色が変わる

ここでは、h2の色は変わっていないが、p要素の色は全てオレンジ色になっているのがわかる。このように$("p")というセレクタを記述する事で「p要素全て」に対して、なんらかの処理を施す事ができるのだ。

IDセレクタ

その名の通り$("#ID名")の形式で「#ID名」で指定するセレクタ。ID名は任意なので決まりは無いが、よくあるID名で例を出すと$("#content")や$("#nav")などの指定の仕方になる。

クラスセレクタ

$(".クラス名")こちらもIDと同様に、クラス名で指定するセレクタ。よくある例で言うと$(".current")や$(".hover")という形で指定。

グループセレクタ

グループセレクタというのは、特定のセレクタを指すのではなく、$("A , B")のような形式でセレクタを「,（カンマ）」区切りで複数まとめて記述して、同じメソッドを適用させる方法。

たとえば$("span , strong")のように記述する事で、<span>と<strong>要素を指定する事ができる。

HTML

<ul>
 <li><a href="#">色が変わらない</a></li>
 <li><span>色が変わる</span></li>
 <li><strong>色が変わる</strong></li>
 <li>色が変わらない</li>
</ul>

jQuery

$(function(){
 $("span , strong").css("color","orange");
});

ブラウザ表示

色は変わらない
色が変わる
色が変わる
色は変わらない

子孫セレクタ

$("#content p")のように、複数のセレクタを「スペース」で区切る事で、特定の要素の内側にある要素を絞り込む事ができる。

HTML

<div id="content">
 <p>P要素の色が変わる</p>
</div>
<p>色は変わらない</p>

jQuery

$(function(){
 $("#content p").css("color","orange");
});

ブラウザ表示

P要素の色が変わる

色は変わらない

上記の例でわかるように#contentの中にあるpには適用されるが、外側にあるpには適用されていない点がポイント。

直下の子要素セレクタ

$("li > a")のように、特定の要素の直下にある要素を>で区切る形式で指定する事で、直下の子要素を絞り込むセレクタ。

HTML

<ul>
 <li><a href="#">色が変わる</a></li>
 <li><span><a href="#">色は変わらない</a></span></li>
</ul>

jQuery

$(function(){
 $("li > a").css("color","orange");
});

ブラウザ表示

色が変わる
色は変わらない

隣接セレクタ

$("#first + li")のように記述する事で、特定の要素の「次に存在する要素だけ」を選択できるのが「隣接セレクタ」。要素を+で区切る形式で指定する。

HTML

<ul>
 <li class="first">色は変わらない</li>
 <li class="second">色が変わる</li>
 <li class="third">色は変わらない</li>
 <li class="fourth">色は変わらない</li>
</ul>

jQuery

$(function(){
 $("#first + li").css("color","orange");
});

ブラウザ表示

色は変わらない
色が変わる
色は変わらない
色は変わらない

この場合$("#first + li")で「#first（１番目）の要素の次のli」という指定となり、２番目のli要素が選択されることになる。

間接セレクタ

$("#second ~ li")のように記述し、特定の要素の後（それ以降）の要素を選択できるのが「間接セレクタ」で、要素を~（チルダ）で区切る形式で指定する。

HTML

<ul>
 <li class="first">色が変わらない</li>
 <li class="second">色は変わらない</li>
 <li class="third">色が変わる</li>
 <li class="fourth">色が変わる</li>
</ul>

jQuery

$(function(){
 $("#second ~ li").css("color","orange");
});

ブラウザ表示

色は変わらない
色は変わらない
色が変わる
色が変わる

この場合$("#second ~ li")と記述する事で、2番目の要素の後（それ以降）に出現するli要素が選択されるので、３番目と４番目のliが選択される事になる。

ユニバーサルセレクタ

すべての要素を選択できる「ユニバーサルセレクタ」は*（アスタリスク）を記述する事で指定できる。

たとえば子孫セレクタと組み合わせて$("li *")のように記述する事で、liの中にある「全て子要素」を選択できる。

HTML

<ul>
 <li><a href="#">色が変わる</a></li>
 <li><span>色が変わる</span></li>
 <li><strong>色が変わる</strong></li>
 <li>色が変わらない</li>
</ul>

jQuery

$(function(){
 $("li *").css("color","orange");
});

ブラウザ表示

色が変わる
色が変わる
色が変わる
色は変わらない

$("li *")と指定する事で、liの中にある「全ての子要素」が指定され、この場合liの中にある<a>と<span>と<strong>が適用される事になり、子要素を持たない4番目のliは選択されていない。

first-child疑似クラス

特定の要素が複数存在する中で$("セレクタ:first-child")の形式で指定する事で、指定したセレクタの中の「最初の子要素」を選択するのが「first-child擬似クラス」である。

１点「勘違いしやすい」ポイントがあるので解説すると、「最初の子要素」という部分で、１ページの中で最初のたったひとつの子要素という意味ではなく「親要素の中の最初の子要素」である点に注意して例を見ていこう！

HTML

<section>
 <p>sectionの中の「最初のP」</p>
 <p>２番目のP</p>
 <p>３番目のP</p>
</section>
<section>
 <p>sectionの中の「最初のP」</p>
 <p>２番目のP</p>
 <p>３番目のP</p>
</section>
<div>
 <p>DIVの中の「最初のP」</p>
 <p>２番目のP</p>
</div>

jQuery

$(function(){
 $("section p:first-child").css("color","orange");
});

ブラウザ表示

sectionの中の「最初のP」

２番目のP

３番目のP

sectionの中の「最初のP」

２番目のP

３番目のP

DIVの中の「最初のP」

２番目のP

これは、わりと実践的な例で$("section p:first-child")と記述する事で、sectionの中の「最初のp」だけ抽出するという例になる。１番目のsectionの中にある「最初のp」と、２回目に出てくるsectionの中の「最初のp」も両方とも選択されるが、divの中の「最初のp」は選択されないという応用的な例だ。

last-child擬似クラス

$("セレクタ:last-child")と記述し、前項のfirst-child擬似クラスが「最初の子要素」だったのに対して、last-child擬似クラスは「最後の子要素」を指定するセレクタ。それ以外は基本的に同じなので、例を見ていこう。

HTML

<section>
 <p>１番目のP</p>
 <p>２番目のP</p>
 <p>sectionの中の最後のP</p>
</section>
<section>
 <p>１番目のP</p>
 <p>２番目のP</p>
 <p>sectionの中の最後のP</p>
</section>
<div>
 <p>１番目のP</p>
 <p>２番目のP</p>
 <p>DIVの中の最後のP</p>
</div>

jQuery

$(function(){
 $("p:last-child").css("color","orange");
});

ブラウザ表示

１番目のP

２番目のP

sectionの中の「最後のP」

１番目のP

２番目のP

sectionの中の「最後のP」

１番目のP

２番目のP

DIVの中の「最後のP」

このように親要素の中の「最後の子要素」が選択される事になる。（※前項の「first-child擬似クラス」の時の例と違い、親要素は指定していないので、setionもDIVも両方の最後の子要素全てが選択されている。）

nth-child擬似クラス

$("li:nth-child(2)")のように記述し、特定の要素の指定した「番号」の順番に存在する要素。（nth-childはCSS3のセレクタなので、javaScriptのように0から数えるのではなく、数字通りの順番でOKだ。）

また番号だけでなく「偶数」$("li:nth-child(even)")や「奇数」$("li:nth-child(odd)")や３の倍数番目$("li:nth-child(3n)")などの記述の仕方も可能。

ではnth-childの具体例を見ていこう。

HTML

<ul>
 <li>１番目</li>
 <li>２番目</li>
 <li>３番目</li>
 <li>４番目</li>
</ul>
<ul>
 <li>１番目</li>
 <li>２番目</li>
 <li>３番目</li>
 <li>４番目</li>
</ul>

jQuery

$(function(){
 $("li:nth-child(2)").css("color","orange");
});

ブラウザ表示

１番目
２番目
３番目
４番目

１番目
２番目
３番目
４番目

この場合$("li:nth-child(2)")で、li要素の中のliの親要素から見た２番目の子要素が選択されるので、最初のulの中の２番目のliと、次のulの中の２番目のliと、二つが選択される事になる。

only-child擬似クラス

$("li span:only-child")のように記述し、特定の要素が１つだけ含まれる場合に選択されるセレクタ。逆に２つ以上存在する場合は、選択対象とならない。

only-childの具体例を見ていこう。

HTML

<ul>
 <li>色が変わらない</li>
 <li><span>色が変わる</span></li>
 <li><span>色が変わらない</span><span>色が変わらない</span></li>
 <li>色が変わらない</li>
</ul>

jQuery

$(function(){
 $("li span:only-child").css("color","orange");
});

ブラウザ表示

色は変わらない
色が変わる
色は変わらない色は変わらない
色は変わらない

このようにliの子要素にspanが１つの場合に選択され、liの子要素のspanが複数ある場合は選択されない。

empty擬似クラス

$("li:empty")のように記述し、子要素やテキストを含まない要素、つまり空の要素を選択する事ができる。

HTML

<table>
  <tr>
    <td>A</td>
    <td>B</td>
    <td></td>
    <td>D</td>
  </tr>
</table>

jQuery

$(function(){
  $("td:empty").css("background-color","#ffeeee")
});

ブラウザ表示

このように、tdの中が「空の要素」だけが選択されて背景色が変わった。

CSSの属性セレクタ

$("[id]")のように記述し、特定の属性を持つ要素を選択できる。

特定の属性値

属性だけではなく、$("[id='main']")のように記述して、指定した属性値を持つ要素を選択する事もできる。

特定の属性値をもたない

逆に$("[class!='on']")のように記述して、特定の属性値を持たない要素を選択する事もできる。

特定の属性値が指定の文字で「始まる」要素

$("[class^='f']")のように記述し、特定の属性値が「指定の文字で始まる」要素を選択する事もできる。

特定の属性値が指定の文字で「終わる」要素

$("[class$='d']")のように記述し、特定の属性値が「指定の文字で始まる」要素を選択する事もできる。

特定の属性値が指定の文字を「含んでいる」要素

$("[class*='day']")のように記述し、特定の属性値が「指定の文字を含んでいる」要素を選択する事もできる。

複数の属性セレクタを同時に指定

$("[class^='f'][class*='day']")のように記述し、複数の条件を満たす要素を選択する事もできる。

firstフィルター

$("li:first")のように記述し、指定したセレクタの中で最初に登場した要素だけを選択する事ができる。

$("li:first-child")との違いは、first-childは親要素から見た最初の子要素であり、ページ内に別の親要素と指定要素のセットがあれば、その中の最初の子要素も選択されるのに対し、firstフィルターは、ページ内で最初に登場した要素だけが選択される。

firstフィルターを、実例で見ていこう。

HTML

<section>
 <p>１番目のP</p>
 <p>２番目のP</p>
 <p>３番目のP</p>
</section>
<section>
 <p>４番目のP</p>
 <p>５番目のP</p>
 <p>６番目のP</p>
</section>

jQuery

$(function(){
 $("p:first").css("color","orange");
});

ブラウザ表示

１番目のP

２番目のP

３番目のP

４番目のP

５番目のP

６番目のP

このように、ページ内に最初に登場したpだけが選択されている事がわかる。

lastフィルター

$("li:last")のように記述し、指定したセレクタの中で最後に登場した要素だけを選択する事ができる。

$("li:last-child")との違いは、last-childは親要素から見た最後の子要素であり、ページ内に別の親要素と指定要素のセットがあれば、その中の最後の子要素も選択されるのに対し、lastフィルターは、ページ内で最後に登場した要素だけが選択される。

lastフィルターを、実例で見ていこう。

HTML

<section>
 <p>１番目のP</p>
 <p>２番目のP</p>
 <p>３番目のP</p>
</section>
<section>
 <p>４番目のP</p>
 <p>５番目のP</p>
 <p>６番目のP</p>
</section>

jQuery

$(function(){
 $("p:last").css("color","orange");
});

ブラウザ表示

１番目のP

２番目のP

３番目のP

４番目のP

５番目のP

６番目のP

このように、ページ内に最後に登場したpだけが選択されている事がわかる。

evenフィルター（偶数）

$("p:even")のように記述し、指定した要素がページ内で「偶数」番目に登場したものが選択される。ただし、Javascriptの世界では数字は0から数えるので、最初の要素は「0」その次が「１」という数え方になり、偶数は「0番目、２番目、４番目、６番目・・・」奇数は「1番目、３番目、５番目」となる。

また$("p:nth-child(even)")との違いは、nth-child(even)は親要素の中の偶数番目と数えるのに対し、evenフィルターは、ページ全体の中の偶数番目と数える。

evenフィルターの例を見ていこう！

HTML

<section>
 <p>０番目のP</p>
 <p>１番目のP</p>
 <p>２番目のP</p>
</section>
<section>
 <p>３番目のP</p>
 <p>４番目のP</p>
 <p>５番目のP</p>
</section>

jQuery

$(function(){
 $("p:even").css("color","orange");
});

ブラウザ表示

０番目のP

１番目のP

２番目のP

３番目のP

４番目のP

５番目のP

このように、$("p:even")でページ内に登場したpの中で偶数である「0番目、２番目、４番目」のpが選択されている。

oddフィルター（奇数）

$("p:odd")のように記述し、指定した要素がページ内で「奇数」番目に登場したものが選択される。

ただし、Javascriptの世界では数字は0から数えるので、最初の要素は「0」その次が「１」という数え方になり、奇数は「1番目、３番目、５番目」となり、偶数は「0番目、２番目、４番目、６番目・・・」となる点に注意。

eqフィルタ

$("li:eq(2)")のように記述し、指定した番号の要素を選択する事ができる。

ただし、Javascriptの世界では数字は0から数える点に注意しておこう。

gtフィルター（greater than）

$("li:gt(2)")のように記述し、指定した数字の順番より「後」の要素（指定した順番は含まず）を選択する事ができる。

ltフィルター（less than）

$("li:lt(2)")のように記述し、指定した数字の順番より「前」の要素（指定した順番は含まず）を選択する事ができる。

headerフィルター

$(":header")のように記述し、h1〜h6までのheading要素をまとめて選択できるフィルターだ。

containsフィルター

$("li:contains('文字列')")のように記述し、特定の「文字列」が含まれる要素を選択できる。

hasフィルター

$("li:has('div')")のように記述し、特定の「要素」が含まれる要素を選択できる。

parentフィルター

$("li:parent")のように記述し、何らかの「子要素」や「テキスト」を含む要素を選択できる。つまり空ではない要素という意味となり「empty擬似クラス」と逆のフィルターと言える。

animatedフィルター

$("div:animated")のように記述し、アニメーションしている要素を選択できる。

どういう時に使うかというと、例えば下の例のように、クリックすると開くアコーディオンのようなものを作る時

HTML

<p class="button">ボタン</p>
<ul class="menu">
 <li>メニュー１</li>
 <li>メニュー２</li>
 <li>メニュー３</li>
</ul>

次のように開閉させるアコーディオンの部分を$(".nav")だけで記述してしまうと、アニメーションしている最中に「ボタンを連打」した時に、連打した数だけ空いたり開いたりのアニメーションが続いてしまう。

jQuery

$(".button").click(function () {
   $(".nav").slideToggle(300);
});

しかし、次のように.not()と組み合わせて $(".nav:not(:animated)")とする事で、「アニメーションしていない.nav」を選択できるので、アニメーションしている最中に連打しても１度しか開閉が行われない。

jQuery

$(".button").click(function () {
   $(".nav:not(:animated)").slideToggle(300);
});

:inputフィルター

$(":input")のように記述する事で、全てのフォーム部品である「input要素、textarea要素、select要素、button要素」を選択できる。

フォームがアクティブな状態のものだけ、色を変えるといった場合に使える。

:textフィルター

$(":text")のように記述し、input要素の中でtype属性に「text」が設定されている要素（１行テキスト）を選択する事ができる。

:passwordフィルター

$(":password")のように記述し、input要素の中でtype属性に「password」が設定されている要素（パスワード入力フォーム）を選択する事ができる。

:radioフィルター

$(":radio")のように記述し、input要素の中でtype属性に「radio」が設定されている要素（ラジオボタン）を選択する事ができる。

:checkboxフィルター

$(":checkbox")のように記述し、input要素の中でtype属性に「checkbox」が設定されている要素（チェックボックス）を選択する事ができる。

:submitフィルター

$(":submit")のように記述し、input要素の中でtype属性に「submit」もしくは「image」が設定されている要素（送信ボタン）を選択する事ができる。

:imageフィルター

$(":image")のように記述し、input要素の中でtype属性に「image」が設定されている要素（送信ボタン）だけを選択する事ができる。

:resetフィルター

$(":reset")のように記述し、input要素の中でtype属性に「reset」が設定されている要素（リセットボタン）だけを選択する事ができる。

:buttonフィルター

$(":button")のように記述すると、button要素が選択できる。

:fileフィルター

$("")のように記述し、input要素の中でtype属性に「file」が設定されている要素（ファイル選択フォーム）を選択する事ができる。

:checkedフィルター

$(":checked")のように記述し、ラジオボタンやチェックボックスの中で、チェックが入っている要素だけを選択する事ができる。

:selectedフィルター

$(":selected")のように記述し、セレクトボックスで選択されている要素だけを選択する事ができる。

jQueryのセレクタのまとめ

jQueryには便利なセレクタが用意されており、だいたいひと通りの要素を選択する事ができる。

jQueryのセレクタは数が多いので、全部一気に覚えようとせず、最初はよく使うものだけを使いながら、こちらの記事をブックマークしておいて分からないセレクタが出てきたら、その都度調べて使うといった程度で徐々に覚えていけば良いだろう。

セレクタある程度使えるようになってきたら、次はメソッドについて学んでいこう！

▶ jQueryの「メソッド一覧」と使い方

jQueryの沢山あるメソッドの一覧を解説してほしいjQueryのメソッド一覧を確認して、jQueryを自由に操れるよ…

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント