jQuery のセレクタ一覧を紹介します。

はじめに : "$" について

jQuery は $ と記述できます。

と

は同じ処理になります。

基本

すべての要素を選択する (All Selector)

により、すべての要素を選択します。

指定したクラスの要素を選択する (Class Selector)

により、指定したクラスの要素を選択します。

指定したタグの要素を選択する (Element Selector)

により、指定したタグの要素を選択します。

指定したIDの要素を選択する (ID Selector)

により、指定したIDの要素を選択します。

複数の要素

複数の要素を選択する (Multiple Selector)

により、指定した複数の要素を選択します。セレクタの記述には先に紹介した、クラス指定や、ID指定の書式が利用できます。

記述例

下記の記述例は、h2タグ、toicクラス、myitem IDの要素を選択します。

  jQuery( "h2, .topic, #myitem" )

フィルタ

アニメーション要素の選択 (:animated Selector)

アニメーション中の要素を選択します。

位置を指定したセレクタ (:eq() Selector)

指定したインデックス位置の要素を選択します。

偶数番目の要素の選択 (:even Selector)

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

最初の要素の選択 (:first Selector)

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

フォーカスのある要素の選択 (:focus Selector)

フォーカスが当たっている要素を選択します。

指定したインデックス値以上の要素の選択 (:gt() Selector)

指定したインデックス位置以上の要素を選択します。

H1～H6タグの選択 (:header Selector)

ヘッダ要素 H1, H2, H3, H4, H5, H6,... のタグ要素を選択します。

指定したlangを持つ要素の選択 (:lang() Selector)

指定したlangを持つ要素を選択します。

最後の要素の選択 (:last Selector)

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

指定したインデックス以下の要素の選択 (:lt() Selector)

指定したインデックス一以下の要素を選択します。

指定した要素以外の要素の選択 (:not() Selector)

指定した要素以外の要素を選択します。

例

$("input:not(:checked) + span" ).css( "background-color", "yellow" );

チェックボックスのチェックがついていない要素に隣接するspanタグを選択します。

奇数番目の要素の選択 (:odd Selector)

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

ルート要素の選択 (:root Selector )

root要素、すなわちHTMLの場合はHTMLタグを選択します。

リンク先の要素の選択 (:target Selector)

ページ内リンクのリンク先の要素を選択します。

例

  <a href="#penguin">ページ内のリンクです。</a>

  <div id="penguin">idがpenguinの要素です。</div>

  $("a").click(function(){
    $(":target").addClass("red");
  });

Attribute

特定の属性で特定の値を持つ要素の選択 (Attribute Contains Prefix Selector [name|="value"] )

特定の属性で特定の値を持つ要素を選択します。"-"(ハイフン)で区切られている場合に選択します。

例

jQuery( "[lang|='en']" )

上記の場合

 <a href="http://www.ipentec.com/" lang="en">Link</a>

は選択され

 <a href="http://www.ipentec.com/" lang="en-us">Link</a>

も選択されますが

 <a href="http://www.ipentec.com/" lang="english">Link</a>

は選択されません。

特定の属性で特定の値を持つ要素の選択 (Attribute Contains Selector [name*="value"])

特定の属性で特定の値を持つ要素を選択します。

例

 jQuery( "[name|='pen']" )

の場合

 <input name="penguin"/>
 <input name="ballpointpen"/>
 <input name="large-pen"/>

は選択されますが

 <input name="bear"/>

は選択されません。

Attribute Contains Word Selector [name~="value"]

特定の属性で特定の値を持つ要素を選択します。スペースで区切られた場合のみ選択します。

例

の場合

 <input name="jump owl"/>

は選択されますが

 <input name="owl-black"/>
 <input name="crowl"/>
 <input name="rowlcake"/>

は選択されません。

Attribute Ends With Selector [name$="value"]

特定の属性で特定の値で終わる要素を選択します。

例

の場合

 <input name="goalline"/>
 <input name="line"/>

は選択されますが、

 <input name="linefeed"/>
 <input name="circle"/>

は選択されません。

Attribute Equals Selector [name="value"]

特定の属性で特定の値の要素を選択します。完全一致です。

