)ver1.7〜調査範囲はjQueryオブジェクトにしないといけません。機能1回だけ利用できるイベント発生時の処理を設定します。設定できるイベントは左メニューのマウスイベント(click)〜ロードイベント(ready)※ただしhover,toggleは除くです。v1.7から動的な要素(プログラムで後から追加された要素)に対しても利用できるようになりました(delegateメソッドの構文)。onメソッドと同じです。onメソッドのついでに覚えておきましょう。bindメソッドと同じ機能を実現します(ただし1回しかfunctionを実行しません)。サンプル(one/01.html)を開いてbody内にdiv要素があることを確認してください。jQueryは以下の様に記述され、oneメソッドの引数にイベント名の「click」、そしてfunctionの「clickFunc」が設定されています。clickFunc);});oneメソッドの引数に設定するfunctionは以下の様な構文になっています。引数(イベントオブジェクト)を受け取ります。イベント名で指定したイベントが発生したら1回だけ実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあります。任意の名前(イベントオブジェクト){イベント名で指定したイベントが発生したら1回だけ実行したい処理}サンプルone/01.htmlで利用したclickFuncは以下の様になっており、アラートで「click」と表示します。clickFunc(eo){alert("click");};結果として、div要素をクリックするとアラートで「click」と表示されます。bindメソッドと異なり、2回目以降はクリックしてもアラートがでないことを確認してください。functionの設定は無名関数を利用することが多いです。bindメソッド同様に動的な要素(プログラムで後から追加された要素)にはイベント発生時の処理を設定することができません。サンプル(one/02.html)を開いてbody内にbuttonが1つあることを確認して下さい。jQueryは以下の部分を最初に確認してください。この処理はサンプルone/01b.htmlと同じで、div要素がクリックされたらアラートで「click」と表示します。body要素内にはdiv要素がありません。appendToメソッドによりbody内に追加されます。/>").appendTo("body")})しかしbuttonをクリックして表示したdiv要素をクリックしても、oneメソッド(bindメソッドの構文)で設定したfunctionは実行されずアラートは出ません。プログラムによって後から追加した要素には対応できないのです。onメソッドと同じようにdelegateメソッドの構文を利用することができます。この構文であれば動的な要素にもイベント発生時の処理を設定することができます。調査範囲とはイベントが発生した時に調べる要素の範囲です。この中に含まれる要素しかイベントの確認をしません。サンプルでは「body」となっているのでbody内のイベントに反応します。サンプル(one/03.html)を開いてbody内の構成がone/02.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、以下の様にoneメソッドの引数が変更されているだけです。function(eo){alert("click");});delegateメソッドの構文であれば動的な要素にも対応できるので、buttonをクリックして表示したdiv要素をクリックしても、アラートが表示されます(onメソッドと異なり1回しか機能しません)。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プロパティの値として取得できます。このサンプルでは、この値をアラートで表示します。function(eo){alert(eo.data.test);});結果として、buttonをクリックして登場したdiv要素をクリックすると、第3引数で渡されたtestプロパティの値「10」がアラートで表示されます(onメソッドと異なり1回しか機能しません)。)ver1.7〜第1引数にobjectオブジェクトを設定することで、複数のイベントにそれぞれ個別のfunctionを設定できます。サンプル(one/05.html)を開いてbody内の構成はon/04.htmlと同じ事を確認してください。jQueryは以下のように「eventObj」というobjectオブジェクトを作成し、そのプロパティとしてイベント名を設定します。サンプルではclickとmouseenter,mouseleaveのイベントを設定し、実行したいfunctionを代入しています。clickではアラートで「click」と表示し、mouseenterで背景色をオレンジに、mouseleaveで背景色を青にしています。function(eo){$(this).css("background-color","#09c");};作成したobjectオブジェクトは以下の様にoneメソッドの第1引数として設定します。結果として、上のdiv要素にマウスカーソルを重ねるとdiv要素の背景色がオレンジ色になり、マウスカーソルを外すと青に戻ります。クリックするとアラートで「click」と表示します。"div");onメソッドと異なり、各イベントとも1回しかfunctionを実行しないことに注意してください。onメソッドが利用できる構文すべてに対応しているようです。functionの部分にfalseを設定して1回だけa要素をリンクしないという処理も可能です(つまり2回目以降はリンクします)。false);});実行したらイベントの設定を解除oneメソッドで設定したfunctionが1回しか実行されないのは、1回実行したら設定したイベントの処理を削除するためです。jQuery.hasDataメソッドを利用すると要素にイベントの処理が設定されているか否かを確認できるので、これを利用したサンプルを作成しました。サンプル(one/test02.html)を開いてbody内にbutton要素とdiv要素があるのを確認してください。jQueryはone/01.htmlに以下の処理を追加しています。buttonがクリックされたら、アラートでdiv要素にイベントが設定されているか否かを確認して結果をアラートで表示します。$.hasData($("div")[0]);alert(chk);});まずはbuttonをクリックしてください。イベントの処理が設定されているので「true(イベントが存在する)」とアラートで表示されます。続いてdiv要素をクリックしてください。one/01.htmlと同じなのでアラートで「click」と表示されます。次にもう一度buttonをクリックしてください。最初と異なり「false」と表示されると思います。この結果によってoneメソッドで設定した処理は1回実行すると解除されることが確認できると思います。