セレクタ

jQueryのセレクタは非常で多機能であるが多機能ゆえにいろいろなバリエーションがありセレクタの指定方法が豊富すぎてとらえどころのないところがある。
jQueryのセレクタの指定方法については既に後述の「セレクタについての参考URL」に詳しく解説された記事があるが、ここでは愚鈍人なりにセレクタの面白い指定方法について試してみた。

セレクタの面白い指定方法

スペースがあるかないかで異なる例

以下の例ではCSSクラスhogiの2番目の要素を指定しているが.hogi:eq(1)の：の前にスペースが有るか無いかで選択される場所が異なる。
（１）スペースが無い場合はhogi1-2，（２）有る場合はhogi2が選択される。
これは（２９の場合はCSSクラスhogiの2番目の要素ではなくCSSクラスhogiの子孫要素の2番目の要素を指定したことになるためである。

(1)　$(".hogi:eq(1)").css("color","red");
(2)　$(".hogi :eq(1)").css("background", "yellow")

hog1-1

hog1-2

hog1-3

hog2

hog3

        <div class="hogi">
            <div>hog1-1</div>
            <div>hog1-2</div>
            <div>hog1-3</div>
        </div>
        <div class="hogi">
            <div>hog2</div>
        </div>
        <div class="hogi">
            <div>hog3</div>
        </div>
        <button onclick="button_onclick();">ClickMe</button>
        <script type="text/javascript">
            function button_onclick(){
                $(".hogi:eq(1)").css("color","red");
                $(".hogi :eq(1)").css("background", "yellow")
            };
        </script>

カンマで区切ってセレクタの適用範囲を指定した例

$("div","#hogi").css("color","red");

この例ではidがhogiの要素の中のdiv要素の色を指定している。
var fuga=$("#fuga");
$("div",fuga).css("color","yellow");

この例では変数fugaにidがhogiの要素のjQueryオブジェクトを代入した上で、さらに変数fugaで指定された領域の中のdiv要素の色を指定している。
更に以下のように、セレクタの適用範囲としてhtml文字列を指定する事もできる。

$("#hoge","<div><div id='hoge'>hoge</div></div>").css("color","blue").appendTo("#hogi");

hogi

fuga

    <div id="hogi">
        <div>hogi</div>
    </div>
    <div id="fuga">
        <div>fuga</div>
    </div>
    <button onclick="button_onclick2();">ClickMe</button>
    <script type="text/javascript">
        function button_onclick2(){
            $("div","#hogi").css("color","red");
            var fuga=$("#fuga")
            $("div",fuga).css("color","yellow");
            $("#hoge","<div><div id='hogehoge</div></div>").css("color","blue").appendTo("#hogi");
        };
    </script>

セレクタについての参考URL

JavaScriptの参考書 ／ Ajaxの参考書 ／ JQueryの参考書 ／ HTMLの参考書 ／ CSSの参考書