jQuery(1) : jQueryの基本を学ぼう

jQueryとは

jQueryはDOMやXMLHTTPRequest、XMLを簡単に操作するためのAPIを提供するJavaScriptライブラリで、AjaxやDHTMLを利用したインタラクティブなページを簡単に作成することができます。
jQuery以外にも、prototypeやdojo、mootoolsなど様々なJavaScriptライブラリがありますが、 jQueryの特徴は、短いコードで多くの処理を簡単に実行できる点です。実際にjQueryを使うと 驚くほど簡単にインタラクティブなページを作成できることが分かると思います。
また、ほとんどのJavaScriptライブラリはブラウザの違いをある程度吸収しており、開発効率が格段に上がるため積極的に利用することをお勧めします。

セットアップ

jQueryライブラリをダウンロードし、 jQueryライブラリへのパスをscriptタグのsrc属性で指定します。

<script type="text/javascript" src="path/to/jquery.js"></script>

通常のJavaScriptでは、ページ読み込み完了時に実行するスクリプトは、次の様にonloadイベントハンドラを使用します。

window.onload = function() {
  // ここにページ読み込み完了時に実行するコードを記述
}

しかし、onloadイベントは全ての画像をダウンロードするまで実行されません。サイズの大きな画像や大量の画像をページ内で使用している場合はスクリプトの実行が待たされます。
jQueryではこの問題に対応するreadyイベントが用意されています。readyイベントはDOMの準備が完了次第、画像のダウンロードを待たずにスクリプトが実行されます。
通常、jQueryではonloadイベントは使用せず、readyイベントを使用します。

<script type="text/javascript">
$(document).ready(function() {
  // ここにページ読み込み完了時に実行するコードを記述
});
</script>

エレメントの選択(1)

jQueryではCSS形式で簡単にエレメントを選択できます。

• <a>エレメントは、$("a") で選択できます。
• id属性が"elm"のエレメントは、$("#elm")で選択できます。
• class属性が"name"のエレメントは、$(".name")で選択できます。

この方法で取得したオブジェクトはDOMオブジェクトではなくjQueryオブジェクトです。 そのため、$("a").innerHTMLの様な使い方はせず、jQueryオブジェクトのメソッドを使用してDOMオブジェクトを操作します。

例えば、class属性が"important"である<a>エレメントを選択し、<a>エレメント内の文字列の色を赤にする場合は、次の様に書きます。

$("a.important").css({"color" : "red"}); 

これを通常のJavaScriptで書いた場合、次の様にもっと複雑なコードになるでしょう。

var divs= document.getElementsByTagName("a");
for (var i=0; i<divs.length; i++) {
  if((divs[i].getAttribute("className") || divs[i].getAttribute("class"))=="important"){
      divs[i].style.color="red";
  }
}

通常のJavaScriptのコードと見比べれば一目瞭然ですが、jQueryを使えば分かりやすいコードが書けます。分かりやすいコードはバグも混入しにくく、デバッグやメンテナンスもやりやすくなるため、必然的に品質の高いコードができます。この様に簡潔に分かりやすいコードが自然に書けるというのがjQueryの特徴です。

エレメントの選択(2)

選択対象のエレメントが複数ある場合、その中で特定のエレメントを取り出す方法が用意されています。いくつかの例を見てみましょう。

複数の<li>エレメントの1番目のエレメントを選択する場合、$("li:first")の様に選択できます。 偶数番目は$("li:odd")、奇数番目は$("li:even")の様に選択できます。奇数と偶数が逆だと思われるかもしれませんが、JavaScriptの世界では0から始まるので、1番目が0、つまりevenになります。
これらを使って実際に上のメニューの文字列の色を変えるコードを示します。

メニューの1行目の文字列を赤にする

$("li.menu-item:first").addClass("red");

メニューの奇数行の文字列を赤にする

$("li.menu-item:even").addClass("red");

初期状態に戻す

$("li.menu-item").removeClass("red");

他にも代表的なものとして以下のセレクターが使えます。
全てのセレクターの説明はここを参照してください。

• ":last" : 最後のエレメントを選択する
• ":eq(n)" : n番目のエレメントを選択する(0から始まる点に注意)

メソッド

jQueryでは様々な処理を行うためのメソッドが多数用意されていますが、ここでは代表的なメソッドを紹介します。

まずは既にサンプルコードに出てきたスタイルの編集を行うメソッドを見てみましょう。
スタイルの編集を行うメソッドには、エレメントのスタイルを直接編集する".css()"、予め用意しておいたクラスをエレメントに追加する".addClass()"、エレメントからクラスを削除する".removeClass()"などがあります。
例えば、<li>エレメントの文字列を太字の赤にしたい場合、".css()"メソッドの場合は以下の様になります。

$("li").css( { "font-weight" : "bold", "color" : "red" } );

".addClass()"メソッドの場合は、予め以下の様に"important"というクラスを定義しておきます。

<style type="text/css">
.important {
  font-weight: bold;
  color: red;
}
</style>

このクラスをエレメントに追加します。

$("li").addClass("important");

次にイベントメソッドを見てみましょう。
イベントの中でも最もよく利用するクリックイベントは、".click()"メソッドを使用します。
例として、"click me!"と書かれている場所をクリックすると、文字列の色が赤色に変化するというものを作ってみましょう。

click me!

まず、以下のHTMLを用意します。

<p class="click">click me!</p>

上の<p>エレメントに対してクリックイベントを追加します。

$("p.click").click(function() {
  $(this).css({ "color" : "red" });
});

