HTML ページがロードされた後に特定の js_javascript テクニックを実装する 2 つの方法

js メソッド:

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

以下は jQuery メソッドであり、jQuery ファイルを参照する必要があります。

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

またはその省略形

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

$(function(){
var userName="xiaoming";
alert(userName);
});
domのロード時 完了したらすぐに実行可能(window.onloadよりも早い)。 .ready() は同じページに複数回表示できます

追記: 2 つの主な違いは

window.onload:

ドキュメントが完全にダウンロードされたときです。ブラウザの場合にのみ window.onload イベントがトリガーされます。これは、ページ上のすべての要素が js に対して操作可能であることを意味します。つまり、ページ上のすべての要素は、ロードされるまで実行されません。この状況は、ロードの順序を考慮する必要がないため、関数コードを作成する場合に非常に有利です。 ,

$(document).ready{ }: DOM の準備が完了して使用できるようになると、

が呼び出されます。これは、すべての要素がスクリプトにアクセスできることを意味しますが、関連するすべてのファイルがダウンロードされたことを意味するわけではありません。つまり、HMTL がダウンロードされ、DOM ツリーに解析された後にコードが実行されます。

例を示します。

ギャラリーを表すページがあるとします。このページには、jQuery を使用してこれらの画像を非表示にしたり、表示したり、その他の方法で操作したりできます。 onload ページを通じてインターフェイスを設定した場合、ユーザーはこのページを使用できるようになる前に、各イメージがダウンロードされるまで待つ必要があります。さらに悪いことに、デフォルトの動作を持つ要素 (リンクなど) に動作がわずかに追加されると、ユーザーの操作によって予期しない結果が生じる可能性があります。ただし、 $(document).ready(){ } をセットアップしようとすると、インターフェイスはより早く正しい動作で準備が整います。

$(document).ready(){ } を使用することは、通常、onload イベント ハンドラーを試すよりも優れていますが、サポート ファイルがまだ完成していない可能性があるため、画像などのプロパティのようなものを使用することは明らかです。現時点では、高さと幅は必ずしも有効ではありません。

注: ページの下部に js を配置し、defer="defer" を使用すると問題が発生します。上記の機能を使ったほうがいいですよ！