jQueryで何かしたい時にまずセレクタで該当要素を指定すると思いますが、要素にidやclassがついていなくても特定の条件を持つ要素として指定できたり、奇数・偶数・n番目の要素を指定できたりと、セレクタには様々な指定方法があります。
ただ中には利用頻度が低くていざ使える場面がきても忘れしてしまっていたり、未だに使う度にググったりするものも幾つかあるので、セレクタに関しての復習兼ねた備忘録です。
また、併せて同じく使用する機会が多いthisに関することやセレクタで指定した要素の親要素や子要素を指定する方法も書いておこうと思います。

各種セレクタ

ユニバーサル

全ての要素に対して何かをしたいとき。

jQuery
$('*')

要素指定

divpなど、特定の要素を指定したいとき。

jQuery
$('element')

特定のid・class指定されている要素

jQuery
// 特定のid
$('#id')

// 特定のclass
$('.class')

複数の要素

複数の要素に対して指定する時は「,」(カンマ)区切りで記述します。

jQuery
$('elementA, elementB, elementC')

子孫セレクタ

elementA内にあるelementBを指定。

jQuery
$('elementA elementB')

子セレクタ

elementA直下にあるelementBを指定。

jQuery
$('elementA > elementB')

隣接セレクタ

elementAに隣接しているelementBを指定。

jQuery
$('elementA + elementB')

間接セレクタ

elementA以降に兄弟要素として出てくるelementBを指定。

jQuery
$('elementA ~ elementB')

〇〇属性の要素

特定の属性を持つ要素

jQuery
$('[attribute]')

特定の属性が指定した値を持つ要素

例えばinput要素が沢山あるけどtype="text"のみ何かしたいときは、$("input[type='text']")で指定できます。

jQuery
$('[attribute="value"]')

特定の属性が指定した値を持たない要素

jQuery
$('[attribute!="value"]')

特定の属性で値が前方一致する要素

このセレクタは正確には全く違うclassやnameなどが指定されているけれど同じ処理をしたいというときに使えて、後方一致や部分一致と併せて覚えておくと非常に便利です。

jQuery
$('[attribute^="value"]')

特定の属性で値が後方一致する要素

jQuery
$('[attribute$="value"]')

特定の属性で値が部分一致する要素

jQuery
$('[attribute*="value"]')

複数の属性を持つ要素

jQuery
$('[attributeA][attributeB]')

指定要素の〇〇の要素

指定した要素の最初の要素

jQuery
$('element:first')

指定した要素の最後の要素

jQuery
$('element:last')

指定した要素の奇数番目の要素

jQuery
$('element:odd')

指定した要素の偶数番目の要素

jQuery
$('element:even')

指定した要素のn番目の要素

jQuery
$('element:eq(n)')

指定した要素のn番目より前の要素

jQuery
$('element:lt(n)')

指定した要素のn番目より後の要素

jQuery
$('element:gt(n)')

最初・最後・n番目などの指定方法は他にも以下のようなものがあり、nthから始まるものはn番目指定や偶数・奇数指定が可能だったりと、より絞った形で指定が可能になります。

  • :first-child
  • :first-of-type
  • :last-child
  • :last-of-type
  • :only-child
  • :only-of-type
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()

〇〇状態の要素

disabled状態の要素

jQuery
$('element:disabled')

ラジオボタンやチェックボックスのチェック状態時

jQuery
$('element:checked')

オプションの選択状態時

jQuery
$('element:selected')

非表示状態の要素

jQuery
$('element:hidden')

表示状態の要素

jQuery
$('element:visible')

アニメーション状態の要素

jQuery
$('element:animated')

指定した条件以外の要素

jQuery
$('element:not(selector)')

 

沢山紹介してきましたがこれでもほんの一部で、他にも特定の要素を持つ要素を指定できる:has()や特定のテキストを持つ要素を指定できる:contains()h1h2といった見出し要素を指定する:headerなどもあります。
ちなみに、フォーム周りで使えるものとして全てのinput, textarea, select, button要素を指定する:inputtype="text"の要素を指定する:textというものもあるのですが、これらは現在では非推奨となっており、例えば:inputの場合は属性セレクタを使用して$('[type="text"]')という記述を用いることが推奨されています。

各セレクタのより詳しい説明や簡単なデモ、ここで紹介していないセレクタなどは下記公式サイトのセレクタページで確認できます。

thisの使い方

例えばクリックされた要素に対して何か行いたいときなど、普通にセレクタで要素指定してしまうと場合によっては意図しない箇所まで適用されてしまうということがあるのですが、それを防ぐためにthisを利用することがあります。

具体的には先ほど例に出したクリックされた要素にだけ行いたいときは下記のように記述します。

jQuery
$('div').on('click', function() {
  $(this).css('background-color', 'black');
});

上記は「div要素をクリックすると背景色を黒に変更する」という記述をしたものになるのですが、上記ソースで$(this)の部分を$('div')と記述した場合、div要素が他にもあった場合は他のdiv要素の背景色も変更されてしまいます。 それを上記のように$(this)を用いる形にすれば、そのクリックしたdiv要素のみ背景色を変更させることができます。

thisの親要素や子要素を指定したい場合

詳しくは後述しますが、.parent().children()というメソッドを使用すればthisを用いて親要素や子要素への指定が可能になります。
例えばthisで指定された要素の親要素を指定したいときは下記のように記述します。

jQuery
$(this).parent();

