jQueryを使ってみよう。(基本編イベント)

今回はjQueryのイベントについてです。
イベントとは、例えば「クリックする」「マウスが乗る」など何かの動作をしたときに処理をさせたいときに利用します。

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQueryを使ってみよう。(基本編 イベント)</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script language="JavaScript">
$(function (){
	$("#red").click(
		function(){
			$(".msg").css("color","red");
		}
	);
	$("#blue").hover(
		function(){
			$(".msg").css("color","blue");
		},
		function(){
			$(".msg").css("color","");
		}
	);
});
</script>
</head>
<body>
<p id="fcc"><span id="red">[ 赤 ]</span>　|　<span id="blue">[ 青 ]</span></p>
<p class="msg">上の[ 赤 ]をクリック、[ 青 ]にマウスを乗せると文字の色が変わります。</p>
</body>
</html>

サンプル

サンプルでは、クリックしたとき、マウスが乗ったときに処理を行うような記述をしています。

クリックしたときに処理を行う場合は「click」を使います。

… 省略 …
	//id=redがクリックされたら…
	$("#red").click(
		function(){
			//処理
		}
	);
… 省略 …

上記のように、どの場所($(“#red”))がクリック（click）されたら（function(){ //処理 }）処理をするという記述方法になります。イベントを利用する場合は処理する内容を『function(){}』で囲むことを忘れないようにしてください。

マウスが乗ったときに処理を行う場合は「hover」を使います。

「hover」は「マウスが乗った」場合の処理、「マウスが離れた」場合の処理の2つを記述します。はじめに乗ったときの処理を記述し、次に離れたときの処理を記述します。

… 省略 …
	//id=blueにマウスが乗ったら…
	$("#blue").hover(
		function(){
			//乗ったときの処理
		},
		function(){
			//離れたときの処理
		}
	);
… 省略 …

このようにイベントを利用すると「何かしたときに処理をする」という条件を追加できるようになります。

「click」や「hover」以外にもさまざまなイベントが用意されていますので、チェックしていろいろ試してみて下さい。

Events – jQuery 1.2.6 日本語リファレンス

さて今回で基本編は今回で終わりです。書き方の基本がわかれば、暗合のようだったものがなんとなくわかるような気がしませんか？
次回からはテキストを変更したり、HTMLタグを書き換えるといったメソッドがたくさん用意されているので、これらを少しずつ勉強していきます。

またjQueryにはプラグインと呼ばれるさまざまな機能を追加するためのプログラムがたくさん配布されています。これらを利用することで、面白い機能や実用的な機能を簡単にホームページに追加することができます。ブログで紹介していたりされていたり、いろいろなプラグインを集めたサンプルサイトなどもたくさんあるので、いろいろ探して「これは！」と思うものがあれば実際に導入してみましょう。

jQueryサンプル集 – DesignWalker
jQuery 146 Plugins：skuare.net

ではこのへんで。