ProgrammingJavaScript講座jQuery入門
jQuery入門

jQueryのセレクタ解説

jQueryには任意の範囲、要素を指定するためのセレクタと呼ばれる機能が用意されています。

たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。

$("img")

例えば、IMG要素のボーダーを3ピクセルの赤に設定するには次のようにします。 

$("img").css("border","3px solid red");

セレクタで対象を指定し、cssというメソッドでボーダー属性の値を設定しています。

セレクタは要素名以外にも、ID名やCLASS名を指定することができます。
たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。

$("img.photo")

IMG要素で、かつID名が photo01 の要素を指定するには、次のようにシャープの後にID名を指定します。

$("img#photo01")

要素名を省略すると、すべての要素が対象になります。次の例では、IMG要素でもDIV要素でもどのような要素でも photo というクラス名であれば選択されます。

$(".photo")

要素セレクタ

要素セレクタは、特定の(X)HTML要素を選択します。

$('div')

IDセレクタ $('#ID名')

IDセレクタは、指定したID名の要素を選択します。

$('#header')

CLASSセレクタ $('.CLASS名')

CLASSセレクタは、指定したCLASS名の要素を選択します。

$('.link')

ユニバーサルセレクタ

セレクタにアスタリスク(*)を指定すると、すべての要素が対象となります。次の例では、ID名mainにあるすべての要素が選択されます。

$('div#main *')

グループセレクタ $('code,#ID名,.CLASS名')

複数のIDやCLASSを指定したい場合は、カンマ（,）で区切ります。

$('h1, #h-title, img.bar-title')

子孫セレクタ

子孫要素と呼ばれる、特定の要素の内側にある要素を選択したい場合は、複数のセレクタをスペース区切りで指定します。

$('div#main img')

子セレクタ

直接の子セレクタのみ選択します。孫は対象外となります。

$('div#main > p')

隣接セレクタ

隣り合う要素が対象となります。
下記の場合、div$mainの次にくるDIV要素が対象となります。

$('div#main + div')

first疑似クラス

最初の要素のみを選択します。

$('li:first') 

<script>
$(function(){
	$('li:first').css({backgroundColor:"#ff0000"});
});
</script>
<ul>
	<li>ここが対象になります</li>
	<li>※※※※※</li>
	<li>※※※※※</li>
</ul>

  • 1
  • 2
  • 3

last疑似クラス

最後の要素のみを選択します。

$('li:last') 

<script>
$(function(){
	$('li:last').css({color:"#ff0000"});
});
</script>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

  • 1
  • 2
  • 3

even疑似クラス

偶数番目の要素を選択します。インデックスとしての順番になるので0から始まります。

$('li:even') 

<script>
$(function(){
	$('li:even').css({color:"#ff0000"});
});
</script>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

  • 1
  • 2
  • 3
  • 4

odd疑似クラス

奇数番目の要素を選択します。

$('li:odd') 

<script>
$(function(){
	$('li:odd').css({color:"#ff0000"});
});
</script>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

  • 1
  • 2
  • 3
  • 4
jQueryで利用できる主なセレクタ
名称 書式 指定対象
CSSでよく利用されるセレクタ
要素セレクタ $("要素名") 特定のHTML要素
IDセレクタ $("#ID名") 特定のid属性を持つ要素
クラスセレクタ $(".クラス名") 特定のclass属性を持つ要素
子孫セレクタ $("要素1 要素2") 要素1のブロック内にある要素2
ユニバーサルセレクタ $("*") すべての要素
グループセレクタ $("要素1,要素2") 要素1と要素2
CSS2のセレクタ
子セレクタ $("要素1 > 要素2") 要素1の直下の要素2
隣接セレクタ $("要素1 + 要素2") 要素1の次にくる要素2
first-child擬似クラス $("要素:first-child") 同一の親要素内の最初の要素
CSS3のセレクタ
間接セレクタ $("要素1 ~ 要素2") 特定の要素の後に出現する要素
否定擬似クラス $("要素1:not(要素2)") 要素1で要素2以外
empty擬似クラス $("要素:empty") 子要素やテキストを含まない要素
nth-child擬似クラス $("要素:nth-child(番号)") 特定の要素内の指定した番号の要素
last-child擬似クラス $("要素:last-child") 特定の要素内の最後の要素
only-child擬似クラス $("要素:only-child") 指定した要素が1つだけ含まれる特定の要素
CSSの属性セレクタ
[attribute] $("[属性名]") 特定の属性を持つ要素
[attribute='value'] $("[属性名='値']") 特定の属性が指定した値を持つ要素
[attribute!='value'] $("要素名[属性名!='値']") 特定の属性が指定した値を持たない要素
[attribute^='value'] $("[属性名^='値']") 特定の属性が特定した値で始まっている要素
[attribute$='value'] $("[属性名$='値']") 特定の属性が特定した値で終わっている要素
[attribute*='value'] $("[属性名*='値']") 特定の属性が特定した値を含んでいる要素
[attributeFilter1][attributeFilter2] $("[属性セレクタ1][属性セレクタ2]") 複数の属性セレクタに該当する要素
jQueryの独自フィルター
firstフィルター $("要素:first") 同一の親要素内の最初の要素
lastフィルター $("要素:last") 指定した要素の最後の要素
evenフィルター $("要素:even") 指定した要素の偶数番目の要素
oddフィルター $("要素:odd") 指定した要素の奇数番目の要素
eqフィルター $("要素:eq(番号)") 指定した番号の要素
gtフィルター $("要素:gt(番号)") 指定した番号より後の要素
ltフィルター $("要素:lt(番号)") 指定した番号より前の要素
headerフィルター $("要素:header") h1～h6までのheader要素
containsフィルター $("要素:contains(文字列)") 特定の文字列が含まれている要素
hasフィルター $("要素1:has(要素2)") 特定の要素が含まれている要素
parentフィルター $("要素:parent") 子要素やテキストを含む要素
フォームフィルター
:inputフィルター $("要素:input") input要素/textarea要素/select要素/button要素
:textフィルター $("要素:text") 1行テキスト入力フォーム（type="text"）
:passwordフィルター $("要素:password") パスワード入力フォーム（type="passoword"）
:radioフィルター $("要素:radio") ラジオボタン（type="radio"）
:checkboxフィルター $("要素:checkbox") チェックボックス（type="checkbox"）
:submitフィルター $("要素:submit") 送信ボタン（type="submit"/type="images"）
:imageフィルター $("要素:image") イメージボタン（type="image"）
:resetフィルター $("要素:reset") リセットボタン（type="reset"）
:buttonフィルター $("要素:button") ボタン（button要素）
:fileフィルター $("要素:file") ファイル選択フォーム（type="file"）
:checkedフィルター $("要素:checked") ラジオボタン、チェックボックスでチェックが入っている要素
:selectedフィルター $("要素:selected") セレクトボックスで選択されている要素

関連記事