これから主流になっていくであろうHTML5は、JavaScript無しでは語れません。当講座でも、これからHTML5+CSS3の作例を紹介するにあたっては、jQueryを使うシーンが多くなるでしょう。そこで、第一回目となる今回は、jQueryプラグインに頼らず、jQueryだけを使ってフォトライブラリを作って、改めてjQueryの仕組みをおさらいしましょう。

セレクタを理解する。

jQueryを使うと、ブラウザに依存することなく、CSSライクなセレクタで、とても簡単にDOM要素を検索することができます。 具体的には、$("CSS文字列")と入力すると、CSSで指定した要素を検索してjQueryオブジェクトを返してくれます。 いくつかサンプルを見ながら、セレクタの使い方をおさらいしてみましょう。

※DOM（Document Object Model）とは、XMLやHTMLの各要素(たとえば<p>とか<img>)にアクセスする仕組みのことです。このDOMを操作することで、要素の内容やスタイルを操作できます。例えば<p>タグの中身のテキストを変更したり、<img src="hoge.jpg">のsrcの中身を変更して別の画像に差し替えるといったことができます。

1 #id

ID属性名の頭に[#]をつけると、そのIDを持つ要素を返します。 次のサンプルでボタンをクリックしてみてください。

サンプルを見る

「con2」が赤くなりました。 これは、次のようなコードになっています。

<div id="con1">con1</div>
<div id="con2">con2</div>
<div id="con3">con3</div>

<button onclick="$('#con2').css('color','red')">クリックしてね</button>

ボタンのonclickイベントで、$("#con2")としてIDがcon2の要素を検索して、jQueryのcssメソッドで色を赤く変えています。

2 .class

クラス属性名の頭に[.]をつけるとそのクラスを持つ要素全てを含むjQueryオブジェクトを返します。 次のサンプルでボタンをクリックしてみてください。

サンプルを見る

「猫」だった部分がすべて「ニャー」に変わりました。 これは、次のようなコードになっています。

<div class="cat">猫</div>
<div class="dog">犬</div>
<div class="cat">猫</div>
<div class="cat">猫</div>
<div class="dog">犬</div>
<div class="cat">猫</div>
<div class="monkey">猿</div>

<button onclick="$('.cat').text('ニャー')">クリックしてね</button>

ボタンのonclickイベントで、$('.cat')として、catをクラスに持つ要素すべてを取得して、「ニャー」に書き換えています(.text('ニャー'))。

このように、jQueryセレクタを使うと、対象となる要素すべてを一度に取得して、スタイルを変えたり、内容を変更したりすることができます。

※ちなみに、jQueryセレクタで取得した対象は、DOM要素を配列として含むjQueryオブジェクトになっているので、DOM要素のプロパティに直接アクセスすることはできません。
たとえば、

$("#con2").style.color = "red";

というような書き方はできないので、
この場合は、

$("#con2")[0].style.color = "red";

とすると、jQueryオブジェクトの中のDOM要素を指定することができます。

フォトライブラリを作る。

ここまでのおさらいに、サムネイルをクリックして閲覧する簡単なフォトライブラリを作ってみましょう。

サンプルを見る

コードはこうなっています。

<div id="wrapper">
　　<table align="center">
　　<tr>
　　<td colspan="4" width="700" height="500">
　　　　<img id="mainvisual" src="images/default.jpg" />
　　　　<p>サムネイルをクリックすると↑の画像を切り替えます。</p>
　　</td>
　　</tr>
　　<tr>
　　<td>
　　　　<img class="selectimage" src="images/uploads/01.jpg" alt="01" width="150px" title="" />
　　</td>
　　<td>
　　　　<img class="selectimage" src="images/uploads/02.jpg" alt="02" width="150px" title="" />
　　</td>
　　<td>
　　　　<img class="selectimage" src="images/uploads/03.jpg" alt="03" width="150px" title="" />
　　</td>
　　<td>
　　　　<img class="selectimage" src="images/uploads/04.jpg" alt="04" width="150px" title="" />
　　</td>
　　</tr>
　　</table>
</div>
<script>
$(function() {
　　$(".selectimage").click(image_click);
　　function image_click(){
　　　　$("#mainvisual").attr("src","images/uploads/" + this.alt + ".jpg");
　　　　$("#mainvisual").next().text(this.alt+"番目の画像をクリックしました。");
　　}
});
</script>

サムネイル部分のimg要素にはすべて、クラス「selectimage」が指定してあるので、

$(".selectimage").click(image_click);

として、クラス「selectimage」を含むすべてのjQueryオブジェクトで、クリックしたときに関数「image_click」が実行されるようにします。

次に関数「image_click」について見て行きましょう。 thisという表記がありますね。 クリックイベントに割り当てられた関数内では、thisはクリックされた要素を表すので、この場合はクリックされたサムネイルのimg要素にあたります。

$("#mainvisual").attr("src","images/uploads/" + this.alt + ".jpg"); 

これは、$("#mainvisual")で取得したオブジェクトについて、src属性を「images/uploads/サムネイルのalt属性.jpg」に書き換えるという意味です。

$("#mainvisual").next().text(this.alt+"番目の画像をクリックしました。");

$("#mainvisual").next()は $("#mainvisual")で取得したオブジェクトの隣(next())に並ぶ要素を取得します。

この場合は「<p>サムネイルをクリックすると↑の画像を切り替えます。</p>」の部分に当たります。 次に.text()を使って、取得した<p>タグの内容を書き換えています。

jQueryを使うと、ブラウザごとの差異を意識せず、しかも簡単に要素を取得して操作することができますね。 ID、class以外にも色々な要素検索の仕方があるので、試してみるといいでしょう。 cssで使える書き方ならほぼ大丈夫です。

河野　義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナー（WCBセミナー）の講師としてもおなじみ。

(参考サイト:Selectors-jQuery日本語リファレンス )

マイナビクリエイターより転載