jQueryのイベントをチュートリアルで学ぶ（前編） 続き

クリックされるたびに異なる命令を実行する toggle() 　クリックされるたびに異なる命令を実行したいときに便利なのが、toggle()です。括弧内に function(){...} を，(カンマ)区切りで複数設定でき、クリックされた順番に命令を実行していきます。設定してある命令が最後まで実行されたら最初の命令に戻って繰り返します。 $(function(){     $(セレクター).toggle(function(){         //最初にクリックされた際に実行したい命令     },function(){         //2回目にクリックされた際に実行したい命令     },function(){         //3回目にクリックされた際に実行したい命令     },function(){         (中略)     },function(){         //最後にクリックされた際に実行したい命令     }) }) 　以下のサンプルでは、ボタンをクリックするたびに表示される画像が切り替わります。 ▼サンプル10（スクリプト部分） $(function(){     $("button").toggle(function(){         $("img").attr("src","sea.jpg").attr("alt","海");     },function(){         $("img").attr("src","Jellyfish.jpg").attr("alt","くらげ");     },function(){         $("img").attr("src","Building.jpg").attr("alt","建物");     },function(){         $("img").attr("src","flower.jpg").attr("alt","花");     }) }) ▼サンプル10（(X)HTML部分） <button>画像を変更</button> <p><img src="flower.jpg" alt="花" /></p> ▼サンプル10（実行結果） ボタンがクリックされるたびに画像が切り替わる マウスオーバー／マウスアウトを感知する mouseover() と mouseout() 　 mouseover() と mouseout()は、特定の要素上にマウスが重なったタイミングを感知して、設定された命令を実行します。ナビゲーションメニューでおなじみのマウスオーバー効果でおなじみですね。mouseover() と mouseout() は多くの場合、組み合わせて使います。 ■mouseover() 　mouseover() は、特定の要素上にマウスカーソルが重なったときに、命令を実行します。 $(セレクター).mouseover(function(){         //セレクターで指定した要素にマウスカーソルが重なった際に実行したい命令 }) ■mouseout() 　mouseout() は、特定の要素上にマウスカーソルが外れたときに命令を実行します。 $(セレクター).mouseout(function(){         //セレクターで指定した要素からマウスカーソルが外れた際に実行したい命令 }) 　以下のサンプルでは、img要素にマウスカーソルが重なった際に、img要素のsrc属性の値を「sea.jpg」に、alt属性の値を「海」に書き換えます。マウスカーソルがimg要素から外れた際には、img要素のsrc属性の値を「flower.jpg」に、alt属性の値を「花」に書き換えます。 ▼サンプル12（スクリプト部分） $(function(){     $("img").mouseover(function(){         $(this).attr("src","sea.jpg").attr("alt","海");     }).mouseout(function(){         $(this).attr("src","flower.jpg").attr("alt","花");     }) }) ▼（サンプル12）（(X)HTML部分） <img src="flower.jpg" alt="花" /> Read more: http://ascii.jp/elem/000/000/450/450276/#ixzz20KJT4pY1 マウスの動きに合わせて命令を実行する mousemove() 　mousemove() は、特定の要素上でマウスカーソルが動いた場合に命令を実行できます。 $(セレクター).mousemove(function(){         //セレクターで指定した要素上でマウスカーソルが動いている際に実行したい命令 }) 　実際に mousemove() を利用するのは、座標などの情報を取得する命令と組み合わせるケースがほとんどです。ここでは詳しく説明しませんが、mousemove() 内の function() を function(e) としておくと、イベント発生時にe.clientXで現在のマウスのX座標、e.clientYでマウスのY座標を取得できます。以下は、img要素上でマウスカーソルが動いている際に、カーソルのX座標とY座標をp要素に書き出すサンプルプログラムです。 ▼サンプル13（スクリプト部分） $(function(){     $("img").mousemove(function(e){         $("p").html("現在のX座標："+e.clientX+"<br />現在のX座標："+e.clientY);     }) }) ▼サンプル13（(X)HTML部分） <img src="flower.jpg" alt="花" /> <p></p> ▼サンプル13（実行結果） サンプル13の実行画面。img要素上でマウスカーソルを動かすと、現在の座標がp要素に書き出される 　X座標とY座標は、ブラウザーの左上からマウスカーソルまでの距離をピクセル単位で取得できます。 【JavaScriptワンポイントメモ】 JavaScriptによるテキストの結合 　mouseover() のサンプルでは、以下のようなコードが登場しました。 html("現在のX座標："+e.clientX+"<br />現在のX座標："+e.clientY) 　これまで解説してきたように、jQueryではさまざまな値を取得できますが、上のコードのように取得した値と、任意のテキストや(X)HTMLを組み合わせる場合は、テキストを結合する必要があります。 　JavaScriptでテキストを結合するには、テキストや(X)HTMLを"(ダブルクオーテーション)の内側に記述し、+(プラス)で並べていきます。たとえば先ほどのコードで、e.clientXが「380」、e.clientYが「48」という値になる場合、設定される(X)HTMLは「現在のX座標：380<br />現在のX座標：48」になります。 Read more: http://ascii.jp/elem/000/000/450/450276/#ixzz20KJYD0pX