初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
1章：jQuery入門
2章：jQuery基礎
3章：jQuery発展
番外編：研究

初歩的なサンプル

概要

説明ばかりではつまらないので

1章の最後に初歩的なサンプルを紹介します。jQueryを利用しないと面倒な処理も非常にシンプルに実現できます。ここでは要素にマウスカーソルが重なった時の処理を設定する方法を紹介します。
ここで紹介するサンプルは次章に絡んでくるので飛ばさないでください。

ここで利用するhoverメソッドは便利ですが、onメソッドと異なり動的な要素には利用できず、初心者向けのイベントであることに注意してください。

解説

マウスオーバー

hoverメソッドを利用すると、簡単にマウスオーバーの処理を作成できます。

hoverの構文
$(セレクタ).hover(マウスオーバーの処理, マウスアウトの処理)

サンプル（sample/01.html）を開いてソースを確認して下さい。body内にdiv要素が1つあり、cssでデザインが修飾されています。このdiv要素にマウスオーバーすると背景色が変わります。 

<div>touch me.</div>

続いてjQueryを確認します。まず以下のhoverイベントの処理を確認して下さい。この処理によってセレクタで指定したdiv要素にマウスオーバーすると「overFunc」マウスアウトすると「outFunc」が実行されます。 

$("div").hover(overFunc, outFunc);

overFuncとoutFuncは以下の様に記述され、cssメソッドによってdiv要素のcss設定を変更しています。サンプルでは背景色（background-color）をオレンジ色（#FC6）や青色（#09C）に変更しています。 

function overFunc(){
	$("div").css("background-color", "#FC6");
}
function outFunc(){
	$("div").css("background-color", "#09C");
}

結果として、div要素にマウスオーバーするとdiv要素の背景がオレンジ色になり、マウスアウトで青に戻ります。背景色の変更だけであればcssだけでも実現できますが、jQueryであれば要素内の文字なども変更できるので、より高度な演出が実現できます。このサンプルは次章での説明にも絡んできます。

ソースは分かりにくくなりますが、hoverメソッドの引数に無名関数を直接設定することもできます。この場合は4行目の最後にある,を忘れないでください。→サンプル（sample/01b.html） 

$("div").hover(
	function (){
		$("div").css("background-color", "#FC6");
	}, 
	function (){
		$("div").css("background-color", "#09C");
	}
);

これで「1章：jQuery入門」は終わりです。引き続き「2章：jQuery基礎」に入ってください。2章ではイベントに関連した仕組みについて説明していきます。