jquery $(document).ready() と onload の違いは何ですか

違い: window.onload には簡略化された記述方法はなく、画像を含むページ内のすべての要素が読み込まれるまで実行する前に待つ必要があります。また、「$(document).ready()」は「$(function(){})」と省略できます。これは、DOM 構造が描画された後に、ロードされるまで待つことなく実行されます。

推奨チュートリアル: jquery ビデオ チュートリアル

##jquery $(document).ready( ) window.onload

1. 実行時間

window.onload は、画像を含むページ内のすべての要素が読み込まれるまで待機する必要があります。実行することができます。

$(document).ready() は、DOM 構造が描画された後、ロードされるまで待つことなく実行されます。

2. 書き込み数が異なります

複数の window.onload を同時に書き込むことはできません。複数の window.onload メソッドがある場合、書き込みできるのは 1 つだけです

$(document).ready()は同時に複数記述でき、全て実行可能

3. 簡易記述方法

window.onload には簡略化された記述方法はありません

$(document).ready(function(){}) は $(function(){});## と省略できます

#手順:

ドキュメントを読み込むブラウザを例にとります。ページが読み込まれた後、ブラウザは JavaScript を通じて DOM 要素にイベントを追加します。通常の JavaScript コードでは通常 window.onload メソッドが使用されますが、jQuery では $(document).ready() メソッドが使用されます。

$(document).ready() メソッドと window.onload メソッドは機能は似ていますが、実行タイミングが異なります。 window.onload メソッドは、Web ページ内のすべての要素 (要素の関連ファイルを含む) がブラウザーに完全に読み込まれた後に実行されます。つまり、現時点では JavaScript は Web ページ内のどの要素にものみアクセスできます。 jQuery の $(document).ready() メソッドを通じて登録されたイベント ハンドラーは、DOM の準備が完全に完了したときに呼び出すことができます。この時点で、Web ページのすべての要素に jQuery がアクセスできるようになりますが、これはこれらの要素に関連付けられたファイルがダウンロードされたことを意味するわけではありません。

たとえば、大規模なフォト ギャラリー Web サイトでは、Web ページ内のすべての画像に、クリック後の画像の非表示または表示などの特定の動作が追加されています。 window.onload メソッドを使用する場合、ユーザーは各イメージが読み込まれるまで待ってから続行する必要があります。 jQuery の $(document).ready() メソッドを使用して設定すると、すべての画像がダウンロードされるのを待たずに、DOM の準備ができたらすぐに操作できます。明らかに、Web ページを DOM ツリーに解析する方が、Web ページ内のすべての関連ファイルを読み込むよりもはるかに高速です。

もう 1 つの注意点は、$(document).ready() メソッドに登録されたイベントは DOM の準備ができている限り実行されるため、この時点では要素の関連ファイルがダウンロードされない可能性があることです。時間。たとえば、画像に関連する HTML はダウンロードされ、DOM ツリーに解析されていますが、画像はまだロードされていない可能性が高いため、画像の高さや幅などの属性はこの時点では有効ではない可能性があります。時間。この問題を解決するには、JQuery の別のページ読み込みメソッド、load() メソッドを使用できます。 load() メソッドは、ハンドラー関数を要素の onload イベントにバインドします。ハンドラー関数がウィンドウ オブジェクトにバインドされている場合は、すべてのコンテンツ (ウィンドウ、フレーム、オブジェクト、画像などを含む) が読み込まれた後にトリガーされます。ハンドラー関数が要素にバインドされている場合は、要素が読み込まれた後にトリガーされます。要素のコンテンツがロードされます。 jQuery コードは次のとおりです:

$(window).load(function () {
    //编写代码
})

JavaScript の次のコードと同等です:

window.onload = function () {
    //编写代码
}

Web ページに 2 つの関数があると仮定すると、JavaScript コードは次のとおりです:

function one() {
    alert("one");
}
function two() {
    alert("two");
}

Web ページが読み込まれると、最後に Javascript コードを通じて one 関数と two 関数がそれぞれ呼び出されます。

window.onload = one;
window.onload = two;

ただし、コードを実行すると、文字列 "two" のみが返されることがわかります。 」ダイアログボックスが表示されます。

文字列「one」ダイアログ ボックスをポップアップできない理由は、JavaScript の onload イベントが一度に 1 つの関数への参照しか保存できないためです。前の関数は後の関数で自動的に上書きされます。既存の関数では使用できないため、動作に新しい動作を追加します。

2 つの関数を順次トリガーする効果を実現するには、新しい JavaScript メソッドを作成することによってのみ実現できます。JavaScript コードは次のとおりです。

window.onload = function () {
    one();
    two();
}

コードは次のように記述されています。この方法では、特定の問題は解決できますが、それでも特定のニーズを満たすことはできません。たとえば、複数の JavaScript ファイルがある場合、各ファイルは window.onload メソッドを使用する必要があります。この場合、上記の方法。 Javascript の共有 onload イベントを参照することができ、jQuery の $(document).ready() メソッドはこれらの状況を適切に処理できます。$(document).ready() メソッドを呼び出すたびに、既存の動作に新しい動作が追加されます。 、これらの動作関数は、登録された順序に従って順次実行されます。たとえば、次の jQuery コード:

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

コードを実行すると、文字列「one」ダイアログ ボックスが表示され、次に文字列「two」ダイアログ ボックスが表示されます

Forプログラミング関連の知識については、

プログラミング教育

をご覧ください。 ！

以上がjquery $(document).ready() と onload の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。