このページの本文へ

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

2009年07月30日 10時00分更新

文●西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

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

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


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


 jQueryには「セレクターAPI」という機能が用意されており、簡単かつ柔軟な方法で目的の(X)HTML要素を指定できるようになっています。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");
})


この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く