ここで、"$(this)"は ".click()"メソッドが呼び出されたオブジェクト、つまり$("p.click")のことです。

最後にエレメントのコンテンツを編集するメソッドを見てみましょう。
エレメントのHTMLを編集する"html()"メソッド、テキストを編集する"text()"メソッドなどがあります。
例として、"click me!"と書かれている場所をクリックすると、文字列が"Hello!"に変化するというものを作ってみましょう。

click me!

まず、以下のHTMLを用意します。

<p class="hello">click me!</p>

上の<p>エレメントに対してクリックイベントを追加します。

$("p.hello").click(function() {
  $(this).text("Hello!");
});

メソッドチェーン

"click me!"という文字列をクリックした時に、文字列を"Hello!"に変更し、さらに色を赤に変えるものを作ってみましょう。

click me!

まず、以下のHTMLを用意します。

<p class="chain">click me!</p>

上の<p>エレメントに対してクリックイベントを追加します。

$("p.chain").click(function() {
  $(this).text("Hello!");
  $(this).css({"color" : "red"});
});

上のコードでも正しく動作しますが、jQueryにはさらに簡潔に書けるような工夫が施されています。
jQueryのメソッドの多くは戻り値としてjQueryオブジェクトを返すように設計されています。そのため、何らかのメソッドを実行した後に続けて別のメソッドを実行することが可能なのです。
上のコードは次の様に簡潔に書くことができます。

$("p.chain").click(function() {
  $(this).text("Hello!").css({"color" : "red"});
});

このコードでは、"text()"メソッドを実行し、戻り値として返ってきたjQueryオブジェクトに対して"css()"メソッドを実行しています。
あるエレメントに対して複数の処理を実行する場合、このメソッドチェーンの威力が発揮されます。このメソッドチェーンは一旦慣れてしまうとjQueryなしではやってられないというくらい強力なjQueryの武器です。

ストライプテーブル

jQuery連載の第1回目のまとめとして、ストライプテーブルを作ってみましょう。単にストライプにするだけでは面白くないので、ストライプにするボタンと元に戻すボタンを作ってクリックした際に、ストライプにしたり、元に戻したりできるようにしましょう。
ここまでの内容を理解している人なら、もう一人で作れますよね？

ストライプにする 元に戻す

ID	名前
1	田中
2	佐藤
3	鈴木
4	本田
5	中田
6	斉藤
7	河合
8	小田
9	森田
10	藤井

まずは、ボタンとテーブルのHTMLを用意します。

<button id="stripe-button">ストライプにする</button>
<button id="initialize-button">元に戻す</button><br />
<table id="stripe">
<thead>
<tr><th>ID</th><th>名前</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>田中</td></tr>
<tr><td>2</td><td>佐藤</td></tr>
<tr><td>3</td><td>鈴木</td></tr>
<tr><td>4</td><td>本田</td></tr>
<tr><td>5</td><td>中田</td></tr>
<tr><td>6</td><td>斉藤</td></tr>
<tr><td>7</td><td>河合</td></tr>
<tr><td>8</td><td>小田</td></tr>
<tr><td>9</td><td>森田</td></tr>
<tr><td>10</td><td>藤井</td></tr>
</tbody>
</table>

上のHTMLで肝なのは、<thead>タグと<tbody>タグです。
CSSスタイルも用意します。

<style type="text/css">
table#stripe thead tr {
  text-align: center;
  background-color: #cccccc;
}
table#stripe tbody tr {
  background-color: #ffffff;
}
table#stripe th {
  text-align: center;
  width: 50px;
}
table#stripe td {
  width: 50px;
}
table#stripe tbody tr.stripe1 {
  background-color: #ffccff
}
table#stripe tbody tr.stripe2 {
  background-color: #ffcccc
}
</style>

ここまで用意できれば、後はjQueryの出番です。
ストライプにするボタンと元に戻すボタンにクリックイベントを追加します。

$("#stripe-button").click(function() {
  $("table#stripe tbody tr:even").addClass("stripe1");
  $("table#stripe tbody tr:odd").addClass("stripe2");
});
$("#initialize-button").click(function() {
  $("table#stripe tbody tr").removeClass("stripe1 stripe2");
});

以上で完成です。
".addClass()"、".removeClass()"メソッドはスペース区切りで複数のクラスを指定できます。
<thead>と<tbody>を使わない場合は、ヘッダーの部分もストライプの対象になってしまい、もう少し工夫が必要になります。

補足：　エレメントの選択はコストのかかる処理ですので、同じエレメントを何回も使う場合はローカル変数に格納して使いまわす方が処理が速くなります。コードが小さい内はあまり差を感じませんが、もう少し大きなコードになるとその差は非常に大きくなりますので、この違いを普段から意識しておく習慣をつけましょう。上記のコードは次の様になります。

var $stripe_tr = $("table#stripe tbody tr");
$("#stripe-button").click(function() {
  $stripe_tr.filter(":even").addClass("stripe1");
  $stripe_tr.filter(":odd").addClass("stripe2");
});
$("#initialize-button").click(function() {
  $stripe_tr.removeClass("stripe1 stripe2");
});

ローカル変数に"$"を付けているのは、この変数がjQueryオブジェクトだということが一目で分かるようにするためです。この様な工夫がコードを読みやすくします。

どうでしたか？jQueryを使えば非常に簡単にインタラクティブなページを作成できることを実感して頂けたのではないでしょうか？
通常のJavaScriptだけでこれと同じもの（IEでもFirefoxでも動くもの）を作ってみれば、なおjQueryの良さが分かると思いますので、余力のある人はトライしてみてはいかがでしょうか。