ホームページ > 記事 > ウェブフロントエンド > jquery Readyイベントの4つのメソッドとは何ですか
jquery Readyイベントの4つのメソッドとは何ですか
- 青灯夜游オリジナル
- 2022-12-16 17:45:003498ブラウズ
jquery ready イベントの 4 つのメソッドは次のとおりです: 1. "$(document).ready(function(){...})" メソッド; 2. "jQuery(document).ready(function()" { ...})" メソッド; 3. "$(function(){...})" メソッド; 4. "jQuery(function(){...})" メソッド。
このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。
jquery Ready イベント
Ready は、DOM (ドキュメント オブジェクト モデル ドキュメント オブジェクト モデル) がロードされ、ページが完全にロードされたときに発生します (ドキュメント オブジェクト モデルを含む)。画像）イベント。
このイベントはドキュメントの準備ができた後に発生するため、他のすべての jQuery イベントと関数をこのイベントに配置することをお勧めします。
jQuery では、ready イベントを記述する方法は次の 4 つがあります。
文法:
//写法1：
$(document).ready(function(){
……
})
//写法2：
jQuery(document).ready(function(){
……
})
//写法3：
$(function(){
……
})
//写法4：
jQuery(function(){
……
})[コード分析]
-
書き方 1 の
$(document)は、まずドキュメントを選択してから、ready() メソッドを呼び出します。次の図に示すように、ready() メソッドのパラメータは匿名関数です。
方法 2 の記述では、
$はjQueryを指します。したがって、jQuery の代わりに$を使用できます。この 2 つは同等です。つまり、$()はjQuery()と同等です。書き方 3 は、実際には最も一般的に使用され、最も単純な方法であり、誰もがこれまでに何度も経験したことがあります。実際の開発では、便利で簡潔な形式
$(function(){})を使用することもお勧めします。4 の記述は 3 の記述の完全な形式です。実際の開発では、これを使用することはお勧めしません。
$(document).ready() は jQuery で最も重要なメソッドであり、ページの読み込み速度を大幅に向上させることができます。
例:
ready() を使用して、ドキュメントのロード後に関数を使用できるようにします:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>这是一个段落 。</p>
<button>切换段落的上滑与下滑。</button>
</body>
</html>
[推奨される学習: jQuery ビデオ チュートリアル 、Web フロントエンド ビデオ ]
以上がjquery Readyイベントの4つのメソッドとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。