セレクタによる条件指定、抽出

セレクタとは「$('#id名')」「$('.クラス名')」「$('要素名')」などで、これらをまとめて指定するには、「$('要素名,#id名,.クラス名')」などとカンマで区切ります。また$('*')とした場合、全要素が対象になり、処理時間も長くなります。

インデックスによるセレクタ

要素（エレメント）には出現した順番に０から始まるインデックス番号というものが自動的に割り当てられます。このインデックスによるセレクタでは「$(':eq(インデックス番号)')、$(':lt(インデックス番号)')、$(':gt(インデックス番号)')、$(':even')、$(':odd')、$(':first')、$(':last')、$(':not(セレクタ)')といったものがあります。「:eq」は与えられた番号を持つエレメントに、「:lt」はより小さい、「:gt」はより大きいものを選択し、マッチします。「:even」は偶数、「:odd」は奇数にマッチします。また「:first」は最初のエレメント、「:last」は最後のエレメント、「:not」は与えたセレクタに一致しないエレメントを全て返します。

コンテンツによるセレクタ

コンテンツによるセレクタには、$(':contains(テキスト)')、$(':has(セレクタ)')、$(':empty')、$(':parent')があります。「:contains(テキスト)」は引数に与えられた文字列を含む要素にマッチします。「:has(セレクタ)」は引数に与えられたセレクタにマッチする要素を子ノードとして持つ要素にのみマッチします。「:empty」は子ノードを保有しない空の要素にのみマッチし、「:parent」は子ノードを持つ要素にマッチし、この両者は互いに反対の働きをします。

子ノードに的を当てたセレクタ

$(':first-child')、$(':last-child')、$(':nth-child(インデックス番号)')、$(':only-child')がこれに当たります。$(':first')と$(':last')に似ていますが、$(':first-child')と$(':last-child')は、前者のように選択されたエレメント自体に一致するのではなく、選択されたエレメントの子ノードに一致します。また、前者が一つのエレメントのみに一致するのに対して、後者は元のセレクタに一致するエレメントが幾つかあり、各自子ノードを保有していればその全てに一致します。$(':nth-child(インデックス番号)')は、$(':first-child')と$(':last-child')の間で使われます。また、$(':eq(インデックス番号)')が０から始まるのに足し、$(':nth-child(インデックス番号)')は１から始まります。要するに$(':nth-child(1)')は、$(':first-child')は同じ意味になります。$(':only-child')は親エレメントが子ノードを一つだけ保有する場合に一致します。

階層を使ったセレクタ

DOMの構造を使ってマッチさせるセレクタを言います。$('親 > 子')、$('先祖 子孫')、$('前 + 次')、$('前 ~ 兄弟')がこれに当たります。$('親 > 子')のセレクタでは直接の親子関係が条件に一致した要素だけがマッチし、スペースで区切った$('先祖 子孫')のセレクタでは、階層が先祖と子孫に該当すれば、直接の親子関係になくてもマッチします。$('前 + 次')のセレクタでは直接の前後関係にある要素にマッチし、$('前 ~ 兄弟')のセレクタでは、チルダの前で指定した要素以降において同列兄弟及び指定した条件に一致する要素がマッチします。また、プラスとチルダを使ったセレクタでは同じ親を持つ兄弟関係になるものでないと使えません。

表示状態を条件とするセレクタ

$(':hidden')、$(':visible')がこれに当たります。$(':hidden')は隠されたエレメントにマッチし、$(':visible')は、$(':hidden')に該当しない全てのエレメントにマッチします。隠されたエレメントとは、「display:none」や「hidden」が設置されたフォーム、高さと横幅が0に設定されているエレメント、上位エレメントによって隠されているエレメントなどです。ちなみに「visibility:hidden」は現在、隠されたエレメントにはならないようになっています。

フォームのセレクタ

$(':input')は、inputに含む要素と共にselectやtextareaにも一致します。$(':text')、$(':radio')、$(':checkbox')、$(':button')、$(':submit')、$(':reset')、$(':file')、$(':image')、$(':password')は、対応するフォームコントロールにそれぞれ一致します。$(':disabled')は「disable="disabled"」要素に一致し、フォームコントロールだけに限らず、他の要素でも一致します。$(':checked')はチェックボックスとラジオボタンにおいてチェックされている要素にマッチします。$(':selected')は選択されたoption要素に一致するため、複数を選択できるオプションリストで選択されているものがあれば、全てマッチします。

属性セレクタ

属性のセレクタは、前方、後方、部分一致など多様な手段で属性値を見つけ出し、マッチさせます。
$('[属性名]')は指定された属性名を持つ要素を全てにmatchします。
$('[属性名 = 値]')は指定した属性が指定した値を持つものにmatchします。
$('[属性名 != 値]')は指定した属性が指定した値でない場合にmatchします。
$('[属性名 ^= 値]')は指定された値で属性値が始まっている場合にmatchします。
$('[属性名 $= 値]')は指定された値で属性値が終わっている場合にmatchします。
$('[属性名 *= 値]')は指定された値を属性値が含んでいる場合にmatchします。
$('[属性名 |= 値]')は指定された値が属性値と一致する場合と属性値のハイフンより前で指定された値が属性値と一致する場合にmatchします。
$('[属性名 ~= 値]')は指定された値がスペースで区切られた文字列、または単語として属性値に含まれている場合にmatchします。
$('[属性名 = 値][属性名2 = 値2]')は、指定した属性セレクタの全てに一致する要素のみmatchします。