Web制作の現場で使えるjQuery　UIデザイン入門 ― 第3回

初めてのjQuery：セレクターAPIを一挙解説（前編） (2/6)

要素を指定するためのセレクターAPI

　jQueryを利用したスクリプトでは、（1）どの(X)HTMLの要素を操作するかをセレクターで指定し、（2）処理の内容を書きます。具体的には、$("...")の内側にセレクターを記述し、その後ろに .(ドット) でjQueryの命令を記述していきます。jQueryは、ほぼすべてこの形式で処理を書きます。

$(function(){
    $("セレクター").jQueryの命令
})

　jQueryには「セレクターAPI」という機能が用意されており、簡単かつ柔軟な方法で目的の(X)HTML要素を指定できるようになっています。jQueryで使えるセレクターを一通り紹介しましょう。

jQueryで使えるセレクター

1. CSSでよく利用されるセレクター
2. CSS2のセレクター
3. CSS3のセレクター
4. CSSの属性セレクター
5. jQueryの独自フィルター

1．CSSでよく利用されるセレクター

　jQueryでは、CSSでおなじみの要素セレクターやIDセレクター、クラスセレクターから、子孫セレクター、ユニバーサルセレクター、セレクターのグルーピングまで、さまざまなセレクターが利用できます。

■要素セレクター

　特定の(X)HTML要素に対して命令を実行する際には、要素セレクターを利用します。サンプルスクリプトのcss("color","red")は、「CSSのcolorプロパティの値をredに変更する」というjQueryの命令です（jQueryの命令については次回、詳しく説明します）。

▼サンプルコード（HTML部分）

<ul>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("li").css("color","red");
})

▼実行結果（実際のWebページ）

　li要素のCSSのcolorプロパティが変更され、赤色で表示されます。

■IDセレクター

　文書にある要素を丸ごとではなく、特定のid属性を持つ要素に命令を実行します。id属性の値に#(ハッシュ)を付けたものをセレクターとして利用します。

▼サンプルコード（HTML部分）

<ul>
    <li id="first">テキストテキストテキストテキストテキスト</li>
    <li id="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("#first").css("color","red");
})

▼実行結果（実際のWebページ）

　id属性にfirstが設定されたli要素（最初のli要素）が赤色になります。

　IDだけでどの要素なのか特定できますが、どの要素名なのか分かりやすくするために、要素セレクターとIDセレクターをつなげても指定できます。

$(function(){
    $("li#first").css("color","red");
})

■クラスセレクター

　特定のclass属性を持つ要素に対して命令を実行します。class属性の値に.(ドット)を付けたものをセレクターとして利用します。

▼サンプルコード（HTML部分）

<ul>
    <li class="first">テキストテキストテキストテキストテキスト</li>
    <li class="second">テキストテキストテキストテキストテキスト</li>
    <li class="third">テキストテキストテキストテキストテキスト</li>
    <li class="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $(".second").css("color","red");
})

▼実行結果（実際のWebページ）

　class属性にsecondが設定されたli要素（2番目のli要素）が赤色になります。

　IDセレクターと同様に、要素セレクターとクラスセレクターをつなげても書けます。

$(function(){
    $("li.second").css("color","red");
})