ポイント4
繰り返し処理は不要
jQueryオブジェクトでは繰り返し処理を意識する必要がありません。 $()関数は条件によっては複数の要素を返すことがあります。例えば、図2の例でも$()関数は複数の<img>要素を取り出しています。うれしいことに、jQueryオブジェクトはこれら要素のすべてに対して、「.」以降のメソッド部分の処理を実行してくれるのです。
一般的なJavaScriptであれば、要素のセットから一つずつ要素を取り出し、処理していく必要があります。JavaScriptを理解している人であれば、まずはfor命令の利用を思い浮かべるでしょう。しかしjQueryではこのような手間をかける必要がありません。この性質もまた、jQueryがシンプルにコードを書ける理由となっています。
ポイント5
メソッドは連結して呼び出せる
図3のリストに、ちょっとだけコードを追加してみましょう(リスト1)。これで、アイコン画像をリサイズするとともに、枠線で画像を囲みなさいという意味になります。このように、jQueryでは複数のメソッドをどんどん連結して書けます。この性質のことを、「メソッドチェーン」と呼びます。メソッドチェーンを利用することで、特定の要素に対する操作を$() 関数を何度も呼び出すことなく、なに(オブジェクト)を、こうして(メソッド1)、ああして(メソッド2)、そうする(メソッド3)…のように、自然に表現できます。
例えば、リスト2はメソッドチェーンを活用した典型的な例です。findメソッドは「現在の要素の配下からセレクタに合致した要素を取り出す」というメソッドです。ここでは、このfindメソッドを利用して<div id="#area">要素配下のtype1~3クラスを持つ要素を検索し、その背景色をそれぞれ黄色、水色、黄緑色に設定しています(図8)。
ここで注目してほしいのは、find/cssメソッドで個々の子要素を処理した後、endメソッドを呼び出している点です。endメソッドは、「直前の、要素セットに影響を与える処理を取り消す」ためのメソッドで、この場合であれば直前に行ったfindメソッドの処理を打ち消します。これによって、次のfindメソッドは前のfindメソッドで見つかった要素セットを基点としてではなく、もともとの<div id="area">要素を基点として検索を行うことができるのです(図9)。

このように、メソッドチェーンとendメソッドとを併用することで、複数の要素に対する処理をまとめて記述できるだけでなく、毎回、<div id="area">要素を検索する必要がなくなるため、処理も効率化できます。
jQueryによるイベント処理
JavaScriptでは、ユーザーがボタンをクリックした、メニューにマウスポインタが乗った/外れた、キーボードから文字を入力した──といった動作をきっかけに処理を行うことがほとんどです。そして、このきっかけのことを「イベント」と呼びます。
jQueryでは、こうしたイベント処理もカンタンに表現できます。例えば、リスト3は簡単なテキストハイライトの例で、マウスボタンを<p>要素の上に乗せると、該当する段落の背景色を黄色に変化させます(図10)。