Es gibt mehrere Möglichkeiten, eine JQuery-Ready-Funktion zu schreiben-Front-End-Fragen und Antworten-php.cn

Es gibt mehrere Möglichkeiten, eine JQuery-Ready-Funktion zu schreiben

青灯夜游

Freigeben： 2022-11-25 20:38:08

Original

1790 Leute haben es durchsucht

Die Jquery-Ready-Funktion verfügt über drei Schreibweisen: 1. Die vollständige Schreibweise „$(document).ready(function(){//ready code});“ 2. Die Schreibweise ist „$(document).ready(function(){//ready code});“ $().ready(function( ){//Ready code});“; 3. Die Schreibmethode „$(function(){//Ready code});“, wenn sowohl document als auch ready() weggelassen werden.

Es gibt mehrere Möglichkeiten, eine JQuery-Ready-Funktion zu schreiben

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6.1-Version, Dell G3-Computer.

JQuery-Dokument bereit Funktion

Manchmal müssen wir auf der HTML-Seite warten, bis der gesamte HTML-Inhalt der Seite geladen ist, bevor wir den JS-Code ausführen. Zu diesem Zeitpunkt stellt jQuery eine Funktion namens document bereit Fertig. Dieses Problem lässt sich leicht lösen.

Zum Beispiel:

<script type="text/javascript">
$(document).ready(function () {
//文档就绪后直接运行的JS代码
});
</script>

Nach dem Login kopieren

$: jquery-Logo
onload: Alle Inhalte auf der Seite laden, einschließlich externer Ressourcen (Bilder, Dokumente usw. Dateien)
Laden Sie zunächst alle Inhalte und externen Ressourcen auf der Seite, dann den js-Code laden
ready (Dokument-Ready-Funktion): Laden Sie den Inhalt auf der Seite, ohne externe Ressourcen ()
Laden Sie zuerst den gesamten Tag-Inhalt auf der Seite und dann den js-Code, und schließlich die externen Ressourcen laden

Der folgende Fallcode:

<!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>

Nach dem Login kopieren

Verwenden Sie die ready()-Methode von jQuery, um den Code im HTML-Dokument auszuführen, nachdem es vollständig geladen wurde, wodurch die Suche nach nicht vorhandenen Elementen verhindert wird.

Es gibt mehrere Möglichkeiten, eine JQuery-Ready-Funktion zu schreiben

In jQuery kann $(document).ready(function () {}) wie folgt weggelassen werden:

$().ready(function(){})
$(function(){});

Nach dem Login kopieren

In Bezug auf die Codegröße ist der zweite Typ kleiner und empfehlenswert.

Der Verwendung des oben genannten jQuery-Codes nach zu urteilen, macht jQuery den JS-Code einfacher und erfordert weniger Code, wodurch sich der JS-Code insgesamt einfacher entwickeln und warten lässt.

Zusammenfassung: Es gibt drei Möglichkeiten, die Dokument-Ready-Funktion zu schreiben

Das erste Schreibformat der Document-Ready-Funktion

$(document).ready(function(){
alert("文档就绪函数第一种书写方法");
})

Nach dem Login kopieren

Die zweite Schreibmethode der Document-Ready-Funktion

$().ready(function(){
alert("文档就绪函数第二种书写方法");
})

Nach dem Login kopieren

Die dritte Schreibmethode der Dokumentbereite Funktion

$(function(){
alert("文档就绪函数第三种书写方法");
})

Nach dem Login kopieren

【 Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video】

Das obige ist der detaillierte Inhalt vonEs gibt mehrere Möglichkeiten, eine JQuery-Ready-Funktion zu schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!