■基本$('*')
すべての要素にマッチします。
$('*').css( 'color', 'red' );
$('element')
すべての element 要素にマッチします。下記の例ではすべての<P>要素にマッチします。
$('p').css( 'color', 'red' );
$('.class')
class="class-name" が指定されたすべての要素にマッチします。
$('.class-name').css( 'color', 'red' );
$('#id')
id="id-name" が指定された要素にマッチします。
$('#id-name').css( 'color', 'red' );
$('selector1,selector2,selector3')
selector1 または selector2 または selectorN にマッチする要素の集合です。
$('p,.class-name,#id-name').css( 'color', 'red' );
■階層
$('selector selector2')
selector1 の子孫要素として出現する selector2 にマッチします。
$('p strong').css( 'color', 'red' );
$('selector > selector2')
selector1 の子要素として出現する selector2 にマッチします。
$('p > strong').css( 'color', 'red' );
$('selector + selector2')
selector1 の直後に兄弟要素として出現する selector2 にマッチします。
$('p + strong').css( 'color', 'red' );
$('selector ~ selector2')
selector1 の後に兄弟要素として出現する selector2 にマッチします。
$('p ~ strong').css( 'color', 'red' );
■属性
$('[name]')
name 属性を持つ要素にマッチします。
$('[href]').css( 'color', 'red' );$('a[href]').css( 'color', 'red' );
$('[name=value]')
name 属性の値が value に等しい要素にマッチします。
$('[href=http://uppeal.com/]').css( 'color', 'red' );
$('[name!=value]')
name 属性の値が value に等しくない要素にマッチします。
$('[href!=http://uppeal.com/]').css( 'color', 'red' );
$('[name~=value]')
name 属性の値がスペースで区切られたひとつ以上の値を持つ場合、その値のひとつが value と等しい要素にマッチします。
$('[class~=bold]').css( 'color', 'red' );
$('[name|=value]')
name 属性の値がプレフィクスとして value または value- を含む要素にマッチします。
$('[class|=lang]').css( 'color', 'red' );
$('[name^=value]')
name 属性の値が value を先頭に含む要素にマッチします。
$('[class^=lang-]').css( 'color', 'red' );
$('[name$=value]')
name 属性の値が value を末尾に含む要素にマッチします。
$('img[src$=.png]').css( 'margin', '10px' );
$('[name*=value]')
name 属性の値が value を含む要素にマッチします。
$('img[src*=uppeal.com]').css( 'margin', '10px' );
$('[condition1][condition2]')
condition1 、condition2 両方を満たす要素にマッチします。
$('img[class=button],img[src*=uppeal.com]').css( 'margin', '10px' );
■フィルター
:even
:odd
対象要素の中で偶数番目／奇数番目の要素にマッチします。
$('p:even').css( 'color', 'red' );$('p:odd').css( 'color', 'blue' );
:first
:last
対象要素の中で最初／最後の要素にマッチします。
$('p:first').css( 'color', 'red' );$('p:last').css( 'color', 'blue' );
:eq(index)
:eq(-index)
対象要素の中で０から数えて index 番目の要素にマッチします。負の値を指定した場合は後ろから数えます。
$('p:eq(10)').css( 'color', 'red' );$('p:eq(-1)').css( 'color', 'blue' );
:gt
:lt
対象要素の中で０番目から数えて index 番目より大きい／小さい要素にマッチします。
$('p:gt(1)').css( 'color', 'red' );$('p:lt(1)').css( 'color', 'blue' );
:not(selector)
対象要素の中で selector にマッチしない要素にマッチします。
$('p:not(excerpt)').css( 'color', 'red' );
:focus
対象要素の中でフォーカスが当たっている要素にマッチします。
$('input:focus').css( 'color', 'red' );
:header
対象要素の中でフォーカスが当たっている要素にマッチします。
$(':header').css( 'font-size', '20px' );
:lang(language)
対象要素の中で、lang="language" の要素にマッチします。
$(':lang(en)').css( 'font-family', 'Arial' );
:target(language)
対象要素の中で、URIのターゲット(#target) をidとして持つ要素にマッチします。例えば、http://www.example.com/sample.html#HTML にアクセスされた場合、id="HTML"属性を持つ要素にマッチします。
$(':target').css( 'color', 'red' );
:animated
アニメーション実行中の要素にマッチします。
$('p:animated').css( 'color', 'red' );
:contains(text)
text をテキストとして含む要素にマッチします。
$('p:contains(geek)').css( 'color', 'red' );
:empty
空の要素にマッチします。
$('p:empty').css( 'min-height', '20px' );
:has(selector)
対象要素の中で、selector にマッチする要素を子孫要素として持つ要素にマッチします。
$('p:has(strong)').css( 'color', 'red' );
:parent
対象要素の親要素にマッチします。
$('strong:parent').css( 'color', 'red' );
:hidden
非表示要素にマッチします。非表示要素には、head, title, meta, script, style などの非表示要素、CSS で display: none が設定された要素、width:0; height:0 が設定された要素、type="hidden" の input要素、祖先要素が非表示状態の要素が含まれます。
使い道がわかんない・・・
:visible
表示されている要素にマッチします。表示要素には html, body要素も含まれます。
使い道がわかんない・・・
:first-child
:last-child
対象要素の内、その要素が親要素から見て最初／最後の子要素であるものにマッチします。
$('p:first-child').css( 'color', 'red' );$('p:last-child').css( 'color', 'blue' );
:first-type-of
:last-type-of
対象要素の内、その要素が親要素から見て同じ種別の最初／最後の子要素であるものにマッチします。
$('p:first-type-of').css( 'color', 'red' );$('p:last-type-of').css( 'color', 'blue' );
:nth-child(index)
:nth-last-child(index)
対象要素の内、その要素の親要素から見て index 番目の子要素であるものにマッチします。最初の要素が１番目になります。:nth-last-child() は後ろから数えます。
$('li:nth-child(3)').css( 'color', 'red' );$('li:nth-last-child(3)').css( 'color', 'blue' );index は、２の倍数 (2n) や、２の倍数に１を加えたもの( 2n + 1 )などを指定することができます。
$('li:nth-child(2n)').css( 'color', 'red' );$('li:nth-child(2n+1)').css( 'color', 'blue' );
:nth-of-type(index)
:nth-last-of-type(index)
:nth-child() 、:nth-last-child() と同様ですが、同じ種別の要素のみを数えます。
$('li:nth-type-of(3)').css( 'color', 'red' );$('li:nth-last-type-of(3)').css( 'color', 'blue' );
:only-child
その要素が、親要素から見て唯一の子要素である場合にマッチします。
$('li:only-child').css( 'color', 'red' );
:only-type-of
その要素が、親要素から見て唯一の子要素である場合にマッチします。
$('li:only-type-of').css( 'color', 'red' );
■フォーム
:input
input、textarea、select、button要素にマッチします。
$(':input').css( 'color', 'red' );
:text
:password
:file
:checkbox
:radio
:submit
:reset
:button
:image
type="text" , type="password" 等の input要素にマッチします。
$('input:text').css( 'color', 'red' );
:checked
checked な状態の要素にマッチします。
:selected
selected な状態の要素にマッチします。
:disabled
disabled な状態の要素にマッチします。
$('input:disabled').css( 'color', 'gray' );
:enabled
enabled な状態の要素にマッチします。
$('input:enabled').css( 'color', 'red' );
jQueryを覚えるなら
]]>
]]>
]]>
]]>
]]>