jQueryでイベントを使ってみる

JavaScriptはイベントドリブンプログラムです。jQueryもJavaScriptですから全く同様です。
イベントの発生とともに何らかの命令が行われるものです。
イベントの基本であるマウスクリックの使い方を覚えましょう。

マウスクリックの記述

基本的な記述は簡単です。次のような書き方です。

$(セレクター).click(function(){
マウスクリックされたときに実行する処理
})

マウスクリックされたときに実行する処理は「
jQueryのメソッドを使ってみる〜シンプルな使い方 」
で案内したようにメソッドを使用して命令を書けばよいことになります。

実例をみてみましょう。
htmlは単純にbuttonとimg要素を記述しています。
imgタグの属性はわかりやすいようにsrc属性だけにしています。
サンプル

<button>画像を変更</button>
<p><img src="images/cherry.jpg"></p>

jQueryの記述は基本的な記述に従って書いています。

$(function(){
	$("button").click(function(){
		$("img").attr("src","images/decopon.jpg");
	});
});

button要素をクリックするとimg要素の属性のsrcの値がimages/decopon.jpgに変えるという流れです。

メソッドチェーン

ここで、もしimgタグにalt属性があったならどうしたらいいでしょうか。そのような場合はメソッドチェーンをつなげて複数の命令を連続して実施します。
メソッドチェーンはドット　.　でメソッドをつなぐだけです。

<button>画像を変更</button>
<p><img src="images/cherry.jpg" alt="さくらんぼ"></p>

$(function(){
	$("button").click(function(){
		$("img").attr("src","images/decopon.jpg").attr("alt","デコポン");
	});
});

a要素にイベント処理を設定

a要素にイベント処理を設定するとクリックした瞬間にjQueryの命令とリンク設定の動きが重なってしまいます。そのため思ったような結果が得られません。
そのような場合はjQueryの命令文の後にreturn false;を追加しておく必要があります。

サンプル

<ul>
    <li class="point">画像を変更</li>
</ul>
    <p><img src="images/cherry.jpg" alt="さくらんぼ"></p>

$(function(){
	$(".point").click(function(){
		$("img").attr("src","images/decopon.jpg").attr("alt","デコポン");
		return false;
           });
});