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

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

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

要素には出現した順番に0から始まるインデックス番号というものが自動的に割り当てられます。このインデックスによるセレクタでは「$(':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(インデックス番号)')が0から始まるのに足し、$(':nth-child(インデックス番号)')は1から始まります。要するに$(':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要素にマッチするため、複数を選択できるオプションリストで選択されているものがあれば、全てマッチします。

属性セレクタ

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