jQeuryのセレクタはCSSのセレクタとほぼ同じである。

jQueryのセレクタ一覧
セレクタ 構文 説明
全称セレクタ * すべての要素
タイプセレクタ elementType elementTypeで指定した要素タイプ名(タグ名)の要素
IDセレクタ #id id属性の値がidで指定した値に一致する要素
クラスセレクタ .className class属性の値がclassNameで指定した値に一致する要素
属性セレクタ [name] nameで指定した属性を持つ要素
[name=value] nameで指定した属性の値がvalueに等しい要素
[name!=value] nameで指定した属性の値がvalueに等しくない要素
[name^=value] nameで指定した属性の値がvalueから始まる(前方一致)要素
[name$=value] nameで指定した属性の値がvalueで終わる(後方一致)要素
[name*=value] nameで指定した属性の値がvalueを含む(部分一致)要素
子供セレクタ parent > child 親要素の要素タイプ名(タグ名)がparentで指定した値に一致及び要素タイプ名(タグ名)がchildで指定した値に一致する要素
子孫セレクタ ancestor descendant
隣接兄弟セレクタ prev + next
擬似クラスセレクタ :button type属性がbuttonの要素
:checkbox type属性がcheckboxの要素
:checked checked属性が指定された要素
:disabled disabled属性が指定された要素
:hidden type属性がhidden、display属性がnone、width属性が0及びheight属性が0の要素
:image type属性がimageの要素
:password type属性がpasswordの要素
:radio type属性がradioの要素
:reset type属性がresetの要素
:selected selected属性が指定された要素
:submit type属性がsubmitの要素
:text type属性がtextの要素
否定 :not(selector)
順序に関するセレクタ :nth-child

セレクタにマッチした要素をフィルタでさらに絞り込むこともできる。jQueryフィルタの一覧を次に示す。

フィルタ
フィルタ 説明
:eq(index) マッチしたセットの中でn番目(0始まり)の要素だけを選択する。

セレクタはカンマで区切って複数指定することもできる。

$('ol, ul, dl')

セレクタを組み合わせることもできる。たとえば、div要素かつremarksクラスの要素群は次のように表すことができる。

$('div.remarks')

要素タイプと属性を組み合わせたセレクタの例を次に示す。

$("input[name='foo']")

自分でセレクタを定義することもできる。

1番目のli要素を指定する例を示す。

$('li:eq(0)')

擬似クラスセレクタ

擬似クラスセレクタとは、特定の外的要因や状態を持つ要素にマッチするセレクタである。

:radio

:radioは、type属性がradioの要素にマッチするセレクタである。[type=radio]と同じである。

スポンサーリンク