Design works

jQuery基礎#2:セレクター

セレクターとは

処理対象の要素を指定するもの。
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要素(0から数えるので実際は1行目から隔行)
$("tr:odd") // 奇数番目のtr要素(0から数えるので実際は2行目から隔行)
$("tr:eq(5)") // 5番目のtr要素(0から数えるので実際は6行目)
$("tr:gt(5)") // 5番目超のtr要素(0から数える)
$("tr:lt(5)") // 5番目以下のtr要素(0から数える)
$(":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") // 選択状態のすべての要素

 

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

コメントはお気軽にどうぞ!

ここがBEFORE

CAPTCHA


上記の内容で問題なければ、下記「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)