JSメソッド:
コードコピーは次のとおりです。
<script type = "text/javascript">
window.onload = function(){
var username = "xiaoming";
アラート(ユーザー名);
}
</script>
以下はjQueryメソッドであり、jQueryファイルを参照する必要があります。
コードコピーは次のとおりです。
<script type = "text/javascript">
$(document).ready(function(){
var username = "xiaoming";
アラート(ユーザー名);
});
</script>
またはその略語
コードコピーは次のとおりです。
$(function(){
var username = "xiaoming";
アラート(ユーザー名);
});
DOMがロードされると、実行できます(Window.Onloadよりも早く)。同じページに複数回表示される可能性があります。
PS:2つの主な違い
window.onload:
window.onloadイベントは、ドキュメントが完全にブラウザにダウンロードされた場合にのみトリガーされます。これは、ページ上のすべての要素がJSに対して操作可能であることを意味します。つまり、ページ上のすべての要素がロードされた後にのみ実行されます。この状況は、ロードの順序が考慮されていないため、機能コードを作成するのに非常に有益です。 、
$(document).ready {}:
DOMが完全に準備ができて利用可能な場合、呼び出されます。これは、すべての要素がスクリプトにアクセスできることも意味しますが、関連するすべてのファイルがダウンロードされたという意味ではありません。つまり、HMTLのダウンロードが完了し、DOMツリーに解析された後、コードは実行されます。
例を挙げると:
ギャラリーを表すページがあるとします。これには、jQueryを介して非表示、表示、または操作できる多くの大きな画像が含まれている可能性があります。オンロードページを介してインターフェイスを設定した場合、ユーザーはこのページを使用する前に各画像がダウンロードされるまで待機する必要があります。さらに悪いことに、動作がデフォルトの動作(リンクなど)を持つ要素にわずかに追加されている場合、ユーザーの相互作用は予期しない結果につながる可能性があります。ただし、$(document).ready(){}で設定しようとすると、このインターフェイスは以前に利用可能な正しい動作を準備します。
$(document).ready(){}を使用すると、通常、オンロードイベントハンドラーを試すよりも優れていますが、サポートファイルがまだ完了していないため、画像の高さや幅などのプロパティが現時点では有効でない可能性があることは明らかです。
注:JSをページの下部に配置する方法と、Defer = "Defer"を使用する方法を使用することに問題があります。上記の機能を使用するのが最善です!