jQueryのセレクターの使い方【属性やフィルターのまとめ一覧】

jQueryのセレクター

jQueryのセレクターについて

jQueryではCSSと同じようなセレクターを使って、操作するDOMの要素を選択することができます。

セレクターで要素を選択して、メソッドで操作することにより、色を変更したり文字列を変更するなどの処理ができます。

例えば、

$('p').css('color', 'skyblue');

のようにすると、全てのP要素の色を水色にできます。

上記の例では$('p')の部分がセレクターで、css('color', 'skyblue');の部分がメソッドになります。

基本的なセレクター

基本的なセレクターには以下のような種類があります。

  • 要素セレクター
  • クラスセレクター
  • IDセレクター
  • グループセレクター
  • ユニバーサルセレクター

それぞれのセレクターについて紹介します。

要素セレクター

HTMLの要素(タグ)を選択するセレクターです。

H1タグを選択したいときは

$('h1')

というように記述します。

例えば、

$('p').css('color', 'skyblue');

のようにすると、全てのP要素の色を水色にできます。

クラスセレクター

クラス名を指定して選択するセレクターです。

クラス名を指定するときは.(ドット)を用います。

例えば、

<ul>
	<li class="fruit">りんご</li>
	<li class="fruit">みかん</li>
	<li class="vegetable">じゃがいも</li>
	<li class="vegetable">にんじん</li>
</ul>

上のようなHTMLにおいて

$('.fruit').css('color', 'skyblue');

のようにするとクラスがfruitの要素を指定することができ、「りんご」と「みかん」の文字が水色になります。

IDセレクター

IDを指定して選択するセレクターです。

IDを指定するには#を用います。

<ul>
	<li id="apple">りんご</li>
	<li id="orange">みかん</li>
	<li id="potato">じゃがいも</li>
	<li id="carrot">にんじん</li>
</ul>

上のようなHTMLにおいて

$('#apple').css('color', 'red');

のようにするとIDがappleの要素を指定することができ、「りんご」の文字が赤色になります。

グループセレクター

複数のセレクターを用いて要素を選択することをグループセレクターと言います。

グループセレクターを指定するには、複数のセレクターを,で区切ります。

<ul>
	<li id="apple">りんご</li>
	<li id="orange">みかん</li>
	<li id="potato">じゃがいも</li>
	<li id="carrot">にんじん</li>
</ul>

上のようなHTMLにおいて

$('#apple, #orange').css('color', 'red');

のようにするとIDがappleorangeの要素を指定することができ、「りんご」と「みかん」の文字が赤色になります。

ユニバーサルセレクター

全ての要素をしていするセレクターです。

ユニバーサルセレクターは*を用います。

$('*').css('color', 'red');

とすると全ての要素の文字が赤色になります。

階層を指定するセレクター

階層を指定するセレクターには以下のような種類があります。

  • 子孫セレクター
  • 子セレクター
  • 隣接セレクター
  • 兄弟セレクター

子孫セレクター

ある要素の中(下階層)にある要素を選択するセレクターです。

子孫セレクターは半角スペースを入れて階層構造を表現します。

<div class="food">
	<ul>
		<li>りんご</li>
		<li>みかん</li>
		<li>じゃがいも</li>
		<li>にんじん</li>
	</ul>
</div>

上記のようなHTMLにおいて、クラスがfoodである要素中の全liタグを選択するには

$('.food li')

のように.foodliの間に半角スペースを入れます。

$('.food li').css('color', 'red');

とするとクラスがfoodである要素中の全liタグが選択され、「りんご」「みかん」「じゃがいも」「にんじん」の文字が赤色になります。

子セレクター

ある要素の直下(1つ下の階層)にある要素を選択するセレクターです。

子セレクターは、>を入れて階層構造を表現します。

<ul class="oya">
	<li>子1</li>
	<li>子2</li>
	<ul>
		<li>孫1</li>
		<li>孫2</li>
	</ul>
	</li>
</ul>

上のようなHTMLにおいて

$('ul.oya > li')

とするとクラスがoyaであるulの直下にあるliを選択します。

$('ul.oya > li').css('color', 'red');

とすると「子1」「子2」が赤色になりますが、「孫1」「孫2」は変化しません。

隣接兄弟セレクター

隣接している兄弟要素(同じ親を持つ要素)で後ろにあるものを選択するセレクターです。前にあるものは対象になりません。

隣接兄弟セレクターは、+を入れて階層構造を表現します。

<div class="chapter">
	<p class="text1">テキスト1</p>
	<p class="text2">テキスト2</p>
	<p class="text3">テキスト3</p>
	<p class="text4">テキスト4</p>
</div>

上のようなHTMLにおいて

$('.text2 + p')

のようにすると3番目のpタグが選択されます。

$('.text2 + p').css('color', 'red');

とすると「テキスト3」という文字列が赤色になります。

一般兄弟セレクター

兄弟要素(同じ親を持つ要素)で後ろにあるものを全て選択するセレクターです。前にあるものは対象になりません。

一般兄弟セレクターは、~(チルダ)を入れて階層構造を表現します。

<div class="chapter">
	<p class="text1">テキスト1</p>
	<p class="text2">テキスト2</p>
	<p class="text3">テキスト3</p>
	<p class="text4">テキスト4</p>
