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

      2016/05/23

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

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

■readyイベントとは

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

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

■記述方法

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

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

 

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

 

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

 

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

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

megane

megane

最近、個人事業主から法人へと進化しました。 エンジニア歴13年位です。PHPとかMysqlを使ってWebシステムを構築します。 Javaも書きます。 CakePHPも使います。 サーバのチューニングもごりごりやります。 あと、お肉と自動車が好きです。Twitterとか申請どうぞ。

 - jQuery ,