「あとで」読まずに今すぐ始める
40分で覚える！jQuery速習講座
2010年02月16日 11時00分更新
【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)西畑 一馬(著)アスキー・メディアワークス
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
