▼jQiery-イベント2-
font-size:12px;line-height: 150%;
■同じ要素を2回とってこないようにする■
↑これは「$('#div1')」が2回書かれていて、もう少し簡単に書き換えられないかな...ってところ...
var でelementと宣言して、「$('#div1')」を1回しか使わないようにしている
＜focus/blurの場合＞
↓
※変数に保存しておけば、ページのなかに探しにいくのは1回！！
■イベントとthis■
thisはイベントが発生した要素が格納される
ブラウザ上での表示↓
- ５つのdivを取得してきて、jQueryオブジェクト化：$('.clickTest')
- これらにクリックイベントを設定。クリックされたら次の命令を実行：click(function(){})
- クリックされた要素をjQueryオブジェクト化：$(this)
- クリックされた要素中のテキストを変更：text('クリックされました！');
■（DOM要素）■
- $('function ( ) { }')
- $('セレクタ')
- $('HTMLの断片')
- $(DOM要素)
-$(function( ) { })-
- $( )にfunctionを入れた場合は「ページ読み込み完了時に実行されるコードを予約する」という動作
- ページの読み込み完了イベント
$(function(){
alert('このコードはページ読み込み完了時に実行される');
});
-$('セレクタ')-
$('somediv').css('border','3px solid black');
-$('HTMLの断片')-
- $( )にHTMLの断片を入れた場合は、「要素」を作ることができる
$('<p>pragraph</p>').css('border','3px solid black');
-$(DOM要素)-
<body>
<div id="div1">div!</div>
</body>
◉jQueryなし
window.onload=function( ){
var div = document.getElementById('div1');
div.style.fontSize = '50px';
};
◉jQueryあり
$(function(){
$('.clickTest').click(function(){
});
});
-$(this)-
$(function(){
$('clickTest').click(function(){
$(this).text('クリックされました');
});
});
■まとめ■
- イベントとは、何かがおこったときにはじめて実行させることのできる仕組み
- 要素がクリックされたときに何かする：click(function)
- 要素にマウスが乗ったときに何かする：mouseenter(function)
- 要素からマウスが降りたときに何かする：mouseleave(function)
- 要素からフォーカスがあたったときに何かする：focus(function)
- 要素からフォーカスが外れたときに何かする：blur(function)
- 2回以上同じ要素を操作したいときには変数jQueryオブジェクトを保存しておく
- $(DOM要素)でjQueryオブジェクトを作ることができる
