セレクターとは

処理対象の要素を指定するもの。
CSSのセレクターと同じ記述をするため、
Javascript に比べて簡単に要素の指定ができる。

【参考サイト】Selectors／jQuery日本語リファレンス

 

基本セレクター

$("#hoge") // ID「hoge」の要素
$("h1") // h1要素
$(".foo") // クラス名「foo」の要素
$("h1","p.foo","span") // h1要素、クラス名「foo」のp要素、span要素
$(*) // ユニバーサル（全称）セレクター

階層セレクター

$("ul li") // h1要素の子孫li要素
$("li > a") // li要素の子a要素
$("ul + p") // ul要素の直後にあるp要素［同じ親階層］
$("h2 ~ p") // h2要素以降のp要素［同じ親階層］

基本フィルタ

$("li:first") // 一番最初のli要素
$("li:last") // 一番最後のli要素
$("input:not(:checked)") // input要素のcheckedがないもの
$("tr:even") // 偶数番目のtr要素（０から数えるので実際は１行目から隔行）
$("tr:odd") // 奇数番目のtr要素（０から数えるので実際は２行目から隔行）
$("tr:eq(5)") // 5番目のtr要素（０から数えるので実際は６行目）
$("tr:gt(5)") // 5番目超のtr要素（０から数える）
$("tr:lt(5)") // 5番目以下のtr要素（０から数える）
$(":header") // 見出し要素（h1〜h6）
$("img:animated") // アニメーション実行中のimg要素

コンテンツフィルター

$("p:contains('abc')") // 文字列「abc」を含むp要素
$("p:parent") // 子要素をもつp要素（テキストも含む）
$("p:empty") // 子要素をもたないp要素（テキストも含む）
$("p:has(strong)") // 子要素strongをもつp要素

可視性（表示／非表示）フィルター

$("div:visible") // 表示状態のdiv要素
$("div:hidden") // 非表示状態のdiv要素

属性フィルター

$("a[target]") // taget属性をもつa要素
$("a[target = '_blank']") // target属性の値が「_blank」のa要素
$("a[target != '_blank']") // target属性の値が「_blank」ではないa要素
$("a[href ^= 'http']") // href属性の値が「http」で始まるa要素
$("a[href $= '.php']") // href属性の値が「.php」で終わるa要素
$("a[href *= 'index']") // href属性の値に「index」を含むa要素
$("a[href ^= 'http'][target = '_blank']")
// すべての[属性フィルター]の条件を満たすa要素

子要素フィルター

$("ul li:nth-child(数値またはキーワード)")
/* 親ul要素の子li要素を数値番号、またはeven（奇数番目）odd（偶数番目）のキーワード、
   数値n（数値の倍数番目（1から数える））で指定。*/
$("ul li:first-child") // 親ul要素の最初の子li要素
$("ul li:last-child") // 親ul要素の最後の子li要素
$("ul li:only-child") // 親ul要素の唯一の子li要素

フォーム

$(":input") // すべてのinput、textarea、select、button要素
$(":text") // type属性の値が「text」のinput要素
$(":password") // type属性の値が「password」のinput要素
$(":radio") // type属性の値が「radio」のinput要素
$(":checkbox") // type属性の値が「checkbox」のinput要素
$(":file") // type属性の値が「file」のinput要素
$(":hidden") // type属性の値が「hidden」のinput要素と非表示状態の要素
$(":image") // type属性の値が「image」のinput要素
$(":button") // type属性の値が「button」のinput要素とbutton要素
$(":submit") // type属性の値が「submit」のinput要素とbutton要素

フォームフィルター

$(":enabled") // 利用可能な要素
$(":disabled") // 利用不能な要素
$(":checked") // チェックされている要素
$(":selected") // 選択状態のすべての要素

 

セレクターの指定はなるべく簡素に。