Attribute Not Equal Selector [name!="value"]

特定の属性で特定の値でない要素を選択します。

Attribute Starts With Selector [name^="value"]

特定の属性で特定の値を最初に含む要素を選択します。

例

の場合

 <input name="linefeed"/>
 <input name="line"/>

は選択されますが、

 <input name="goalline"/>
 <input name="circle"/>

は選択されません。

Has Attribute Selector [name]

属性が存在する要素を選択します。

例

の場合

 <div id="0"/>

は選択されますが、

 <div/>

は選択されません。

Multiple Attribute Selector [name="value"][name2="value2"]

複数の属性要素を選択します。

Child Filter

:first-child Selector

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

:first-of-type Selector

ブロック中での最初の要素を選択します。

:last-child Selector

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

:last-of-type Selector

ブロック中での最後の要素を選択します。

:nth-child() Selector

指定した位置の子要素を選択します。

例

 jQuery( ":nth-child(10)" )

とした場合は10番目の要素を選択します。

 jQuery( ":nth-child(even)" )

とした場合は偶数の要素を選択します。

 jQuery( ":nth-child(odd)" )

とした場合は奇数の要素を選択します。

 jQuery( ":nth-child(5n)" )

とした場合は5の倍数の要素を選択します。

:nth-last-child() Selector

最後の子要素を与えた条件で選択します。

:nth-last-of-type() Selector

ブロック中の最後の要素を与えた条件で選択します。

:nth-of-type() Selector

ブロック中の要素を与えた条件で選択します。

:only-child Selector

子要素が1つしかない要素を選択します。

:only-of-type Selector

要素が1つしかない要素を選択します。

Content Filter

:contains() Selector

タグ内に値が含まれるものを選択します。

例

の場合

 <div>Penguin Jump</div>

は選択されますが、

 <div>Duck Run</div>

は選択されません。

:empty Selector

タグ内が空のものを選択します。

例

の場合

 <td></td>

は選択されますが、

 <td>value</td>

は選択されません。

:has() Selector

タグ内に与えたタグが含まれるものを選択します。

例

の場合

 <div>ペンギンは<p>南極</p>に住んでいる。</div>

は選択されますが、

 <div>ペンギンは上野動物園に住んでいる。</div>

は選択されません。

:parent Selector

空でない要素を選択します。(:emptyの逆です)

Form

:button Selector

ボタン(buttonタグ、type="button"であるinputタグ)を選択します。

と同義です。

:checkbox Selector

チェックボックスを選択します。

:checked Selector

チェックされているチェックボックス、ラジオボタンを選択します。

:disabled Selector

disabeledのフォーム要素(disabled="disabled")を選択します。

:enabled Selector

有効なフォーム要素を選択します。

:file Selector

ファイル参照ボックスを選択します。

:image Selector

<input type="image">の要素を選択します。

:input Selector

inputタグの要素を選択します。

:password Selector

パスワード入力ボックスの要素を選択します。

:radio Selector

ラジオボタンの要素を選択します。

:reset Selector

リセットボタンの要素を選択します。

:selected Selector

セレクトボックスで選択されている要素を選択します。

:submit Selector

Submitボタンの要素を選択します。

:text Selector

テキストボックスの要素を選択します。

Hierarchy

Child Selector (“parent > child”)

指定した要素間で親子関係が成立している要素を選択します。

Descendant Selector (“ancestor descendant”)

指定した要素間で包含関係が成立している要素を選択します。">"と異なり下位に要素が含まれれば選択対象になります。

Next Adjacent Selector (“prev + next”)

指定した要素間で隣接関係が成立している要素を選択します。

Next Siblings Selector (“prev ~ siblings”)

指定した要素間で前後関係が成立している要素を選択します。"~"と異なり後に続く要素はすべて対象になります。

Visibility Filter

:hidden Selector

非表示の要素(display:none)の要素を選択します。

:visible Selector

表示されている要素を選択します。

利用できるセレクタ

CSSセレクタ

CSS2セレクタ

CSS3セレクタ

CSS属性セレクタ

jQuery独自フィルタ

フォームフィルター