2014-12-24
2014-12-24
イベント
イベントでタイミングを設定
- 意図したタイミングで処理を実行する
HTMLが読み込まれたタイミングで実行する
- ready()イベント
<script> $(document).ready(function(){ //HTMLが読み込まれたときに、実行する処理を記述 }); </script>
の短縮形が以下の記述。
<script> $(function(){ //HTMLが読み込まれたときに、実行する処理を記述 }); </script>
他のイベント処理でも、ready()イベントは必須
<script> $(function(){ $('button').click(function(){ //HTMLが読み込まれたときに、実行する処理を記述 }); }); </script>
click()イベント
- 特定の要素がクリックされたときに、何らかの処理を実行する命令
click()の記述
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>click()イベント</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('button').click(function(){ $('img').attr('src', 'sea.png').attr('alt', '海'); }); }); </script> <style> button { cursor: pointer; } </style> </head> <body> <p><button>画像を変更</button></p> <p><imgsrc="flower.png"alt="花"></p> </body> </html>
《変更後》
a要素に設定したclickイベントの処理
- リンクとして実行されてしまう
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>a要素に設定したclickイベントの処理</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('a').click(function(){ $('img').attr('src', 'sea.png').attr('alt', '海'); }); }); </script> </head> <body> <p><ahref="sea.png">画像を変更</a></p> <p><imgsrc="flower.png"alt="花"></p> </body> </html>
javascript:void(0)を使う
- JavaScriptがオフの場合は機能しません
<body> <p><ahref="javascript:void(0)">画像を変更</a></p> <p><imgsrc="flower.png"alt="花"></p> </body>
return false; を追加
- JavaScriptがオフの場合も、リンクは機能します
<script> $(function(){ $('a').click(function(){ $('img').attr('src', 'sea.png').attr('alt', '海'); returnfalse; }); }); </script> </head> <body> <p><ahref="sea.png">画像を変更</a></p> <p><imgsrc="flower.png"alt="花"></p> </body>
イベントが発生した要素を取得する
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>イベントが発生した要素を取得する</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('a:eq(0)').click(function(){ $('img').attr('src', 'flower.png').attr('alt', '花'); returnfalse; }); $('a:eq(1)').click(function(){ $('img').attr('src', 'sea.png').attr('alt', '海'); returnfalse; }); $('a:eq(2)').click(function(){ $('img').attr('src', 'Jellyfish.png').attr('alt', 'くらげ'); returnfalse; }); $('a:eq(3)').click(function(){ $('img').attr('src', 'Building.png').attr('alt', '建物'); returnfalse; }); }); </script> </head> <body> <ul> <li><ahref="flower.png">花</a></li> <li><ahref="sea.png">海</a></li> <li><ahref="Jellyfish.png">くらげ</a></li> <li><ahref="Building.png">建物</a></li> </ul> <p><imgsrc="flower.png"alt="花"></p> </body> </html>
画像を変更する機能は実装できました。
$(this)
- イベントが発生した要素を取得するセレクター
- イベントを設定しているclick(function(){…})内で$(this)と書くと、イベントが発生した要素を取得できます
<script> $(function(){ $('a ').click(function(){ $('img').attr('src', $(this).attr('href')).attr('alt', $(this).text()); returnfalse; }); }); </script>
mousedown()/mouseup()イベント
mousedown()
- mousedown()は、特定の要素上にマウスのカーソルがある状態で、マウスのボタンが押されたときに処理を実行します
<script> $(function(){ $('a').mousedown(function(){ $('img').attr('src', $(this).attr('href')).attr('alt', $(this).text()); }).click(function(){ returnfalse; }); }); </script>
この例の場合、a要素の上にマウスカーソルがある状態でマウスのボタンが押されたら、img要素のsrc属性とalt属性を書き換えます。
mouseup()
- mouseup()は、特定の要素上にマウスのカーソルがある状態で、すでに押されているマウスのボタンが離れたタイミングで処理を実行します
<script> $(function(){ $('a').mouseup(function(){ $('img').attr('src', $(this).attr('href')).attr('alt', $(this).text()); }).click(function(){ returnfalse; }); }); </script>
この例の場合、a要素の上にマウスカーソルがある状態ですでに押されているマウスのボタンが離れたら、img要素のsrc属性とalt属性を書き換えます。
mouseover()/mouseout()イベント
- 特定の要素上にマウスが重なったタイミングを感知して、処理を実行します
- ボタンのマウスオーバー効果などに利用されます
mouseover()
- 特定の要素上にマウスカーソルが重なったときに、処理を実行します
mouseout()
- 特定の要素上にマウスカーソルが外れたときに、処理を実行します
<script> $(function(){ $('img').mouseover(function(){ $(this).attr('src', 'sea.png').attr('alt', '海'); }).mouseout(function(){ $(this).attr('src', 'flower.jpg').attr('alt', '花'); }); }); </script> </head> <body> <imgsrc="flower.png"alt="花"> </body>
toggle
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>クリックする度に画像が換わる</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <scriptsrc="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> </head> <body> <divid="container"> <pid="imgChange"><imgsrc="img/surf01.png"></p> </div> <script> $(function(){ $('#imgChange').toggle(function(){ $('img').attr('src','img/surf02.png'); },function(){ $('img').attr('src','img/surf03.png'); },function(){ $('img').attr('src','img/surf04.png'); }); }); </script> </body> </html>