jquery Readyイベントの4つのメソッドとは何ですか-フロントエンドQ&A-php.cn

jquery Readyイベントの4つのメソッドとは何ですか

青灯夜游

リリース： 2022-12-16 17:45:00

オリジナル

3502 人が閲覧しました

jquery ready イベントの 4 つのメソッドは次のとおりです: 1. "$(document).ready(function(){...})" メソッド; 2. "jQuery(document).ready(function()" { ...})" メソッド; 3. "$(function(){...})" メソッド; 4. "jQuery(function(){...})" メソッド。

jquery Readyイベントの4つのメソッドとは何ですか

このチュートリアルの動作環境: 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 Readyイベントの4つのメソッドとは何ですか