ポイント4
繰り返し処理は不要

 jQueryオブジェクトでは繰り返し処理を意識する必要がありません。 $()関数は条件によっては複数の要素を返すことがあります。例えば、図2の例でも$()関数は複数の<img>要素を取り出しています。うれしいことに、jQueryオブジェクトはこれら要素のすべてに対して、「.」以降のメソッド部分の処理を実行してくれるのです。

 一般的なJavaScriptであれば、要素のセットから一つずつ要素を取り出し、処理していく必要があります。JavaScriptを理解している人であれば、まずはfor命令の利用を思い浮かべるでしょう。しかしjQueryではこのような手間をかける必要がありません。この性質もまた、jQueryがシンプルにコードを書ける理由となっています。

ポイント5
メソッドは連結して呼び出せる

 図3のリストに、ちょっとだけコードを追加してみましょう(リスト1)。これで、アイコン画像をリサイズするとともに、枠線で画像を囲みなさいという意味になります。このように、jQueryでは複数のメソッドをどんどん連結して書けます。この性質のことを、「メソッドチェーン」と呼びます。メソッドチェーンを利用することで、特定の要素に対する操作を$() 関数を何度も呼び出すことなく、なに(オブジェクト)を、こうして(メソッド1)、ああして(メソッド2)、そうする(メソッド3)…のように、自然に表現できます。

リスト1●メソッドチェーンを使用したコード(basic.htmlの修正)
[画像のクリックで拡大表示]

 例えば、リスト2はメソッドチェーンを活用した典型的な例です。findメソッドは「現在の要素の配下からセレクタに合致した要素を取り出す」というメソッドです。ここでは、このfindメソッドを利用して<div id="#area">要素配下のtype1~3クラスを持つ要素を検索し、その背景色をそれぞれ黄色、水色、黄緑色に設定しています(図8)。

リスト2●メソッドチェーンを利用したコード(basic2.html)
[画像のクリックで拡大表示]
図8●それぞれの<p>要素にスタイルを設定
図8●それぞれの<p>要素にスタイルを設定

 ここで注目してほしいのは、find/cssメソッドで個々の子要素を処理した後、endメソッドを呼び出している点です。endメソッドは、「直前の、要素セットに影響を与える処理を取り消す」ためのメソッドで、この場合であれば直前に行ったfindメソッドの処理を打ち消します。これによって、次のfindメソッドは前のfindメソッドで見つかった要素セットを基点としてではなく、もともとの<div id="area">要素を基点として検索を行うことができるのです(図9)。

図9●リスト2のfindとendメソッドの挙動
図9●リスト2のfindとendメソッドの挙動

 このように、メソッドチェーンとendメソッドとを併用することで、複数の要素に対する処理をまとめて記述できるだけでなく、毎回、<div id="area">要素を検索する必要がなくなるため、処理も効率化できます。

jQueryによるイベント処理

リスト3●jQueryによるイベント処理の例(basic3.html)
[画像のクリックで拡大表示]
図10●マウスポインタを当てると段落をハイライト表示
図10●マウスポインタを当てると段落をハイライト表示

 JavaScriptでは、ユーザーがボタンをクリックした、メニューにマウスポインタが乗った/外れた、キーボードから文字を入力した──といった動作をきっかけに処理を行うことがほとんどです。そして、このきっかけのことを「イベント」と呼びます。

  jQueryでは、こうしたイベント処理もカンタンに表現できます。例えば、リスト3は簡単なテキストハイライトの例で、マウスボタンを<p>要素の上に乗せると、該当する段落の背景色を黄色に変化させます(図10)。

この先は会員の登録が必要です。有料会員(月額プラン)は登録月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら