ホームページ > ウェブフロントエンド > jsチュートリアル > JQuery onload と read_jquery の概念と使用法の概要

JQuery onload と read_jquery の概念と使用法の概要

WBOY
リリース: 2016-05-16 17:35:11
オリジナル
1335 人が閲覧しました

ページが読み込まれるときは 2 つのイベントがあります。1 つは準備完了であり、ドキュメント構造が読み込まれたことを示します (画像などの非テキスト メディア ファイルを除く)。もう 1 つは画像を含むページのすべての要素が読み込まれたことを示します。および他のファイルがロードされました。 (ready は onload の前にロードされると言えます。!!!)
画像サイズ制御などの一般的なスタイル コントロールは、onload でロードされます。

JS イベント トリガー メソッドは、ready jQ を使用する多くの人は、次のようなスクリプトを書き始めます。
通常の書き方

コードをコピー コードは次のとおりです:
$(function(){
// do something
});

実際、これは jq ready() の略です。 、彼など。 価格:

コードをコピー コードは次のとおりです:
$( document).ready(function( ){
//do something
})

も、jQuer のデフォルトのパラメータは次のとおりです。 🎜>

$().ready(function(){
//何かする
})


$(document).Ready() メソッド VS OnLoad イベント VS $(window).load() メソッド
最初に行うこと通常、JQuery に触れるときは、いつイベントを開始するかを学びます。長い間、ページが読み込まれた後にトリガーされるイベントは、「Body」の Onload イベントに読み込まれていました。Body の Onload イベントや JQuery の Ready メソッドと比較すると、次のような欠点があります。 >複数の関数のロードに関する問題


これは Onload イベントでのみロードできます。 ...
■JQuery では複数の JQuery.Ready() メソッドを使用でき、順番に実行されます
コードとコンテンツが分離されていません
これは言うまでもないことのようですが、非常に気持ち悪いです- .-!!◦ 実行順序が異なります
■ Body.Onload イベントの場合、すべてのページ コンテンツ (写真、フラッシュなどを含む) が読み込まれるまでトリガーされません。ページには多くのコンテンツがあり、ユーザーを長時間待たせます。
■ $(document).ready() メソッドと同様、このメソッドはページのすべての DOM がロードされた後にのみトリガーされます。

ただし、写真のズームインやズームアウト、写真のトリミングなど、一部の特殊なアプリケーションでは間違いなく大幅に高速化されます。 Web ページのすべてのコンテンツが読み込まれた後に実行する必要がありますか? $(window).load() メソッドを使用することをお勧めします。このメソッドは、ページのすべてのコンテンツが読み込まれるまでトリガーされず、



コードをコピー

コードをコピー

上記のコードは、ページが閉じられたときにトリガーされます。
すべての DOM が読み込まれる前に JS コードをトリガーします。
このメソッドは、開発中に時々使用します。



コードをコピーします


コードは次のとおりです。


はい、js を使用します。js コードをクロージャの形式で本文に埋め込みます。もちろん、この方法で js コードを直接埋め込むこともできます。次のように順序の問題に注意してください:




コードをコピーします

コードは次のとおりです:


これはコンテンツです

type="text/javascript">
alert($("#test").html());//コンテンツを表示できません
id="test">これはコンテンツです




上記の 2 番目のコードは、現在のコード DOM にテストが存在しないため、2 番目のコードは正しく表示されません。
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート