Heim > Artikel > Web-Frontend > Es gibt mehrere Möglichkeiten, eine JQuery-Ready-Funktion zu schreiben
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.
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.
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!