■基本

$('*')

すべての要素にマッチします。

$('*').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を覚えるなら

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL) 新品価格 ￥3,129から (2013/11/3 13:37時点)

最近ではWEBアプリケーションの構築でJavaScriptを使うことも多くなってますね。
WEBアプリケーションを構築する際に今まではPHPを使ってたので、PHPライクな関数でjQueryを拡張してみようと思います。

実装する関数は、HTMLタグを除去するstripTags関数と特殊文字をHTMLエンティティに変換するhtmlSpecialChars関数の２つ。

 1. $.extend({
 2.   'stripTags':function(text){
 3.     return $('<div>').html(text).text();
 4.   },
 5.   'htmlSpecialChars':function(text){
 6.      return $('<div>').text(text).html();
 7.   }
 8. });

１行目：
jQueryの拡張を宣言。

２〜８行：
拡張したい関数名をキー値に持つFunction型を定義していきます。

３行目：
stripTagsの処理。指定した要素を引数で渡された文字列をHTML文字列の規定値としてセットし、テキストノードとして結合する。

６行目：
htmlSpecialCharsの処理。指定した要素を引数で渡された文字列をエスケープされたHTMLエンティティとしてセットし、HTML文字列に変換する。

jQueryを覚えるなら

jQueryクックブック 新品価格 ￥3,780から (2013/5/7 15:37時点)