[JavaScript] jQuery のセレクタ一覧

このページのタグ:[JavaScript] [jQuery]
jQuery のセレクタ一覧を紹介します。
はじめに補足
jQuery は $ と記述できます。
jQuery( "*" )
$( "*" )
は同じ処理になります。

基本

All Selector

jQuery( "*" )
すべての要素を選択します。

Class Selector

jQuery( ".class" )
指定したクラスの要素を選択します。

Element Selector

jQuery( "element" )
指定したタグの要素を選択します。

ID Selector

jQuery( "#id" )
指定したIDの要素を選択します。

Multiple Selector

jQuery( "selector1, selector2, selectorN" )
指定した複数の要素を選択します。

フィルタ

:animated Selector

jQuery( ":animated" )
アニメーション中の要素を選択します。

:eq() Selector

jQuery( ":eq(index)" )
jQuery( ":eq(-index)" )
指定したインデックス位置の要素を選択します。

:even Selector

jQuery( ":even" )
偶数番目の要素を選択します。

:first Selector

jQuery( ":first" )
最初の要素を選択します。

:focus Selector

jQuery( ":focus" )
フォーカスが当たっている要素を選択します。

:gt() Selector

jQuery( ":gt(index)" )
jQuery( ":gt(-index)" )
指定したインデックス位置以上の要素を選択します。

:header Selector

jQuery( ":header" )
ヘッダ要素 H1, H2, H3, H4, H5, H6,... のタグ要素を選択します。

:lang() Selector

jQuery( ":lang(language)" )
指定したlangを持つ要素を選択します。

:last Selector

jQuery( ":last" )
最後の要素を選択します。

:lt() Selector

jQuery( ":lt(index)" ) jQuery( ":lt(-index)" )
指定したインデックス一以下の要素を選択します。

:not() Selector

jQuery( ":not(selector)" )
指定した要素以外の要素を選択します。
$( "input:not(:checked) + span" ).css( "background-color", "yellow" ); チェックボックスのチェックがついていない要素に隣接するspanタグを選択します。

:odd Selector

jQuery( ":odd" )
奇数番目の要素を選択します。

:root Selector

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

:target Selector

jQuery( ":target" )

Attribute

Attribute Contains Prefix Selector [name|="value"]

