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

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

.one( )1回のみ利用できるイベント発生時の処理を設定します

構文

1回のみ利用できるイベント発生時の処理を設定します返値:jQueryオブジェクト
jQo.one( イベント名, function)ver1.1〜
調査範囲.one( イベント名, セレクタ, function)ver1.7〜
調査範囲.one( イベント名, セレクタ, object, function)ver1.7〜
調査範囲.one( object, セレクタ [,object] )ver1.7〜
調査範囲はjQueryオブジェクトにしないといけません。

機能

1回だけ利用できるイベント発生時の処理を設定します。設定できるイベントは左メニューのマウスイベント(click)〜ロードイベント(ready)※ただしhover,toggleは除くです。

v1.7から動的な要素(プログラムで後から追加された要素)に対しても利用できるようになりました(delegateメソッドの構文)。 構文は色々ありますがonメソッドと同じです。onメソッドのついでに覚えておきましょう。

解説

イベント発生時に実行する処理を設定(bindメソッドの構文)

イベント発生時に実行する処理を設定します(動的な要素には未対応)
jQo.one( イベント名, function)ver1.1〜

oneメソッドは引数にイベント名とfunctionを設定すると、bindメソッドと同じ機能を実現します(ただし1回しかfunctionを実行しません)。サンプル(one/01.html)を開いてbody内にdiv要素があることを確認してください。jQueryは以下の様に記述され、oneメソッドの引数にイベント名の「click」、そしてfunctionの「clickFunc」が設定されています。

$(function () {
	$("div").one("click", clickFunc);
});

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

oneメソッドに設定するfunctionの構文
function 任意の名前(イベントオブジェクト){
 イベント名で指定したイベントが発生したら1回だけ実行したい処理
}

サンプルone/01.htmlで利用したclickFuncは以下の様になっており、アラートで「click」と表示します。

function clickFunc(eo){
	alert("click");
};

結果として、div要素をクリックするとアラートで「click」と表示されます。しかしbindメソッドと異なり、2回目以降はクリックしてもアラートがでないことを確認してください。
functionの設定は無名関数を利用することが多いです。→サンプル(one/01b.html

$("div").one("click", function (eo){
	alert("click");
});

bindメソッドの構文では動的な要素に対応できません

bindメソッドの構文はシンプルで分かりやすいのですが、実際のbindメソッド同様に動的な要素(プログラムで後から追加された要素)にはイベント発生時の処理を設定することができません。サンプル(one/02.html)を開いてbody内にbuttonが1つあることを確認して下さい。

jQueryは以下の部分を最初に確認してください。この処理はサンプルone/01b.htmlと同じで、div要素がクリックされたらアラートで「click」と表示します。しかしbody要素内にはdiv要素がありません。

$("div").one("click", function(eo){
	alert("click");
});

div要素は以下のjQueryにより、buttonをクリックしたらappendToメソッドによりbody内に追加されます。

$("button").click(function(){
	$("<div />").appendTo("body")			
})

しかしbuttonをクリックして表示したdiv要素をクリックしても、oneメソッド(bindメソッドの構文)で設定したfunctionは実行されずアラートは出ません。プログラムによって後から追加した要素には対応できないのです。

イベント発生時に実行する処理を設定(delegateメソッドの構文)

イベント発生時に実行する処理を設定(動的な要素にも対応)
調査範囲.one( イベント名, セレクタ, function)ver1.7〜

v1.7からはonメソッドと同じようにdelegateメソッドの構文を利用することができます。この構文であれば動的な要素にもイベント発生時の処理を設定することができます

調査範囲とはイベントが発生した時に調べる要素の範囲です。この中に含まれる要素しかイベントの確認をしません。サンプルでは「body」となっているのでbody内のイベントに反応します。

サンプル(one/03.html)を開いてbody内の構成がone/02.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、以下の様にoneメソッドの引数が変更されているだけです。

$("body").one("click", "div", function(eo){
	alert("click");
});

delegateメソッドの構文であれば動的な要素にも対応できるので、buttonをクリックして表示したdiv要素をクリックしても、アラートが表示されます(onメソッドと異なり1回しか機能しません)。

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

functionにデータ(object)を渡す
調査範囲.one( イベント名, セレクタ, object, function)ver1.7〜

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

jQueryもone/03.htmlとほとんど同じで、異なるのは以下の様に、第3引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されている点です。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。このサンプルでは、この値をアラートで表示します。

$("body").one("click", "div", {test:10}, function(eo){
	alert(eo.data.test);
});

結果として、buttonをクリックして登場したdiv要素をクリックすると、第3引数で渡されたtestプロパティの値「10」がアラートで表示されます(onメソッドと異なり1回しか機能しません)。

まとめて複数のイベントを設定する

複数のイベントを設定する
調査範囲.one( object, セレクタ )ver1.7〜

第1引数にobjectオブジェクトを設定することで、複数のイベントにそれぞれ個別のfunctionを設定できます
サンプル(one/05.html)を開いてbody内の構成はon/04.htmlと同じ事を確認してください。

jQueryは以下のように「eventObj」というobjectオブジェクトを作成し、そのプロパティとしてイベント名を設定します。サンプルではclickとmouseenter,mouseleaveのイベントを設定し、実行したいfunctionを代入しています。clickではアラートで「click」と表示し、mouseenterで背景色をオレンジに、mouseleaveで背景色を青にしています。

eventObj = new Object();
eventObj.click = function(eo){
	alert("click");
};
eventObj.mouseenter = function(eo){
	$(this).css("background-color","#f93");
};
eventObj.mouseleave = function(eo){
	$(this).css("background-color","#09c");
};

作成したobjectオブジェクトは以下の様にoneメソッドの第1引数として設定します。結果として、上のdiv要素にマウスカーソルを重ねるとdiv要素の背景色がオレンジ色になり、マウスカーソルを外すと青に戻ります。そしてクリックするとアラートで「click」と表示します。

$("body").one(eventObj, "div");

onメソッドと異なり、各イベントとも1回しかfunctionを実行しないことに注意してください

メモ

1回しかイベント発生時の処理を実行しないonメソッドです

本家のページでもシンプルにしか説明されていませんが、実際はonメソッドが利用できる構文すべてに対応しているようです。例えば、functionの部分にfalseを設定して1回だけa要素をリンクしないという処理も可能です(つまり2回目以降はリンクします)。→サンプル(one/test01.html

$(function () {
	$("body").one("click", "a", false);
});

実行したらイベントの設定を解除

oneメソッドで設定したfunctionが1回しか実行されないのは、1回実行したら設定したイベントの処理を削除するためです。jQuery.hasDataメソッドを利用すると要素にイベントの処理が設定されているか否かを確認できるので、これを利用したサンプルを作成しました。

サンプル(one/test02.html)を開いてbody内にbutton要素とdiv要素があるのを確認してください。jQueryはone/01.htmlに以下の処理を追加しています。buttonがクリックされたら、アラートでdiv要素にイベントが設定されているか否かを確認して結果をアラートで表示します。

$("button").click(function(){
	var chk = $.hasData($("div")[0]);
	alert(chk);
});

まずはbuttonをクリックしてください。まだイベントの処理が設定されているので「true(イベントが存在する)」とアラートで表示されます。続いてdiv要素をクリックしてください。one/01.htmlと同じなのでアラートで「click」と表示されます。

次にもう一度buttonをクリックしてください。最初と異なり「false」と表示されると思います。この結果によってoneメソッドで設定した処理は1回実行すると解除されることが確認できると思います。