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

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

.mousemove( )要素内でマウスカーソルが移動した時の処理を設定

構文

要素内でマウスカーソルが移動した時の処理を設定返値:jQueryオブジェクト
jQo.mousemove( function )ver1.0〜
jQo.mousemove( )ver1.0〜
jQo.mousemove( object, function )ver1.4.3〜
※子孫要素内でもfunctionは実行されます。

機能

jQueryオブジェクトで指定した要素内でマウスカーソルが移動した時に引数のfunctionを実行します。引数にfunctionを設定しない場合は、要素に設定(バインド)されたfunctionを実行します。

ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます(データはイベントオブジェクトのdataプロパティ経由で渡されます)。

※以降「要素内でマウスカーソルが移動した」動作のことをマウスムーブと呼びます。

解説

マウスムーブで実行する処理を設定

サンプル(mousemove/01.html)を開いてbody内にdiv要素とp要素があることを確認してください。

<div></div>
<p></p>

jQueryは以下の様に記述され、mousemoveメソッドの引数にfunctionの「moveFunc」が設定されています。

$(function () {
	$("div").mousemove(moveFunc);
});

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

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

サンプルmousemove/01.htmlで利用したmoveFuncは以下の様になっており、イベントオブジェクトのプロパティpageXpageYを利用して、document内でのX座標とY座標を取得し、textメソッドを利用してp要素に表示しています。

function moveFunc(eo){
	var str = "pageX:"+eo.pageX + "   pageY:"+eo.pageY;
	$("p").text(str);
}
結果として、div要素内でマウスカーソルを動かすとdocument内でのX座標とY座標を表示します。
イベントのfunction設定は、無名関数を利用することが多いです。→サンプル(mousemove/01b.html

$("div").mousemove(function (eo){
	var str = "pageX:"+eo.pageX + "   pageY:"+eo.pageY;
	$("p").text(str);
});)

他の要素に設定されたマウスムーブ時の処理を実行する

mousemoveメソッドは引数を設定しないと、指定した要素に設定されたマウスムーブ時の処理を実行します。
サンプル(mousemove/02.html)を開いてbody内にbutton要素が追加されているのを確認してください。

続いてjQueryを確認してください。div要素に設定されたマウスムーブ時の処理はmousemove/01b.htmlと同じですが、以下の処理が追加されています。この処理によってbuttonをクリックするとdiv要素に設定されたマウスムーブ時の処理が実行されます。

$("button").click(function(){
	$("div").mousemove();
})

結果として、buttonを「クリック」するとdiv要素で「マウスムーブ」したのと同じように処理されるのですが、イベントオブジェクトのpageXやpageYが取得できずundefinedと表示されます(textメソッドは実行されているのでdiv要素のmousemoveメソッド自体は機能しています)。

typeなど他のイベントオブジェクトは利用できたので、すべてのイベントオブジェクトが利用できないというわけではなさそうです。

objectオブジェクトをfunctionに渡す

第1引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。データはイベントオブジェクトのdataプロパティを介して渡されます。サンプル(mousemove/03.html)を開いてbody内の構成はmousemove/01.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、mousemoveメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。

$("div").mousemove({test:10},function(eo){
	var str = "eo.data.test=" + eo.data.test;
	$("p").text(str);
})

結果として、div要素上でマウスカーソルを動かすとp要素に第1引数で渡されたtestプロパティの値「10」が表示されます。

子孫要素にも反応します

mousemoveメソッドは子孫要素上でにマウスカーソルを動かしても機能します。
サンプル(mousemove/04.html)を開いてbody内にdiv要素が入れ子になって配置(外側はoutのid属性、内側はinのid属性)されていることを確認してください。

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

jQueryは以下の様に記述され、mousemove/01b.htmlとはセレクタが違うだけです。

$("#out").mousemove(function(){
	var str = "pageX:"+eo.pageX + "   pageY:"+eo.pageY;
	$("p").text(str);
});

セレクタに「#out」を設定しているので、外側のdiv要素(outのid属性)上でマウスムーブした際にpageX, pageYが表示されるのは良いのですが、セレクタで指定されていない内側のdiv要素(inのid属性)上でマウスムーブした際もpageX,pageYが表示されます。このようにmousemoveメソッドは子孫要素上でも機能します。