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の直接の子でなければなりません。孫やひ孫は選択されません。