jQueryのセレクタ

JavaScriptのjQueryでは、CSSのセレクタを使ってHTML要素のオブジェクトを表わせます。

すべての要素

var elements = window.jQuery('*')

var elements = jQuery('*')

var elements = window.$('*')

var elements = $('*')

要素タイプ

var elements = window.jQuery('p')

var elements = jQuery('img')

var elements = window.$('div')

var elements = $('section')

ID

var elements = window.jQuery('#id')

var elements = jQuery('#password')

var elements = window.$('input#given-name')

var elements = $('input#family-name')

クラス

var elements = window.jQuery('.breadcrumb')

var elements = jQuery('.breadcrumb')

var elements = window.$('.breadcrumb')

var elements = $('.breadcrumb')

属性

lang属性を持つ要素

var elements = window.jQuery('[lang]')

lang属性の値がjaである要素

var elements = jQuery("[lang='ja']")

lang属性の値がja以外である要素

var elements = window.$("[lang!='ja']")

lang属性の値がenで始まる（en-GBやen-US等）要素

var elements = $("[lang^='en']")

子要素

var elements = window.jQuery('ul > li')

var elements = jQuery('ol > li')

var elements = window.$('dl > dt')

var elements = $('tr > td')

n番目

:eq(n) は、n 番目の要素にマッチする擬似クラスセレクタである。n は0始まりである。

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

var elements = window.jQuery('li:eq(0)')

var elements = jQuery('li:eq(1)')

var elements = window.('li:eq(2)')

var elements = $('li:eq(3)')

ボタン

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

var elements = window.jQuery('input:button')

var elements = jQuery('input:button')

var elements = window.$('input:button')

var elements = $('input:button')

チェックボックス

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

var elements = window.jQuery('input:checkbox')

var elements = jQuery('input:checkbox')

var elements = window.$('input:checkbox')

var elements = $('input:checkbox')

隠しフィールド

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

var elements = window.jQuery('input:hidden')

var elements = jQuery('input:hidden')

var elements = window.$('input:hidden')

var elements = $('input:hidden')

パスワード

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

var elements = window.jQuery('input:password')

var elements = jQuery('input:password')

var elements = window.$('input:password')

var elements = $('input:password')

ラジオボタン

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

var elements = window.jQuery('input:radio')

var elements = jQuery('input:radio')

var elements = window.$('input:radio')

var elements = $('input:radio')

リセットボタン

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

var elements = window.jQuery('input:reset')

var elements = jQuery('input:reset')

var elements = window.$('input:reset')

var elements = $('input:reset')

サブミットボタン

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

var elements = window.jQuery('input:submit')

var elements = jQuery('input:submit')

var elements = window.$('input:submit')

var elements = $('input:submit')

テキスト

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

var elements = window.jQuery('input:text')

var elements = jQuery('input:text')

var elements = window.$('input:text')

var elements = $('input:text')

jQueryのセレクタ一覧

jQueryのセレクタには次のものがある。

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

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

$('ol, ul, dl')

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

$('div.remarks')

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

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