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

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
us us
jquery image

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に限らず、xmlなどのマークアップ言語全般に関する規定。W3Cから勧告されている。

サンプルコードの(function($) {...})(jQuery);は、$の定義の衝突を防ぐためのもので、この関数の中では$はjQueryと認識されます。
$(function(){...});を使うときは一緒に記述すると決めてしまった方がよいでしょう。

なぜ、HTML読み込み完了のタイミングが必要なのか?

いま紹介したタイミングが必要なのは、JavaScriptは、DOMが作られた状態があって力を発揮するからです。

DOMがなければ、JavaScriptはHTMLの要素を参照できません。これでは、コンテンツに対して処理を行うことができません。

JavaScriptは、たいていの場合、DOM構築の完了後に処理をはじめると思っていいです。

 

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

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

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

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

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

この記事を気に入ったらぜひシェアも!!