web-dev-qa-db-ja.com

jQueryのready（）メソッドのショートカット

テスト結果が混乱するので、ready（）メソッドのショートカットをいくつか見て、実際にどちらが最初に発生するかを知りたいのですが。

$(document).ready(function(){
    alert("document ready");
});

$(window).load(function(){
    alert("window ready");
});

(function($){
    alert("self invoke");
})(jQuery);

ここでは、最初に自己呼び出しが行われ、次にドキュメント、次にウィンドウが行われます。 self invokeテクニックはready（）メソッドと見なされますか？

jquerydocument-ready
44
Wilkins

3番目のオプションは.ready()（またはjQuery関連）のショートカットではなく、セルフインボークが実行されます即時（すぐにコードに表示されます）、thisはおそらくあなたが考えているショートカットです：

_$(function(){
  alert("I'm a ready shortcut");
});
_

関数を $(func) に渡すことは、$(document).ready(func);のショートカットです。 no-conflict バージョンは次のようになります。

_jQuery(function($) {
  //$ is jQuery
});
_
98
Nick Craver

Nick Craverは彼の発言には正解ですが、最後の例では、jqueryを使用して実際には何も実行していないことは注目に値します。 jQueryがパラメーターとして無名関数に渡されていますが、関数はそれに対して何も実行していません。

最後の例は次と同等です。

(function(){
    alert("self invoke");
})();

そして明らかに、これは、コード行がヒットされてアラートが実行されるとすぐに、ただちに匿名関数が呼び出されることを示しています。それはjQueryをまったく呼び出さないので、Nickはそれが間違いなくready（）メソッドではないと言ったときに正しいのです。

13
Chris

この記事 は、最初の2つがどのように異なるかについての良い説明があります：

$(document).ready対$(window).load

jQueryは、コードを実行してイベントハンドラーをアタッチするための2つの強力なメソッド、$(document).readyおよび$(window).loadを提供します。すべてのグラフィックがまだロードされていない場合でも、HTML-DocumentがロードされてDOMの準備ができているとき、ドキュメント準備イベントはすでに実行されています。ウィンドウがロードされる前に特定の要素のイベントをフックしたい場合、$(document).readyが適切な場所です。

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  alert("document is ready");
});

ウィンドウの読み込みイベントは、すべてのフレーム、オブジェクト、画像を含むページ全体が完全に読み込まれたときに少し遅れて実行されます。したがって、画像やその他のページコンテンツに関連する関数は、ウィンドウまたはコンテンツタグ自体のロードイベントに配置する必要があります。

$(window).load(function() {
  // executes when complete page is fully loaded, 
  // including all frames, objects and images
  alert("window is loaded");
});
6
Hector Correa