thisキーワード と readyイベント

thisキーワード

  • JavaScript予約語
  • thisは、標準の要素オブジェクト
  • jQueryメソッドにアクセスするには、「$()関数」で「this」をラッピングする必要があります
  • 「$()関数」を利用することで、標準の要素オブジェクトをjQueryオブジェクトに変換できます
  • その時の流れに応じて意味するものが変わります


《例》

$( document.body ).css( 'background-color', 'red' );
イベントハンドラ内のthis
  • htisは、イベント処理の対象となる要素自体を指します(セレクタと同義)
  • thisというキーワードを使うことで、どの要素が対象となったか特定できます
  • thisは、jQueryオブジェクトではない「DOM要素」のため、jQueryメソッドを続けて書くことができません
  • jQueryのメソッドを使えるようにする場合は、「$( this )」とすることで可能になります


《onメソッドを使用しない場合》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>thisキーワード</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  $( 'input[type=button]' ).click( function() {
    var val = $(this).val();
    alert( val );
  });
  console.log( val );
});
</script>
</head>
<body>
<form>
<input type="button" value="HTML">
<input type="button" value="CSS">
<input type="button" value="JavaScript">
</form>
</body>
</html>
onメソッドの利用
  • onメソッドは、offメソッドでイベントを外すことが可能
  • appendメソッドで「後から追加される」要素に対してもイベントを付与することが可能
  • スマートフォンのイベントを取得する際に「$( 'セレクタ' ).0n( 'touchstart' )」が使用可能です


《onメソッドを使用した場合》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>thisキーワード</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  $( 'input[type=button]' ).on( 'click', function() {
    var val = $(this).val();
    alert( val );
    console.log( val );
  });
});
</script>
</head>
<body>
<form>
<input type="button" value="HTML">
<input type="button" value="CSS">
<input type="button" value="JavaScript">
</form>
</body>
</html>

readyイベントとは

  • イベントの中で最も大事なイベントが、readyイベントになります
  • このイベントは、DOMの読み込み完了時に実行されます
  • そのため、jQueryを使用する場合は必ずreadyイベントを設定することになります
jQueryの実行パターン
$( document ).ready( function() {
  //処理
});


次の構文も同じ意味です。

$( document ).on( 'ready', function() {
  //処理
});


省略すると

$(function() {
  //処理
});
readyイベントが必要な理由
  • DOMは読み込みの順に実行されるため、cssメソッドが実行されるタイミングで、対象となる要素などが読み込まれていないと処理が実行されないため
エイリアス($)の重複の対処
  • $ は、jQueryインスタンスとして割り当てられますが、他のライブラリでも同様の割り当てがあり、重複する場合があります


以下が、対応するための記述です。

jQuery( document ).ready( function( $ ) {
  //このイベントハンドラ内では$をjQueryのエイリアスとして使用できる
});


省略形も同様です。

jQuery( function( $ ) {
  //このイベントハンドラ内では$をjQueryのエイリアスとして使用できる
});

jQuery高速化

  • Webサイトのパフォーマンスを重視するために、古いブラウザでは「1.x系」モダンブラウザでは「2.x系」とインクルードするjQueryファイルを分けて記述します
<!--[if lt IE 9]>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!--<![endif]-->

求職者支援訓練 フェリカテクニカルアカデミー