また、thisで指定された要素の中にあるp要素を指定したいときは下記のように記述します。

jQuery
$(this).children('p');

もしくは下記のような記述も可能で、こちらの場合は子要素だけでなく孫要素も指定できます。

jQuery
$('p', this);

親要素や子要素などを指定

thisの説明時に少し触れましたが、jQueryには.parent().children()といったメソッドが用意されており、これらを用いることでセレクタで指定した要素の親・子・孫・兄弟といった要素を指定することができます。
一応簡単な例も併せて紹介はしていますが、実際に動きを確認できるデモが公式サイトに掲載されているのを確認するとよりわかりやすいと思います。

親要素の指定

.parent()

直近の親要素を指定するもので、例えば.parent('div')のように記述すれば直近のdiv要素ということになります。
例として下記のようなHTMLがあり、pをセレクタに指定して親要素であるdivを指定したいときには下記のように記述し、ハイライトした部分が対象要素になります。

<div>  <p></p>
</div>
jQuery
$('p').parent();

.parents()

.parent()では指定できなかったさらに上にある親要素まで指定が可能で、こちらも.parents('element')のような記述をすることで更に絞り込んだ指定が可能です。
例として下記のようなHTMLがあり、spanをセレクタに指定してdivを指定したいときには下記のように記述し、ハイライトした部分が対象要素になります。

<div>  <p>
    <span></span>
  </p>
</div>
jQuery
$('span').parents('div');

.closest()

こちらも親要素を指定したいときに便利なメソッドで、指定した条件に最も近い(最初にマッチした)ものを指定することが可能です。
例として下記のようなHTMLがあり、pをセレクタに指定して.closest()を使用した場合は複数親要素としてあるdiv要素の中から一番近いdiv class="baz"が指定されることになり、ハイライトした部分が対象要素になります。

<div class="foo">
  <div class="bar">
    <div class="baz">      <p></p>
    </div>  </div>
</div>
jQuery
$('p').closest();

子・孫要素の指定

.children()

セレクタの子要素を指定できるメソッドで、.children('element')のような指定もできます。
例として下記のようなHTMLがあり、div class="foo"をセレクタに指定して.children()を使用した場合はdiv class="bar"、ハイライトした部分が対象要素になります。

<div class="foo">
  <div class="bar">    <div class="baz">
      <p></p>
    </div>
  </div></div>
jQuery
$('.foo').children();

.find()

こちらはセレクタの子要素だけでなく孫要素も指定できるメソッドで、先ほどのサンプルコードで.children()のときには指定できなかったp要素なども指定することが可能になります。
例として下記のようなHTMLがあり、div class="foo"をセレクタに指定して、その中にあるp要素を指定したい場合は下記のように記述し、ハイライトした部分が対象要素になります。

<div class="foo">
  <div class="bar">
    <div class="baz">
      <p></p>    </div>
  </div>
</div>
jQuery
$('.foo').find('p');

兄弟要素の指定

.next()

メソッド名にあるように、セレクタで指定した要素の次にある要素を指定することができます。
例として下記のようなHTMLがあり、class="foo"が指定されているli(3つ目)をセレクタに指定して.next()を使用した場合はその次にある4つ目のli要素が指定され、ハイライトした部分が対象要素になります。

<ul>
  <li></li>
  <li></li>
  <li class="foo"></li>
  <li></li>  <li></li>
</ul>
jQuery
$('.foo').next();

.nextAll()

こちらはセレクタで指定した要素の次以降にある全ての兄弟要素を指定することができます。
例として下記のようなHTMLがあり、class="foo"が指定されているli(3つ目)をセレクタに指定して.nextAll()を使用した場合はその次以降にある4つ目と5つ目のli要素が指定され、ハイライトした部分が対象要素になります。

<ul>
  <li></li>
  <li></li>
  <li class="foo"></li>
  <li></li>  <li></li></ul>
jQuery
$('.foo').nextAll();

.prev()

.next()の反対で、セレクタで指定した要素の前にある要素を指定することができます。
例として下記のようなHTMLがあり、class="foo"が指定されているli(3つ目)をセレクタに指定して.prev()を使用した場合はその前にある2つ目のli要素が指定され、ハイライトした部分が対象要素になります。

<ul>
  <li></li>
  <li></li>  <li class="foo"></li>
  <li></li>
  <li></li>
</ul>
jQuery
$('.foo').prev();

.prevAll()

こちらは.nextAll()の反対で、セレクタで指定した要素の前にある全ての兄弟要素を指定することができます。
例として下記のようなHTMLがあり、class="foo"が指定されているli(3つ目)をセレクタに指定して.prevAll()を使用した場合はその前にある1つ目と2つ目のli要素が指定され、ハイライトした部分が対象要素になります。

<ul>
  <li></li>  <li></li>  <li class="foo"></li>
  <li></li>
  <li></li>
</ul>
jQuery
$('.foo').prevAll();

 

セレクタの親や子にあたる要素を指定できるメソッドをいくつかあげましたが、同じようなことができるメソッドはここで紹介した以外にもあり、例えばテキストノードも含めた全子要素を取得できる.contents()やCSSのpositiion指定がされている親要素などを取得することができる.offsetParent()といったものもあります。
個人的に上で紹介したものに比べるとそこまで多用するものではないので今回は大きく紹介しませんでしたが、場合によっては非常に便利だと感じるものでもあるので、とりあえずそういったメソッドもあるということだけでも頭に入れておきたいですね :)