JQuery in HTML einfügen

1. Verwenden Sie das JQuery-CDN, um JQuery in HTML einzuschließen
2. JQuery herunterladen und in HTML einbinden

Dieser Artikel führt Sie durch das Hinzufügen oder Schreiben von jQuery-Code auf einer HTML-Seite.

Verwenden Sie das JQuery-CDN, um JQuery in HTML einzuschließen

JQeury ist eine der beliebtesten JavaScript-Bibliotheken.

Die Bibliothek vereinfacht eine Menge Arbeit auf einer Website mit Funktionen wie DOM-Traversal und -Manipulation, CSS-Manipulation, Ereignisbehandlung, Animationen und AJAX-Aufrufen. Mit jQuery können wir weniger schreiben und mehr tun, was der Hauptvorteil ist.

Wir können Operationen mit weniger Code ausführen, indem wir jQuery anstelle des regulären JavaScript verwenden. Jetzt werden wir uns damit befassen, wie wir jQuery auf einer HTML-Seite verwenden können.

Die gebräuchlichste Art, jQuery in ein HTML-Dokument einzubinden, ist die Verwendung des Content Delivery Network (CDN). Ein CDN ist ein Netzwerk von Servern, das die angeforderten Inhalte für die Endbenutzer bereitstellt, indem die Inhalte an dem Netzwerkstandort, der näher beim Benutzer liegt, zwischengespeichert werden.

Auf diese Weise werden dem Benutzer die angeforderten Daten schnell und genau bereitgestellt. Wir können das jQuery CDN aus verschiedenen Quellen wie Google CDN und Microsoft CDN beziehen.

Wir können die jQuery-CDN-URL in das script-Tag einfügen und jQuery in HTML verwenden. Wir können die jQuery entweder in eine separate .js-Datei schreiben und in die HTML-Datei einfügen oder die jQuery in das script-Tag schreiben.

Gehen Sie zunächst auf die Website JQuery CDN und wählen Sie die neueste stabile Version von jQuery aus. Zur Demonstration verwenden wir die unkomprimierte Version.

Dann gibt die Website das unten gezeigte Tag aus.

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

Kopieren Sie als Nächstes das Tag und platzieren Sie es in der HTML-Datei. Erstellen Sie dann ein p-Tag mit der ID text und schreiben Sie nichts zwischen die Tags.

Erstellen Sie unterhalb des p-Tags einen Button mit der ID button und schreiben Sie den Text Click here in das value-Attribut. Der HTML-Teil ist vorbei, und jetzt schreiben wir die jQuery.

Schreiben Sie in ein script-Tag die jQuery-Methode ready(). Wählen Sie die button-ID und rufen Sie die click()-Methode innerhalb der Methode auf.

Wählen Sie erneut in der click()-Methode die text-ID aus und rufen Sie die html()-Methode auf. Schreiben Sie als Parameter html() den Text clicked.

In diesem Abschnitt lernen wir diese verschiedenen jQuery-Methoden kennen. Die Methode ready() enthält alle anderen Methoden.

Der andere Inhalt innerhalb der Methode wird ausgeführt, wenn das DOM vollständig geladen ist. Ebenso wird die click()-Methode ausgeführt, wenn auf das ausgewählte Element geklickt wird. Die Methode html() setzt den Inhalt auf das ausgewählte Element.

Im folgenden Beispiel erscheint beim Klicken auf die Schaltfläche ein Text mit der Aufschrift clicked. Auf diese Weise können wir jQuery in einem HTML-Dokument verwenden, das das CDN verwendet.

Beispielcode:

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<p id="text"> </p>
<input type='button' id='button' value='Click here' />

<script>
$(document).ready(function(){
 $('#button').click(function(){
 $('#text').html("clicked");
 });
});
</script>

JQuery herunterladen und in HTML einbinden

Die andere Möglichkeit, jQuery in HTML zu schreiben, besteht darin, die jQuery-Datei herunterzuladen und in die HTML-Datei einzufügen.

Wir können die Datei über den Link hier herunterladen. Wir werden jQuery-Code in HTML schreiben, nachdem wir die heruntergeladene .js-Datei in das script-Tag eingefügt haben.

Laden Sie beispielsweise die jQuery-Datei über den oben angegebenen Link herunter. Als nächstes schreiben Sie in der HTML-Datei den Dateipfad der jQuery-Datei in das src-Attribut des script-Tags.

Dies ist die einzige Änderung, die wir gegenüber dem Beispiel in der obigen Methode vornehmen müssen. Wir werden denselben HTML- und jQuery-Code für die Demonstration verwenden.

Wenn wir auf die Schaltfläche klicken, wird wie im obigen Beispiel der Text angeklickt angezeigt. Auf diese Weise können wir die jQuery-Datei herunterladen und in HTML einbinden.

Beispielcode:

<script src="jquery-3.6.0.min.js"></script>
<p id="text"> </p>
<input type='button' id='button' value='Click here' />

<script>
$(document).ready(function(){
 $('#button').click(function(){
 $('#text').html("clicked");
 });
});
</script>