【15分目：基礎編】
処理のタイミングを決める「イベント」
jQueryの処理を実行するタイミングを制御するのが「イベント」です。イベントを設定することで、「クリックしたとき」や「ドラッグ＆ドロップしたとき」など、指定した要素に対する何らかの操作が発生したときに、HTMLやCSSを操作できます。
イベントは次のようにして設定します。
たとえば、要素がクリックされたタイミングで処理を実行したい場合は、次のように記述します。
▼サンプル3（スクリプト部分）
$("button").click(function(){
$("img").attr("src","sea.jpg");
});
▼サンプル3（元のHTML）
<button>画像を変更</button>
<p><img src="flower.jpg" alt="" /></p>
▼サンプル3（実行結果）
<button>画像を変更</button>
<p><img src="sea.jpg" alt="" /></p>
サンプルを実行して、button要素をマウスでクリックすると、img要素のsrc属性の値が変わります。attr()は属性値を変更する命令です。
|
|
|
|---|---|---|
| サンプル3の実行画面（画像クリックでサンプルページを表示します） | ||
イベントには、クリック（click）やダブルクリック（dblclick）、マウスダウン（mousedown）、マウスアップ（mouseup）、マウスオーバー（mouseover）、マウスアウト（mouseout）、マウスムーブ（mousemove）などを設定できます。
■Amazon.co.jpで購入
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)西畑 一馬(著)アスキー・メディアワークス
