読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

readyイベント

readyイベントとは

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

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

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


省略すると

$(function() {
  //処理
});
readyイベントが必要な理由
  • DOMは読み込みの順に実行されるため、cssメソッドが実行されるタイミングで、対象となる要素などが読み込まれていないと処理が実行されないため
画像の読み込みが完了してから実行
  • もし画像そのものに対して、何らかの処理を加えるコードがあった場合は、画像が読み込まれてからjQueryのコードを実行する必要があります


その場合は、以下のように記述して、画像の読み込みが完了してからjQueryのコードを実行します。

$( window ).on( 'load', function() {
  //処理
});
エイリアス($)の重複の対処
  • $ は、jQueryインスタンスとして割り当てられますが、他のライブラリでも同様の割り当てがあり、重複する場合があります


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

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


省略形も同様です。

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