crossline

▼jQiery-イベント2-

font-size:12px;line-height: 150%;

 

 

 

 

■同じ要素を2回とってこないようにする■

 

f:id:ishuko:20140615192958p:plain

 

↑これは「$('#div1')」が2回書かれていて、もう少し簡単に書き換えられないかな...ってところ...

 

f:id:ishuko:20140615193848p:plain

 

var でelementと宣言して、「$('#div1')」を1回しか使わないようにしている

 

 

<focus/blurの場合>

 

f:id:ishuko:20140615222852p:plain

 

 

f:id:ishuko:20140615222912p:plain

 

 

※変数に保存しておけば、ページのなかに探しにいくのは1回!!

 

 

 

 

■イベントとthis■

 

 

thisはイベントが発生した要素が格納される

 

 

f:id:ishuko:20140615225156p:plain

 

ブラウザ上での表示↓

 

f:id:ishuko:20140615225208p:plain

 

  1. 5つのdivを取得してきて、jQueryオブジェクト化:$('.clickTest')
  2. これらにクリックイベントを設定。クリックされたら次の命令を実行:click(function(){})
  3. クリックされた要素をjQueryオブジェクト化:$(this)
  4. クリックされた要素中のテキストを変更:text('クリックされました!');

 

 

■(DOM要素)■

 

  • $('function ( ) { }')
  • $('セレクタ')
  • $('HTMLの断片')
  • $(DOM要素)

 

-$(function( ) { })-

  • $( )にfunctionを入れた場合は「ページ読み込み完了時に実行されるコードを予約する」という動作
  • ページの読み込み完了イベント

$(function(){

    alert('このコードはページ読み込み完了時に実行される');

});

 

-$('セレクタ')-

  • $( )に文字列を入れた場合は「セレクタ」として解釈され、取得してきた要素をjQueryオブジェクト化する

$('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オブジェクトを作ることができる

 

 

 

 

広告を非表示にする