jQueryのJavaScriptをHTMLの読み込みが完了してから実行する方法です。あまりにもかんたんなので何をしているのか忘れてしまうくらい。
あれだけコードを読んでるとき出てくるのに、自分も数年に1回なんだったっけ？ となるので備忘録です。
jQueryで、HTMLの読み込み完了をしてから実行する方法はとてもかんたんです。いきなりですがサンプルを見てみましょう。
(function($) {
$(function(){
// ここにHTML読み込み完了後に実行したい処理を書く。
});
})(jQuery);jQueryのHTML読み込み完了後の実行タイミング
jQueryのHTMLの読み込み完了は、$(function(){…});と書きます。JavaScriptでは
window.onload = function(){
...
}になります。
正確には、HTMLの読み込みが完了してDOMの構築が完了したとき。
DOM（Document Object Model）
htmlのタグや属性の情報をメモリ上に展開したもの。オブジェクト（変数）でhtmlタグの内容が参照できる。
htmlに限らず、xmlなどのマークアップ言語全般に関する規定。W3Cから勧告されている。
ツリーの構成をしているので、DOMツリーとも呼ばれる。
JavaScriptでhtmlの情報をあつかうときは、DOMにアクセスしている。
サンプルコードの(function($) {...})(jQuery);は、$の定義の衝突を防ぐためのもので、この関数の中では$はjQueryと認識されます。
$(function(){...});を使うときは一緒に記述すると決めてしまった方がよいでしょう。
なぜ、HTML読み込み完了のタイミングが必要なのか？
紹介したタイミングが必要なのは、JavaScriptは、DOMが作られた状態があって力を発揮するからです。
DOMがなければ、JavaScriptはHTMLの要素を参照できません。これではコンテンツに対して処理を行えません。
JavaScriptはたいていの場合、DOM構築の完了後に処理をはじめると思っていいです。
