[ヅ] jQuery(document).ready の書き方4パターン(+1) (2014-07-19)

jQuery(document).ready の書き方4パターン(+1) (2014-07-19)

jQuery(document).ready には、Webページの HTML DOM が構築された後に実行したい関数を指定する。

複数の関数を指定することが可能で、指定した順番に実行される。

以下、 jQuery(document).ready の4パターン + 1パターンの書き方のサンプルコード。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery(document).ready sample</title>
<script src="http://www.nilab.info/lib/js/jquery.js" type="text/javascript" charset="UTF-8"></script>
<script>
 
// パターン1 (正式な書き方らしい＆無名関数)
jQuery(document).ready(function(){alert("1");});
 
// パターン2 (正式な書き方らしい＆無名関数)
$(document).ready(function(){alert("2");});
 
// パターン3 (省略形＆無名関数)
jQuery(function(){alert("3");});
 
// パターン4 (省略形＆無名関数)
$(function(){alert("4");});
 
// パターン5 (省略形＆関数指定)
function hoge(){alert("5")};
$(hoge);
 
</script>
</head>
<body>
<h1>jQuery(document).ready sample</h1>
</body>
</html>

実行できるサンプルコードをここに置いておく。
⇒ jQuery(document).ready sample

公式のドキュメント .ready() | jQuery API Documentation を見ると、他にも書き方のパターンが紹介されているが、推奨されていない (deprecated, not recommended) 書き方も混ざっているので注意。

以下、参考資料。

この関数を使う場合、bodyのonloadイベントには何も書かないようにしてください。readyイベントが実行されなくなってしまいます。

ready(fn) - jQuery 日本語リファレンス

JavaScriptは、ページがレンダリングされるタイミングでコードを実行するためのloadイベントを提供していますが、画像などのすべてのリソースを完全に受信するまで、このイベントは実行されません。殆どの場合、DOM階層が完全に構築された時点で出来るだけ早くスクリプトが実行されるのが望ましいでしょう。 ready()はDOMの準備が整い、他の全てのイベントハンドラが登録され、また他の全てのjQueryコードが読み込まれたベストなタイミングでイベントハンドラを実行することを保証してくれます。 CSSスタイルプロパティの値に依存するスクリプトを使用する際には、スクリプトを参照する前に外部スタイルシートまたは埋め込みスタイルの要素を参照することは重要です。

もし処理が画像のサイズに依存するようなものであれば、.ready()ではなく.load()を使用すべきです。

一般的に、.ready()は<body onload="">とは共存できません。どうしてもloadイベントを使用したいのであれば、.ready()の使用をやめるか、jQueryの.load()メソッドを windowやimageのような要素に対して紐付けてるようにしてください。

.ready() | jQuery 1.9 日本語リファレンス | js STUDIO

ref. [ヅ] window.onload よりも jQuery(document).ready のほうがだいたい適切っぽい (2014-06-23)

tags: javascript jquery

Posted by NI-Lab. (@nilab)

ヅラッシュ！ by NI-Lab.

jQuery(document).ready の書き方4パターン(+1) (2014-07-19)