[jQuery]クリックイベントを扱う
【演習】クリックイベントでアラート表示
課題:下図ボックスをクリックすると「クリックされました」というダイアログボックスが表示されるようにプログラムを作成すること
[ソースコード]
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jQueryの練習</title> <style> #box { width: 100px; height: 100px; background:#F90; border:1px solid #F90; cursor:pointer; } p { /*cursor:pointer;*/ } </style> <script src="js/jquery-1.11.0.min.js"> </script> <script> //オレンジ色の正方形をクリックすると、「クリックされました」アラートを表示 $(function(){ $('#box').after('<p>クリックしてください</p>'); $('#box').click(function() { alert('クリックされました。'); }) }); </script> </head> <body> <div id="box"> <p></p> </div> </body> </html>
[作成結果]
以下、実際の作成結果です。
↓