f:id:tasukujp:20140831185540g:plain

jQueryを使う際に必要となるセレクタについてです。セレクタとは処理対象となるDOM要素を指定する記法で、CSSでも馴染みのある書き方ですね。これを知ってないと始まらないので基本的なパターンをまとめていきます。

セレクタ

この3種類が基本となります。全ての要素を指定する$('*')というものもありますがあまり使う事はないでしょう。

対象	記述法	説明
html要素	$('p')	全ての`<p>`要素
id要素	$('#name')	id="name"を持つ要素
class要素	$('.info)	class="info"を持つ全要素

上記の3種類を元に要素の指定範囲を広げます。

対象	記述法	説明
複数の要素	$('.info, .demo')	class="info"または"demo"の全要素
直下の要素	$('div > .info')	divタグ一階層下のclass="info"要素のみ
以下の要素	$('#name[空白].info')	id "name"以下の全てのclass "info"要素
隣接する要素	$('#name + .info')	id "name"要素の隣のclass "info"要素のみ
同階層の要素	$('#top ~ a')	id "top"要素と同じ階層にあるaタグ

ここでは階層がポイントとなってきます。
「複数の要素」に関しては階層は関係ないですが、まず「直下の要素」は一階層下の要素が対象となりますので二階層以下、又は同じ階層ですと対象外です。
「以下の要素」に関しては一階層以下全ての要素が対象になります。
「隣接する要素」と「同階層の要素」は同じ階層の要素のみです。
階層に関しては<body>が一番上でそこから一階層ずつ下がっていきます。bodyと同じ階層にある要素はありません。

以下にサンプルhtmlを用意してみましたので$(function() { }の中を色々変更して確認してみましょう。ちなみに、記述してある$('body~label').css~はbodyと同じ階層の要素はありませんので要素が取得出来てないですね。$('body>label')か$('body label')なら取得できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryセレクタの確認</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
   <script>
       $(function() {
           $('body ~label').css('color','red');
       });
   </script>
</head>
<body>
    <label><h1>jQueryセレクタの確認</h1></label>
    <div id="hoge1" class='main'>セレクタの確認1
        <div class="sub">　セレクタの確認1-1</div>
        <div class="sub">　セレクタの確認1-2</div>
        <div>
            <label class="sub-label">　　セレクタの確認1-2-1</label>
        </div>
        <div class="sub">　セレクタの確認1-3</div>
    </div>
    <div id="hoge2" class="main">セレクタの確認2
        <div class="sub">　セレクタの確認2-1</div>
        <div>
            <label class="sub-label">　　セレクタの確認2-1-1</label>
        </div>
        <div class="sub">　セレクタの確認2-2</div>
    </div>
    <div id="hoge3" class="main">セレクタの確認3</div>
</body>
</html>

参考：jQuery日本語リファレンス

TASK NOTES

TASK NOTES

【jQuery】セレクタについて

セレクタ