この命令は、指定した要素で発生したイベントに対して、
一度だけ実行する処理を設定します。
one()の括弧内にはイベントの発生条件を書きます。
イベント発生の条件には、click,dblclick,mousedown,
mouseup,mouseover,mouseout,mousemoveなど、
これまでのイベントなどを指定して、その後に
「,」カンマで区切ってfunction(){...}に
実行したい処理を書きます。
サンプルコードを実行すると、
１．青い四角がブラウザーに表示されます。
２．青い四角にカーソルを載せると黄色になる。
３．その後、カーソルを黄色の四角の外へ移動すると青に戻ります。
４．青い四角にカーソルを持っていても
今度は色は変わりません。
実行結果はこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQueryStudy</title> <style> *{margin:0;padding:0;} #container{ width:640px; height:400px; background-color:white; font-weight:100; margin:0 auto;} #box{ width:100px; height:100px; background-color:blue;} </style> <script src="js/jquery-1.11.3.js"></script> </head> <body> <div id="container"> <div id="box"></div> </div><!--contatiner--> <script> $(document).ready(function(){ $("#box").one("mouseover",function(){ $(this).css("background-color","yellow"); }); $("#box").one("mouseout",function(){ $(this).css("background-color","blue"); }); }); </script> </body> </html> |