ホームページ > 記事 > ウェブフロントエンド > JQuery Tips関連(1)----$.Ready()_jqueryについて
JQuery Tips関連(1)----$.Ready()_jqueryについて
- WBOYオリジナル
- 2016-05-16 16:39:371579ブラウズ
私は最近 JQuery を勉強していますが、これはまだ非常に幅広く奥深いものです。
について学習の概要を共有しましょう。$(document).Ready() メソッド VS OnLoad イベント VS $(window).load() メソッド
JQuery に触れるときに最初に学ぶのは、イベントをいつ開始するかということです。長い間、ページの読み込み後にトリガーされるイベントは、「Body」の Onload イベントに読み込まれていました。
Body の Onload イベントや JQuery の Ready メソッドと比較すると、次のような欠点があります。
1. 複数の関数のロードに関する問題
<body onload="a();b();"> </body>
2. コードとコンテンツは分離されていません
言うまでもなく、これはとても気持ち悪いです-.-!!
Body.Onload イベントの場合、すべてのページ コンテンツ (写真、フラッシュなどを含む) が読み込まれるまでトリガーされません。ページに大量のコンテンツがある場合、ユーザーは長時間待機します。 🎜>
$(document).ready() メソッドに関しては、このメソッドはページのすべての DOM がロードされた後にのみトリガーされます。これにより、間違いなく Web ページが大幅に高速化されます。
ただし、写真のズームインやズームアウト、写真のトリミングなど、一部の特殊なアプリケーションでは使用できません。 Web ページのすべてのコンテンツが読み込まれた後に実行する必要がありますか? $(window).load() メソッドを使用することをお勧めします。このメソッドは、ページのすべてのコンテンツが読み込まれるまでトリガーされず、OnLoad イベントの欠点がありません。
<script type="text/javascript">
$(window).load(function() {
alert("hello");
});
$(window).load(function() {
alert("hello again");
});
</script>
上記のコードは、ページのすべてのコンテンツが読み込まれた後に順番に実行されます。もちろん、対応する Unload メソッドも忘れないでください
$(window).unload(function() {
alert("good bye");
});
上記のコードは、ページが閉じられるとトリガーされます。すべての DOM をロードする前に JS コードを起動します
この方法はデバッグ時に私のお気に入りであり、開発中にもこの方法を使用することがあります
<body>
<script type="text/javascript">
(function() {
alert("hi");
})(jQuery)
</script>
</body>
はい、js クロージャの形式を使用して js コードを本体に埋め込みます。もちろん、この方法で js コードを直接埋め込むこともできます。次のように注文の問題に追加します:
<body>
<div id="test">this is the content</div>
<script type="text/javascript">
alert($("#test").html());//I Can display the content
</script>
</body>
<body>
<script type="text/javascript">
alert($("#test").html());//I Can't display the content
</script>
<div id="test">this is the content</div>
</body>
上記 2 つのコード、2 番目のコードは現在のコードより前の DOM しか解釈できず、解析された DOM の数にテストが存在しないため、2 番目のコードは正しく表示できません。