jQueryのセレクタの指定法


ここのところ、JavaScriptとjQueryを勉強しています。

jQueryの基本であるセレクタの書き方についてのメモです。

基本的な指定法

$(“div”)
要素divすべてを選択
$(“.main”)
クラスmainの要素すべてを選択
$(“#foo”)
id=”foo”の要素を選択

組み合わせた指定法

ちょっとまぎらわしいので要注意です。

$(“div a”)
div要素の下に存在するa要素すべてを選択
(aはdivの子孫であればよい。子でも孫でもOK。)
$(“div > a”)
div要素の直下に存在するa要素すべてを選択。
(aはdivの子でなければならない。孫はダメ。)
$(“div,li,a”)
div要素すべてとli要素すべてとa要素すべてを選択。
(いわゆるorだと考えればよいでしょう。)
$(“label + input”)
label要素の直後にあるinput要素を選択。
(間にほかのものがあるとダメ)
$(“#prev ~ div”)
id=”prev”の要素の後ろ(同レベル)にあるdiv要素すべてを選択。
英語ではNext Sibling Selectorという。Sibling(兄弟)は、同じレベルで並んでいる要素のこと。

次の例のようになる:

<body>
  <div>選択されない(divだが#prevの前にあるため)</div>
  <span id="prev">ここが基準(選択されない)</span>
  <div>選択される</div>
  <div>選択される
    <div>選択されない(兄弟でないので)</div>
  </div>
  <span>選択されない(divでないので)</span>
  <div>選択される</div>
</body>

$(“div a”)と$(“div > a”)の違いに注意

前者$(“div a”)は、div要素の「子孫」であるa要素すべてを選択。a要素は、divの子でも、孫でも、ひ孫でもOK。

後者$(“div > a”)は、div要素の「子」であるa要素すべてを選択。こちらは、aはdivの直接の子でなければなりません。孫やひ孫は選択されません。