「あとで」読まずに今すぐ始める

40分で覚える！jQuery速習講座

2010年02月16日 11時00分更新

文● 西畑一馬／to-R

【5分目：基礎編】
要素を指定するためのセレクター

　jQueryでは次のステップで処理を記述します。

　「操作が発生した要素」や「変更したい要素」を指定するのが「セレクター」です。

　セレクターにはCSSのセレクターとほぼ同じものが利用できます。たとえば次のように記述すると、id属性が「main」の要素内に存在するimg要素を指定できます。

　jQueryでは現在一般的に利用されているCSS2.1だけでなく、CSS3で定義されているセレクターや、jQuery独自のセレクター（フィルターと呼びます）も利用できます。最初のうちは使い慣れたCSSセレクターを利用し、jQueryに慣れてきたらさまざまなセレクターを使い分けるようにするとよいでしょう。

【参考：あとで覚える】
jQueryで利用できる主なセレクター

名称	書式	指定対象
CSSでよく利用されるセレクター
要素セレクター	$(要素名)	特定のHTML要素
IDセレクター	$(#ID名)	特定のid属性を持つ要素
クラスセレクター	$(.クラス名)	特定のclass属性を持つ要素
子孫セレクター	$(要素1 要素2)	特定の要素の内側にある要素
ユニバーサルセレクター	$(*)	すべての要素
グループセレクター	$(セレクター1)	セレクター2
CSS2のセレクター
子セレクター	$(親要素名 > 子要素名)	特定の要素の直下の子要素
隣接セレクター	$(要素1 + 要素2)	特定の要素の次の要素
first-child擬似クラス	$(要素:first-child)	同一の親要素内の最初の要素
CSS3のセレクター
間接セレクター	$(要素1 ~ 要素2)	特定の要素の後に出現する要素
否定擬似クラス	$(要素1:not(要素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のinput要素）
:passwordフィルター	$(要素:password)	パスワード入力フォーム（type属性がpassowordのinput要素）
:radioフィルター	$(要素:radio)	ラジオボタン（type属性がradioのinput要素）
:checkboxフィルター	$(要素:checkbox)	チェックボックス（type属性がcheckboxのinput要素）
:submitフィルター	$(要素:submit)	送信ボタン（type属性がsubmit/imagesのinput要素）
:imageフィルター	$(要素:image)	イメージボタン（type属性がimageのinput要素）
:resetフィルター	$(要素:reset)	リセットボタン（type属性がresetのinput要素）
:buttonフィルター	$(要素:button)	ボタン（button要素）
:fileフィルター	$(要素:file)	ファイル選択フォーム（type属性がfileのinput要素）
:checkedフィルター	$(要素:checked)	ラジオボタン、チェックボックスでチェックが入っている要素
:selectedフィルター	$(要素:selected)	セレクトボックスで選択されている要素