LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

jQuery HTMLの読み込みが完了してから実行する

jquery image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

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構築の完了後に処理をはじめると思っていいです。

最近Webカテゴリでよく読まれている記事です。

domain image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください