jquery Ready関数を記述する方法はいくつかあります-フロントエンドQ&A-php.cn

jquery Ready関数を記述する方法はいくつかあります

青灯夜游

リリース： 2022-11-25 20:38:08

オリジナル

1794 人が閲覧しました

jquery Ready 関数を記述するには 3 つの方法があります: 1. "$(document).ready(function(){//ready code});" を記述する完全な方法; 2.ドキュメント「$().ready(function(){//ready code});」を省略 3. documentとready()の両方が指定されている場合のメソッド「$(function(){//ready code});」の記述省略。

jquery Ready関数を記述する方法はいくつかあります

このチュートリアルの動作環境: 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 Ready関数を記述する方法はいくつかあります

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 サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

jquery Ready関数を記述する方法はいくつかあります