イベント処理
プログラムでUIを実装する場合、様々な「イベント」を処理するという形でプログラミングを行うのが一般的です。「マウスを動かした」「クリックした」「スクロールした」などの断続的に発生するユーザ操作の他にも、「Webページの読み込みが終わった」などのタイミングでもイベントは発生します。そうした様々なイベントに対して、イベント発生時の処理を関数の形で登録しておくと、「イベントが発生した時にその関数を呼び出す」という動作が行われます。
jQueryを用いずに、JavaScriptのみでイベント処理を記述する場合、以下のようなコードになります。しかもこのコードは、Internet Explorer 8以前では動作しません（対応するには、違うAPIを用いる必要があります）。
element.addEventListener('click', function(e) {
～クリックイベント発生時の処理～
}, false);
jQueryを用いると、こうした処理をより直感的に短く記述することができます。
$(element).click(function(e) {
～クリックイベント発生時の処理～
});
| メソッド | 内容 |
| click() | クリックイベントの処理、または発生させる |
| change() | 要素の状態が変更したイベントを処理、または発生させる（changeイベントは、主に入力フォーム要素の状態が変化した際に発生する） |
| submit() | フォームの送信イベントを処理、または発生させる |
| on('イベント名', 関数) | 任意のイベントを処理する |
on()の例として、「要素にフォーカスが当たった」というイベントで処理を実行するには、以下のように記述します。
$(element).on('focus', function() {
～フォーカスが当たった時の処理～
});
また、画面の読み込みが完了したイベントを捕捉するには、以下の2つの方法があります。どちらも同じで、特に違いはありません。
$(function() {
～画面の読み込みが完了した際の処理～
});
$(document).ready(function() {
～画面の読み込みが完了した際の処理～
});
アニメーション
昨今のWebサイトでは、ちょっとしたアニメーションを用いることで、使い心地や見た目の美しさを向上させている例がよく見られます。もはやWebページにとって、こうした演出は欠かせないものになったといってよいでしょう。
jQueryを用いると、アニメーションも容易に実現できます。例えば、要素をフェードイン・フェードアウトさせるには、以下のようなコードを使用するだけです。
// フェードイン $(element).fadeIn(); // フェードアウト $(element).fadeOut();
要素をスライドアニメーションさせることもできます。
// 下から上にスライド $(element).slideUp(); // 上から下にスライド $(element).slideDown();
こうしたアニメーション機能の中核となっているのが、animate()メソッドです。このメソッドの基本的な機能は、「CSSプロパティの値を時系列に沿って変更する」というものです。例えば、以下のように記述すると、要素が現在の座標から(100, 100)の座標まで、2秒間かけて移動します。
// 第1引数が変更後のCSSプロパティの値
// 第2引数がアニメーションの時間(単位はミリ秒)
$(element).animate({
top: 100, left: 100
}, 2000);
