$(function(){})・jQuery(function($) {});のメモ: jQuery

Tweet

Pocket

$(function(){})やjQuery(function($) {})を使ってjQueryを実行する。

JQuery 開発者向けメモにある$(function(){})の分かりやすい解説を引用する。

HTMLとJavaScriptコードを分離する場合，HTMLが読み込み終わった後で， 必要なイベントを設定します．
jQueryでは，HTMLが読み込み終わった後に実行するコードを，onload ではなく， $(function(){}) を利用して実行します．
onload の場合は，ページの全ての画像が読み込まれるまで実行されませんが， $(function(){}) を利用すると，HTMLドキュメントの準備が出来た段階で 実行させることが出来ます．
$(function(){}) は複数回指定することができるので， 別ファイルに分離したJavaScriptコードの中でも利用できます．

» JQuery 開発者向けメモ

$(function(){})の働き

$(function(){
    // HTMLドキュメントのロード後に実行したい初期化コード
});

HTMLファイルに<div id=”main”>～</div>、CSSファイルに#main { width: 800px; }と記述しhead部分に下記処理を記述したときの動作を確認する。

$('#main').width(); 		// ----- HTML読み込み前(DOM構築前)に処理がされるのでdiv#main要素の幅800pxを取得できない
$(function(){
    $("#main").width();	// ----- HTML読み込み後(DOM構築後)に処理がされるのでdiv#main要素の幅800pxを取得できる
});

$(function(){})の問題点

$(function(){})の$はjQueryオブジェクト。グローバルオブジェクトとして$を利用しているライブラリとは干渉してしまう。

jQuery(function($) {})

$がjQueryオブジェクトの役割をするのはJQuery()というサンドボックスの中だけ。

» jQueryをmootoolsなどの他のライブラリと干渉しないようにする方法まとめ :: 5509