デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.hover( )マウスカーソルが要素内に入ったり出たときの時の処理を設定

構文

マウスカーソルが要素内に入ったり出たときの時の処理を設定返値:jQueryオブジェクト
jQo.hover( function, function )ver1.0〜
jQo.hover( function )ver1.4〜
※子孫要素には反応しません。

機能

引数に2つのfunctionをとりマウスカーソルが要素内に入ったり出たときの時の処理を設定します。最初に設定するfunctionはマウスカーソルが要素内に入ったときに実行され、2番目に設定するfunctionはマウスカーソルが要素内から出たときに実行されます。

hoverメソッドはmouseenterイベントとmouseleaveイベントを利用しているため、子孫要素には反応しません。→参考:mouseenterメソッドmouseleaveメソッド

ver1.4からは引数に1つだけfunctionを設定できるようになりました。この構文の場合、マウスカーソルが要素内に入ったときも、出たときも同じfunctionが実行されます。

解説

2つのfunctionを設定

サンプル(hover/01.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、hoverメソッドの引数に「inFunc」と「outFunc」が設定されています。

$(function () {
	$("div").hover(inFunc, outFunc);
});

hoverメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(イベントオブジェクト)を受け取ります。そして実行したい処理を{}の中に書きます、何かをreturnする必要はありません。
イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

hoverに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
 実行したい処理
}

サンプルhover/01.htmlで利用した2つのfunctionは以下の様になっており、inFunc(マウスカーソルが要素内に入ったときに実行)ではcssメソッドを利用して、div要素の背景色をオレンジに変更しています。

function inFunc(){
	$("div").css("background-color","#f90");
}

outFunc(マウスカーソルが要素内から出たときに実行)では同じようにcssメソッドを利用して背景色を青に変更しています。

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

結果として、div要素内にマウスカーソルが入ると背景色がオレンジにになり、出ると背景色が青に戻ります。
イベントのfunction設定は、無名関数を利用することが多いです。→サンプル(hover/01b.html

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

上記のように無名関数を利用する場合は2つのfunctionを仕切るカンマ(4行目)を忘れないように気を付けましょう。

1つだけfunctionを設定

v1.4からfunctionが1つだけでも機能するようになりました。この場合、マウスカーソルが入ったときも出たときも同じfunctionが実行されます。サンプル(hover/02.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、最初に変数cntに0を設定し、hoverメソッドの引数として「hoverFunc」を1つだけ設定しています。

$(function () {
	cnt = 0;
	$("div").hover(hoverFunc);
});

hoverFuncは以下の様になっており、まず変数cntに1足し、その変数cntをtextメソッドを利用してdiv要素内に表示します。

function hoverFunc(){
	cnt++;
	$("div").text(cnt);
}

結果として、div要素にマウスカーソルが入ったり出たりするたびにdiv要素内の数字がカウントアップしていきます。マウスカーソルが入ったときも出たときも同じ処理をしたいときに利用すると便利な構文です。

子孫要素には反応しません

マウスカーソルが要素内に入ったり出たりする処理は、子孫要素に反応するか否かでメソッドが分かれていました(例:mouseoverメソッドmouseenterメソッド)。

hoverメソッドの場合はmouseenterイベントとmouseleaveイベントを利用しているため子孫要素には反応しません。サンプル(hover/03.html)を開いてbody内にdiv要素が入れ子になって配置(外側はoutのid属性、内側はinのid属性)されていることを確認してください。

<div id="out">
	<div id="in"></div>
</div>

jQueryは以下の様に記述され、inFuncが実行されたらアラートで「in」と表示し、outFuncが実行されたらアラートで「out」と表示するようにしました。

function inFunc(){
	alert("in")
}
function outFunc(){
	alert("out")
}
$(function () {
	$("#out").hover(inFunc, outFunc);
});

結果として、外側のdiv要素(outのid属性)に入ったり出たりしたときだけアラートが表示され、内側のdiv要素(inのid属性)には反応しません。

メモ

動的な要素には対応していません

hoverメソッドは動的な要素に利用できません。サンプル(hover/test01.html)を開いてbody内に何も無いことを確認してください。jQueryはほとんどhover/test01.htmlと同じなのですが、以下の様にappendメソッドを利用して動的にdiv要素を追加しています。

$(function () {
	$("div").hover(inFunc, outFunc);
	$("body").append("<div>");
});

結果としてサンプルhover/01.htmlと異なり、div要素にマウスオーバーしても反応せず、動的な要素に対応していないことが確認できます。ちなみに要素を追加してからhoverメソッドを利用すれば機能させることはできます。サンプル(hover/test01b.html)はappendメソッドをhoverメソッドよりも前に設定しただけですが、サンプルhover/01.htmlと同じように機能します。

$(function () {
	$("body").append("<div>");
	$("div").hover(inFunc, outFunc);
});