Javascript は、DOM 要素が定義された後でのみ、DOM 要素に対して特定の操作を実行できます。この問題については、「JavaScript 実行シーケンス」//www.VeVB.COm/article/44577.htm で詳しく説明されています。
jQuery は document.ready を使用して、DOM 要素がロードされた後に実行されるコードが確実に実行されるようにします。たとえば、記事「jQuery の基礎 - 開始方法」では、次の jQuery コードを使用しました。
次のようにコードをコピーします。
<!-- $(document).ready(function ()
{
alert("初めての jQuery コード!");
});
// -->
このコードの意味は、Dom ツリーがロードされるときに、警告メッセージが表示されることです。
document.ready() は従来のメソッド <body onload="load()"> に似ていますが、onload() メソッドは DOM 要素や他のページ要素 (画像など) の読み込みなど、ページが読み込まれた後に発生する点が異なります。
したがって、document.ready() メソッドを使用した場合の実行速度は、onload() メソッドよりも高速になります。
最後に注意すべき 2 つの点 (jQuery ドキュメントより):
1. <body> 要素の onload イベントに登録された関数がないことを確認します。登録されていない場合、$(document).ready() イベントがトリガーされない可能性があります。 (
以下の例でこれを実証しようとしましたが、成功しなかったので、これは単なる可能性だと思います。 )
次のようにコードをコピーします。
<html>
<頭>
<title>2 番目の jQuery</title>
<mce:script type="text/javascript" src="/js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce:script type="text/javascript">
<!-- //以下はjquery登録関数を含むload関数です $
function load(){ $("p").append("<b>こんにちは</b>");
//以下はjQueryのコードです
$(ドキュメント).ready(関数()
{ $("p").append("初めての jQuery コード!"
);
$("p").append("<b>こんにちは</b>"); // -->
</mce:スクリプト>
</head>
<body onload="load()">
<h2>jQuery の簡単な例 2</h2>
<p>言いたいことは次のとおりです。</p>
</body>
</html>
2. $(document).ready() イベントは、同じページ内で無制限に使用できます。登録された関数は (コード内で) 順番に実行されます。