jQuery( "[attribute|='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( "[attribute*='value']" )
特定の属性で特定の値を持つ要素を選択します。
jQuery( "[name|='pen']" )
の場合

 <input name="penguin"/>
 <input name="ballpointpen"/>
 <input name="large-pen"/>
は選択されますが

 <input name="bear"/>
は選択されません。

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

jQuery( "[attribute~='value']" )
特定の属性で特定の値を持つ要素を選択します。スペースで区切られた場合のみ選択します。
jQuery( "[name|='owl']" )
の場合

 <input name="jump owl"/>
は選択されますが

 <input name="owl-black"/>
 <input name="crowl"/>
 <input name="rowlcake"/>
は選択されません。

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

jQuery( "[attribute$='value']" )
特定の属性で特定の値で終わる要素を選択します。
jQuery( "[name|='line']" )
の場合

 <input name="goalline"/>
 <input name="line"/>
は選択されますが、

 <input name="linefeed"/>
 <input name="circle"/>
は選択されません。

Attribute Equals Selector [name="value"]

jQuery( "[attribute='value']" )
特定の属性で特定の値の要素を選択します。完全一致です。

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

jQuery( "[attribute!='value']" )
特定の属性で特定の値でない要素を選択します。

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

jQuery( "[attribute^='value']" )
特定の属性で特定の値を最初に含む要素を選択します。
jQuery( "[name|='line']" )
の場合

 <input name="linefeed"/>
 <input name="line"/>
は選択されますが、

 <input name="goalline"/>
 <input name="circle"/>
は選択されません。

Has Attribute Selector [name]

jQuery( "[attribute]" )
属性が存在する要素を選択します。
$( "div[id]" ) の場合

 <div id="0"/>
は選択されますが、

 <div/>
は選択されません。

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

jQuery( "[attributeFilter1][attributeFilter2][attributeFilterN]" )
複数の属性要素を選択します。

Child Filter

:first-child Selector

jQuery( ":first-child" )
最初の子要素を選択します。

:first-of-type Selector

jQuery( ":first-of-type" )
ブロック中での最初の要素を選択します。

:last-child Selector

jQuery( ":last-child" )
最後のの子要素を選択します。

:last-of-type Selector

jQuery( ":last-of-type" )
ブロック中での最後の要素を選択します。

:nth-child() Selector

jQuery( ":nth-child(index/even/odd/equation)" )
指定した位置の子要素を選択します。

 jQuery( ":nth-child(10)" )
とした場合は10番目の要素を選択します。


 jQuery( ":nth-child(even)" )
とした場合は偶数の要素を選択します。


 jQuery( ":nth-child(odd)" )
とした場合は奇数の要素を選択します。


 jQuery( ":nth-child(5n)" )
とした場合は5の倍数の要素を選択します。

:nth-last-child() Selector

jQuery( ":nth-last-child(index/even/odd/equation)" )
最後の子要素を与えた条件で選択します。

:nth-last-of-type() Selector

jQuery( ":nth-last-of-type(index/even/odd/equation)" )
ブロック中の最後の要素を与えた条件で選択します。

:nth-of-type() Selector

jQuery( ":nth-of-type(index/even/odd/equation)" )
ブロック中の要素を与えた条件で選択します。

:only-child Selector

jQuery( ":only-child" )
子要素が1つしかない要素を選択します。

:only-of-type Selector

jQuery( ":only-of-type" )
要素が1つしかない要素を選択します。

Content Filter

:contains() Selector

jQuery( ":contains(text)" )
タグ内に値が含まれるものを選択します。
jQuery( ":contains('Penguin')" )
の場合

 <div>Penguin Jump</div>
は選択されますが、

 <div>Duck Run</div>
は選択されません。

:empty Selector

jQuery( ":empty" )
タグ内が空のものを選択します。
jQuery( "td:empty" )
の場合

 <td></td>
は選択されますが、

 <td>value</td>
は選択されません。

:has() Selector

jQuery( ":has(selector)" )
タグ内に与えたタグが含まれるものを選択します。
jQuery( "div:has(p)" )
の場合

 <div>ペンギンは<p>南極</p>に住んでいる。</div>
は選択されますが、

 <div>ペンギンは上野動物園に住んでいる。</div>
は選択されません。

:parent Selector

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

Form

:button Selector

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

$( "button, input[type='button']" ).
と同義です。

:checkbox Selector

jQuery( ":checkbox" )
チェックボックスを選択します。

:checked Selector

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

:disabled Selector

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

:enabled Selector

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

:file Selector

jQuery( ":file" )
ファイル参照ボックスを選択します。

:image Selector

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

:input Selector

jQuery( ":input" )
inputタグの要素を選択します。

:password Selector

jQuery( ":password" )
パスワード入力ボックスの要素を選択します。

:radio Selector

jQuery( ":radio" )
ラジオボタンの要素を選択します。

:reset Selector

jQuery( ":reset" )
リセットボタンの要素を選択します。

:selected Selector

jQuery( ":selected" )
セレクトボックスで選択されている要素を選択します。

:submit Selector

jQuery( ":submit" )
Submitボタンの要素を選択します。

:text Selector

jQuery( ":text" )
テキストボックスの要素を選択します。

Hierarchy

Child Selector (“parent > child”)

jQuery( "parent > child" )
指定した要素間で親子関係が成立している要素を選択します。

Descendant Selector (“ancestor descendant”)

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

Next Adjacent Selector (“prev + next”)

jQuery( "prev + next" )
指定した要素間で隣接関係が成立している要素を選択します。

Next Siblings Selector (“prev ~ siblings”)

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

Visibility Filter

:hidden Selector

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

:visible Selector

jQuery( ":visible" )
表示されている要素を選択します。

登録日 :2013-12-26    最終更新日 :2014-06-05
このページのタグ:[JavaScript] [jQuery]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)