このページの本文へ

40分で覚える!jQuery速習講座 (4/6)

2010年02月16日 11時00分更新

文●西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

【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の実行画面。ボタンがクリックされると画像が切り替わる(画像クリックでサンプルページを表示します) サンプル3の実行画面。ボタンがクリックされると画像が切り替わる(画像クリックでサンプルページを表示します)
サンプル3の実行画面(画像クリックでサンプルページを表示します)

 イベントには、クリック(click)やダブルクリック(dblclick)、マウスダウン(mousedown)、マウスアップ(mouseup)、マウスオーバー(mouseover)、マウスアウト(mouseout)、マウスムーブ(mousemove)などを設定できます。


■Amazon.co.jpで購入

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く