suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >Es gibt mehrere Möglichkeiten, eine JQuery-Ready-Funktion zu schreiben

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

青灯夜游
青灯夜游Original
2022-11-25 20:38:081858Durchsuche

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>

  • $: 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>

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(){});

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("文档就绪函数第一种书写方法");
})

Die zweite Schreibmethode der Document-Ready-Funktion

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

Die dritte Schreibmethode der Dokumentbereite Funktion

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

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was ist der CSS-Selektor „+“?Nächster Artikel：Was ist der CSS-Selektor „+“?

In Verbindung stehende Artikel

Mehr sehen