ホームページ > 記事 > ウェブフロントエンド > jquery Ready関数を記述する方法はいくつかあります
jquery Ready関数を記述する方法はいくつかあります
- 青灯夜游オリジナル
- 2022-11-25 20:38:081776ブラウズ
jquery Ready 関数を記述するには 3 つの方法があります: 1. "$(document).ready(function(){//ready code});" を記述する完全な方法; 2.ドキュメント「$().ready(function(){//ready code});」を省略 3. documentとready()の両方が指定されている場合のメソッド「$(function(){//ready code});」の記述省略。
このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。
jquery document Ready function
HTML ページでは、ページのすべての HTML コンテンツがロードされるまで待機する必要がある場合があります。 JS コードを実行する前に、この問題を簡単に解決できる Document Ready という関数が jQuery に提供されています。
例:
<script type="text/javascript">
$(document).ready(function () {
//文档就绪后直接运行的JS代码
});
</script>$: jquery flag
-
onload: 外部コンテンツを含むページ内のすべてのコンテンツをロードします。リソース (画像、ドキュメントなどのファイル)
最初にページ内のすべてのコンテンツと外部リソースをロードし、次に JS コードをロードします。
-
ready (ドキュメントの準備ができました) function): ページのロード コンテンツには外部リソースが含まれていません ()
最初にページ内のすべてのタグ コンテンツをロードし、次に JS コードをロードし、最後に外部リソースをロードします
次のケース コード:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() { //文档就绪后直接运行的代码
function f1() {
var div1 = document.getElementById("div1");
div1.innerText = "Hello";
}
f1();
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>jQuery のready() メソッドを使用して、HTML ドキュメントが完全にロードされた後でコードを実行します。これにより、HTML ドキュメント以外の検索が防止されます。存在する要素。
jQuery では、$(document).ready(function () {}) は次のように省略できます。
$().ready(function(){})
$(function(){});Fromコード サイズの点では、2 番目のタイプの方が小さいため、推奨する価値があります。
上記の jQuery コードの使用状況から判断すると、jQuery により JS コードが簡素化され、コードの量が減り、JS コード全体の開発と保守が容易になります。
#まとめ: ドキュメントレディ機能には 3 つの方法があります
ドキュメントレディ機能の最初の記述形式$(document).ready(function(){
alert("文档就绪函数第一种书写方法");
})Document Ready 関数 2 番目の書き方 $().ready(function(){
alert("文档就绪函数第二种书写方法");
})ドキュメント Ready 関数の 3 番目の書き方 $(function(){
alert("文档就绪函数第三种书写方法");
})[推奨学習: jQuery ビデオ チュートリアル 、Web フロントエンド ビデオ ]
以上がjquery Ready関数を記述する方法はいくつかありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。