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> </head> <body> <form> <input type="button" value="HTML"> <input type="button" value="CSS"> <input type="button" value="JavaScript"> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { $( 'input[type=button]' ).click( function() { var val = $(this).val(); alert( val ); }); console.log( val ); }); </script> </body> </html>
onメソッドの利用
- onメソッドは、offメソッドでイベントを外すことが可能
- appendメソッドで「後から追加される」要素に対してもイベントを付与することが可能
- スマートフォンのイベントを取得する際に「$( 'セレクタ' ).0n( 'touchstart' )」が使用可能です
《onメソッドを使用した場合》
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>thisキーワード</title> </head> <body> <form> <input type="button" value="HTML"> <input type="button" value="CSS"> <input type="button" value="JavaScript"> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { $( 'input[type=button]' ).on( 'click', function() { var val = $(this).val(); alert( val ); console.log( val ); }); }); </script> </body> </html>
readyイベントとは
- イベントの中で最も大事なイベントが、readyイベントになります
- このイベントは、DOMの読み込み完了時に実行されます
- そのため、jQueryを使用する場合は必ずreadyイベントを設定することになります
jQueryの実行パターン
$( document ).ready( function() { //処理 });
次の構文も同じ意味です。
$( document ).on( 'ready', function() { //処理 });
省略すると
$(function() { //処理 });
※3系では、省略形で記述します。
readyイベントが必要な理由
- DOMは読み込みの順に実行されるため、cssメソッドが実行されるタイミングで、対象となる要素などが読み込まれていないと処理が実行されないため
