jQueryでHTMLが全て読み込まれてから実行されるreadyイベントの基礎

jQueryは基本的に読み込み完了したHTMLしか操作することができません。HTMLが読み込まれる前に、jQueryのスクリプトを実行してもエラーになってしまいます。ここでは、jQueryのスクリプトが安定して動くようにするために、readyイベントについて紹介します。

■readyイベントとは

DOMが構築され終わったあとに発生するイベントです。要するにHTMLが読み込み終わって、操作できる状態になったら一度発生するイベントです。HTMLの構成が完了した段階でのイベントなので、画像の読み込みなどに関しては、まだ完了していないかもしれません。

このイベントの中で、セレクタによる選択などをすれば、確実にスクリプトを実行することができます。

■記述方法

記述方法は３種類あります。好きな書き方で良いと思います。プロジェクト内にコーディング規約があるのであれば、それに従いましょう。

// 書き方 その１
$(document).ready(function() {
  // ここに処理を書く
});

// 書き方 その２
$().ready(function() {
  // ここに処理を書く
});

// 書き方 その３
$(function() {
  // ここに処理を書く
});

個人的によく見るのが、書き方その３の書き方です。

基本的なところなので、参考にしてみてください。では。