イベントを設定する(2)
同じ要素を二度取ってこないようにする
$(function(){ $('#div1').click(function(){ $('#div1').text('クリックされました'); }); });
この記述には「$('#div1')」が二度書かれています。
それを変数を使って書き換えます。
$(function(){ var element = $('#div1'); element.click(function(){ element.text('クリックされました'); }); });
- focus/blurの場合
$(function(){ $('#input1').focus(function(){ $('#input1').addClass('active'); }); $('#input1').blur(function(){ $('#input1').removeClass('active'); }); });
書き換え後は、
$(function(){ var element = $('#input1'); element.focus(function(){ element.addClass('active'); }); element.blur(function(){ element.removeClass('active'); }); });
変数を使って無駄な処理を減らす
- 変数に保存しておけば、ページの中に探しにいくのは「1回」
イベントとthis
- 固有の要素をidで指定すると煩雑になる
イベントが発生した要素を取得する
- thisはイベントが発生した要素が格納されます
《index.html》
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery 〜</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="jquery-1.9.1.min.js"></script> <script src="scripts.js"></script> </head> <body> <div class="clickTest">div!</div> <div class="clickTest">div!</div> <div class="clickTest">div!</div> <div class="clickTest">div!</div> <div class="clickTest">div!</div> </body> </html>
《script.js》
$(function(){ $('.clickTest').click(function(){ $(this).text('クリックされました'); }); });
$(DOM要素)
- $(function(){});
- $('セレクタ')
- $('HTMLの断片')
- $(DOM要素)
$(function(){});
- $()にfunctionを入れた場合は「ページ読み込み完了時に実行されるコードを予約する」という動作
- ページの読み込み完了イベント
$(function(){ alert('このコードはページ読み込み完了時に実行される'); });
$('セレクタ')
$('#somediv').css('border','3px solid red');
$('HTMLの断片')
- $()にHTMLの断片を入れた場合は「要素」を作ることができます
$('<p>paragraph</p>').css('border','3px solid red');
$(DOM要素)
<body> <div id="div1">divです。</div> </body>
- jQueryなし
window.onload = function(){ var div = document.getElementById('div1'); div.style.fontSize = '50px'; };
- jQueryあり
$(function(){ var div = $('#div1'); div.css('font-size','50px'); });
$(this)
$(function(){ $('.clickTest').click(function(){ $(this).text('クリックされました'); }); });
まとめ
- イベントとは、何かが起こったときに初めてコードを実行させることのできる仕組み
- 要素がクリックされたときに何かするには:click(function)
- 要素にマウスがのったときに何かするには:mouseenter(function)
- 要素からマウスがおりたときに何かするには:mouseleave(function)
- mouseenter(function) + mouseleave(function) = hover(function,function)
- 要素にフォーカスが当たったときに何かするには:focus(function)
- 要素からフォーカスが外れたときに何かするには:blur(function)
- 二度以上同じ要素を操作したいときには変数にjQueryオブジェクトを保存しておく
- イベントハンドラのなかのthisはイベントが起こった要素
- $(DOM要素)でjQueryオブジェクトを作ることができる