jQuery APIリファレンスイベント操作：ページロード
- ready(fn)〔DOM要素が操作可能になった時に実行される関数〕
ready(fn)
DOM要素が操作可能になった時に実行される関数
2009/2/27
ready(fn) 戻り値：jQuery
DOM要素の準備ができた時（操作可能な状態になった時）に実行されます。
Webアプリケーションの応答時間を改善できるため、ready関数はイベントモジュールの中で最も重要な関数です。
ready関数は、window.onloadを使って、ページの読み込みが完了した時に実行する関数を指定する代わりに使用します。 ready関数には、DOM要素が読み込まれて操作される準備ができた瞬間に呼ぶ関数を指定することができます。
readyイベントハンドラに渡される引数があります。詳細はjQuery関数を参照してください。 その引数には好きな名前を付けることができるため、名前が衝突してしまうというリスクなしに$エイリアスを付けることができます。
ページ上に、いくつもでも$(documennt).readyイベントを記述できます。 複数記述した場合は、追加された順に実行されます。
すべてのスタイルシートがスクリプトの前（特にready関数が呼ばれる前）に含まれているか確認してください。 そして、jQueryコードが実行されるの前に、すべての要素のプロパティが正しく定義されているか確認してください。 そうしないと、SafariのようなWebkitベースのブラウザで問題が起きる可能性があります。
第1引数fnには、DOM要素が操作可能になった時に実行する関数を指定します。
function callback(jQuery参照){ this; /* ドキュメント */ }
readyの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：ページロード：readyの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#res").text("DOMが読み込まれ操作可能になりました。").css("color","red");
});
</script>
</head>
<body>
<div id="wrap">
<h1>イベント操作：ページロード：readyの使用例 | jQuery</h1>
<p>▼DOMが読み込まれたときにメッセージを表示します。</p>
<!-- CODE -->
<p id="res"></p>
<!-- CODE / -->
</div>
</body>
</html>