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で利用できる主なセレクタ