readyイベント

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のエイリアスとして使用できる
});