</div>

上のようなHTMLにおいて

$('.text2 ~ p')

のようにすると3番目と4番目のpタグが選択されます。

$('.text2 ~ p').css('color', 'red');

とすると「テキスト3」「テキスト4」という文字列が赤色になります。

属性セレクター

要素の属性を指定し選択するセレクターです。

属性を指定するには[]を用います。

$('a[target]')

とするとtarget属性を持つ全てのaタグを選択することができます。

また、

$('a[target="_blank"]')

とするとtarget属性が_blankである全てのaタグを選択できます。

属性セレクターには他にも以下のような種類があります。

フォーマット 内容
$(‘[attribute]’) attributeという属性を持つ要素 $(‘img[alt]’)
alt属性を持つimgタグ
$(‘[attribute=”value”]’) attribute属性の値がvalueの要素 $(‘a[target=”_blank”]’)
targetが_blankのaタグ
$(‘[attribute!=”value”]’) attribute属性の値がvalueでない要素 $(‘a[target!=”_blank”]’)
targetが_blankでないaタグ
$(‘[attribute*=”value”]’) attribute属性の値がvalueを含む(部分一致する)要素 $(‘input[name*=”text”]’)
nameがtextを含むinput
$(‘[attribute~=”value”]’) attribute属性の値がvalueである要素。空白区切で複数のvalueを含めることができる。 $(‘input[name~=”text”]’)
<input name="text sample">など
$(‘[attribute^=”value”]’) attribute属性の値がvalueで始まる(前方一致)する要素 $(‘a[href^=”https”]’)
hrefがhttpsで始まる値のaタグ
$(‘[attribute$=”value”]’) attribute属性の値がvalueで終わる(後方一致)する要素 $(‘a[href$=”.html”]’)
hrefが.htmlで終わる値のaタグ
$(‘[属性セレクター1][属性セレクター2]’) 上記の属性セレクターの組み合わせ $(‘a[href^=”https”][target=”_blank”]’)
hrefがhttpsで始まり、targetが_blankのaタグ

フィルター

選択した要素に対してフィルターをかけ、さらに絞り込むことができます。

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>いちご</li>
</ul>

上のようなHTMLにおいて

$('li:first').css('color', 'red');

のようにすると「りんご」という文字列が赤色になります。

$('li')で全てのliタグが選択されますが、:firstというフィルターをかけて最初の要素のみに限定しています。

基本のフィルター

基本のフィルターには以下のような種類があります。

フォーマット 内容
:first 選択した要素の最初の要素
:last 選択した要素の最後の要素
:even 選択した要素の偶数番目の要素
:odd 選択した要素の奇数番目の要素
:eq(n) 選択した要素のn番目の要素
:gt(n) 選択した要素のnより後の要素
:lt(n) 選択した要素のnより前の要素
:first-child 選択した要素の親から見て最初の子要素
:last-child 選択した要素の親から見て最後の子要素
:nth-child(N) 選択した要素のN番目の要素。even、odd、3n+1なども指定できる。
:only-child 選択した要素の親から見て唯一の子要素を選択
:nth-child(N) 選択した要素の
:not(セレクター1) 選択した要素のうちセレクター1にマッチしない要素
:contains(文字列) 選択した要素のうち指定した文字列を含む要素
:header h1~h6のヘッダー要素
:animated 選択した要素のうちアニメーションが動作中の要素

コンテンツフィルター

要素が含んでいるコンテンツにより選択するフィルターです。

フォーマット 内容
:contains(文字列) 選択した要素のうち指定した文字列を含む要素
:has(セレクター1) 選択した要素のうち、セレクター1で選択した要素を持つもの
:empty 選択した要素のうち子要素を持たない要素
:parent 選択した要素のうち親要素である(子要素を持つ)要素

フォームフィルター

フォームの要素を選択するときに使用するフィルターです。タイプや状態などを指定して要素を限定することができます。

タイプを指定するフィルター

フォーマット 内容
:button ボタン要素(<button>と<input type="button">)を選択
:checkbox チェックボックスを選択
:input 全てのinput、textarea、select、buttonの要素を選択
:radio ラジオボタンを選択
:text テキストボックスを選択
:reset リセットボタンを選択
:submit submit要素を選択
:password パスワード入力フォームを選択
:file ファイル選択フォームを選択
:image 画像ボタンを選択

状態を指定するフィルター

フォーマット 内容
:checked チェックされている要素を選択
:selected 選択されている要素を選択
:enabled 利用可能な状態の要素
:disabled 利用不可能な状態の要素
:visible 表示状態の要素
:hidden 非表示状態の要素

is()メソッド

jQueryオブジェクトで指定した要素集合と、引数で指定したセレクターが1つでもマッチしたときにtrueを返します。1つもマッチしないときはfalseを返します。

<p class="text1">テキスト1</p>
<p class="text2">テキスト2</p>
<p class="text3">テキスト3</p>

上のようなHTMLにおいて

$('p').is('.text1')

とするとtrueを返します。この例では$('p')がjQueryオブジェクトで指定した要素集合で、'.text1'が引数で指定したセレクターになります。

[prism]