jQuery_jqueryのドキュメントとウィンドウ、ロードとレディの違いの詳細な説明

JavaScript を使用したことのある子供は、window オブジェクトと document オブジェクトについても知っているはずですし、当然、Xiaocai もそれを知っており、よく理解していると思います。最近うまくいかなかったので、彼はそれがそれほど単純ではないことに気づきました。

まず、ウィンドウとドキュメントについて説明します。直感的に言えば、ウィンドウはブラウザウィンドウを表し、ドキュメントはブラウザウィンドウにロードされる dom 要素を表します。最上位のオブジェクトです。

この 2 つの違いは何ですか?わかりやすいのですが、ブラウザがあり、そこに読み込まれたページが 1 画面を超えているとします。当然、このとき、$(window).height() と $( が表示されます。 document)。height() が等しくありません。ウィンドウは常に大きいため、ドキュメントの高さはウィンドウの高さより大きくなければなりません。下の写真をご覧ください:

ロード イベントとレディ イベント について話しましょう (ここでのロードとレディは jQuery イベントを指します。以下も同様です)。

まず、load について説明します。load イベントは主に、ネイティブの window.onload を置き換えるために使用されます。

・窓オブジェクト上。たとえば、$(window).load(fn); です。

・URL を含む要素 (画像、スクリプト、フレーム、iframe)。たとえば、$("img").load(fn); です。

さらに、 $(document).load(fn); などの要素にはロード イベントがありません。これは間違った書き方であり、まったく実行されません。

ページをトリガーするには、ロード イベントが完全にロードされている必要があります。いわゆる完全なロードとは、DOM 構造がロードされるだけでなく、すべてのリンク参照がロードされることも意味します。たとえば、ページ上に多数の画像がある場合、各画像が完全にロードされるまで待つ必要があります。

最も重要なことは、jQuery 公式ドキュメントには、load イベントのブラウザ間互換性が非常に低い (一貫して動作せず、ブラウザ間で確実に動作しない) と明確に記載されていることです。 Xiaocai のテスト後、Google Chrome は $(window).load(fn); のみをサポートしますが、Firefox は $("img").load(fn); をサポートします。

したがって、必要な場合を除き、load イベントを使用することは強く推奨されません。

最後に、ready イベントについて説明します。ready イベントは、$(window).ready(fn);、$(document).ready(fn);、$(“div”) などの任意の要素に追加できます。 .ready(fn );など

ready イベントではページが完全にロードされる必要はなく、DOM 構造をトリガーするためにロードする必要があるだけです。

準備完了イベントは複数同時に登録することができ、実行すると登録した順番で実行されます。なお、異なる要素のreadyイベントを登録しても順番に実行されます。たとえば、次のコード:

コードをコピーします コードは次のとおりです:

$(ウィンドウ).ready(function(){
alert("ウィンドウ");
});
$(document).ready(function(){
アラート("ドキュメント");
});
$("div").ready(function(){
アラート("div");
});

常識によれば、最初に div がロードされるはずなので、alert("div"); が最初に実行され、次に、alert("document") または alter("window"); が実行されます。 "div"); は最後に実行されたものです。したがって、readyイベントが同一要素に登録されているか否かに関わらず、登録順に実行されます。

最後の項目、ready イベントは window.onload (または ) と競合します。window.onload (または ) が使用されると、 Ready イベントは実行されません。

多くの議論の結果、$(document).ready(fn); が最も優れた互換性とセキュリティを備えていることが証明されました。そのような必要がある場合は、このメソッドを使用してください。