2015年12月18日金曜日

DOM読み込み時に動作させる　$(document).ready

  
こんにちは山田です。

DOMという言葉を最近知りました。

■DOMとは　：XMLやHTMLで記述された文書をプログラムやスクリプトから参照あるいは操作するための方法を提供する仕組み（出典｜ASCII.jpデジタル用語辞典）

というわけで
DOMの読み込み完了時のみに処理をいれたい時に使う関数の紹介です。
フロントエンドだと、jQueryがやっぱり便利ですね。

■関数はこちら
JavaScript 
jQuery(document).ready(function(){
　//実行したい関数
});

■実際に作ったソース

非表示にしたい要素を隠したり、
タブ付きメニューのタブ部分とパネル部分の初期化を行ってみました。

jQuery(document).ready(function(){
　 //閉じたい要素を閉じたり
 $("#placeCount").css("display","none");
 
 //タブ付きメニューの、タブとパネル部分の初期化
 $("#tab li:first").addClass("tabCurrent");
 $(".panel:not(:first)").hide();
});

1 件のコメント:

  1. Unknown2015年12月24日 12:57

    おまじない的な書き方になりますが、以下の記述が一般的かと思います。(挙動は同じです)
    こちらのほうが文字数(jsのファイルサイズ)も節約できますね。

    $(function() {
    // 実行したい関数
    });

    jQueryは便利ですが、その中で何が行われているかを知っておくのも重要だと思います。
    今回の処理をjQueryを使わずに書くとどうなるでしょう。
    「DOMContentLoaded」で調べてみるとヒントになるかと思います。

    お時間のある時に是非！

    返信削除

登録: コメントの投稿 (Atom)