JQuery_jquery での DOM ロードとイベント実行の例の分析

この記事の例では、JQuery での DOM ロードとイベント実行の原則について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

JavaScript と HTML 間の対話は、ユーザーとブラウザーがページを操作するときに発生するイベントを通じて処理されます。ドキュメントまたはその要素の一部で特定の変更または操作が発生すると、ブラウザは自動的にイベントを生成します。たとえば、ブラウザがドキュメントをロードするとイベントが生成され、ユーザーがボタンをクリックするとイベントも生成されます。これらの対話は従来の JavaScript イベントを使用して実行できますが、jQuery は基本的なイベント処理メカニズムを追加および拡張します。 jQuery は、より洗練されたイベント処理構文を提供するだけでなく、イベント処理機能も大幅に強化します。

ドキュメントを読み込むブラウザを例に挙げます。ページが読み込まれた後、ブラウザは JavaScript を通じて DOM 要素にイベントを追加します。通常の JavaScript コードでは通常 window.onload メソッドが使用されますが、jQuery では $(document).ready() メソッドが使用されます。 $(document).ready() メソッドはイベント モジュールの最も重要な関数であり、Web アプリケーションの応答速度を大幅に向上させることができます。 jQuery は $(document).ready() メソッドを使用して、従来の JavaScript window.onload メソッドを置き換えます。このメソッドを使用すると、DOM を操作し、DOM のロード時にバインドされている関数を呼び出すことができます。使用中は、$(document).ready() メソッドと window.onload メソッドの微妙な違いに注意する必要があります。

実行タイミング

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

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

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

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

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

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

次に、windows.onload メソッドと $(document).ready() メソッドの違いを詳しく説明します。

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

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

Web ページが読み込まれたら、次の JavaScript コードを通じて 1 つの関数と 2 つの関数をそれぞれ呼び出します:

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

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

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

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

この方法でコードを記述するといくつかの問題は解決できますが、それでも特定のニーズを満たすことはできません。たとえば、複数の JavaScript ファイルがある場合、各ファイルは window.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”对话框。

下面看看ready()与onload()的耗时：

jQuery的ready()耗时 : 498 ms

简写方式

上面我们ready函数写成这样：

$(document).ready(function(){  
    // 编写代码  
})

也可以简写成这样：

$(function(){  
  // 编写代码  
})

另外，$(document)也可以简写为$()。当$()不带参数时，默认参数就是“document”，因此可以简写为：

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

3种方式都是一样的功能，读者可以根据自己的喜好，选择其中的一种。

希望本文所述对大家的jQuery程序设计有所帮助。