Führen Sie jQuery nach dem Laden der Seite aus
-
Verwenden Sie
ready(), um jQuery nach dem Laden der Seite auszuführen -
Verwenden Sie
on(), um jQuery nach dem Laden der Seite auszuführen
Dieses Tutorial zeigt, wie Sie jQuery nach dem Laden der Seite ausführen.
Das Ausführen des jQuery-Codes nach dem Laden der Seite kann mit zwei Methoden erreicht werden. Zum einen die ready()-Methode und zum anderen die on()-Methode mit einem Load-Event.
Verwenden Sie ready(), um jQuery nach dem Laden der Seite auszuführen
Die ready()-Methode in jQuery führt den jQuery-Code erst nach dem vollständig geladenen DOM aus. ready() ist eine eingebaute jQuery-Methode, die den jQuery-Code aufruft, nachdem das DOM vollständig geladen wurde; Es wartet nicht darauf, dass schwere Dateien wie Bilder und Videos vollständig geladen werden.
Die Methode ready() wird nicht mit dem Ereignis <body onload = ""> verwendet. Die Syntax für diese Methode lautet:
$(document).ready(function)
Die Methode ready() kann nur für das aktuelle Dokument verwendet werden, wobei die Funktion der jQuery-Code ist, den Sie ausführen möchten, nachdem die Seite geladen wurde. Versuchen wir ein Beispiel für diese Methode:
<!DOCTYPE html>
<html>
<head>
<title> jQuery ready() function </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#h1").css({"font-size": "80px", "color": "lightblue", "background": "darkblue", "fontWeight": "bold"});
$("#h2").css({"fontSize": "50px", "fontWeight": "bold", "color": "lightblue"});
$("#para").css({"color": "blue"});
});
});
</script>
</head>
<body>
<h1 id = "h1"> Delftstack.com </h1>
<h2 id = "h2"> Example of $(document).ready() from Delftstack. </h2>
<p id = "para"> </p>
<p> This is an example for ready() method in jQuery </p>
<button> After Page Load </button>
</body>
</html>
Wie wir sehen können, verwenden wir hier das Event click. Dieser Klick funktioniert erst, nachdem das DOM geladen wurde.
Siehe die Ausgabe:
Verwenden Sie on(), um jQuery nach dem Laden der Seite auszuführen
Die Methode on() kann mit dem Event load verwendet werden, um den jQuery-Code nach dem Laden der Seite auszuführen. Die on()-Methode mit load funktioniert, wenn die ganze Seite geladen wird, was schwere Objekte wie Bilder und Videos enthält.
Die on()-Methode ist eine eingebaute jQuery-Methode für verschiedene Operationen. Die Syntax für diese Methode lautet:
$(selector).on(event, childSelector, data, function, map)
Wo:
- Das
Ereignisist ein obligatorischer Parameter; in unserem Fall ist esload. - Der
childSelectorist ein optionaler Parameter zur Angabe der untergeordneten Elemente, an die das Ereignis angehängt wird. - Das
dataist ebenfalls ein optionaler Parameter, der für die zu übergebenden Daten verwendet wird, wenn das Ereignis ausgelöst wird. - Die
Funktionist ebenfalls ein optionaler Parameter, der aufgerufen wird, wenn das Ereignis ausgelöst wird. - Die
Karteist die Ereigniskarte.
Versuchen wir nun ein Beispiel mit der Methode on(), um den jQuery-Code auszuführen, nachdem die Seite geladen wurde:
<!DOCTYPE html>
<html>
<head>
<title>jQuery on(load) method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1 id = "h1"> Delftstack.com </h1>
<h2 id = "h2"> Example of $(document).ready() from Delftstack. </h2>
<p id = "para"> </p>
<p> This is an example for ready() method in jQuery </p>
<button> After Page Load </button>
<script type="text/javascript">
$(window).on('load', DemoFunction());
function DemoFunction() {
$("#h1").css({"font-size": "80px", "color": "lightblue", "background": "darkblue", "fontWeight": "bold"});
$("#h2").css({"fontSize": "50px", "fontWeight": "bold", "color": "lightblue"});
$("#para").css({"color": "blue"});
}
</script>
</body>
</html>
Der obige Code nimmt CSS-Änderungen vor, wenn die Seite vollständig geladen ist. Siehe die Ausgabe:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook