Jquery in HTML einbinden : So wirds gemacht!

Ad

Jquery kannst du relativ einfach in deine HTML Webseite einbinden. Dazu hast du zwei Möglichkeiten.

Einbinden von jQuery in HTML: Die gängigsten Methoden

Es gibt zwei Hauptmethoden, um jQuery in deine HTML-Seite einzubinden:

  • Einbinden der jQuery-Bibliothek von einem externen CDN:
  • Dies ist die einfachste und empfohlenste Methode.
  • Lade die jQuery-Bibliothek von einem CDN:
  • Wähle ein beliebtes CDN wie Google Hosted Libraries oder jQuery CDN.

Füge folgenden Code in den Head Bereich deines HTML Codes ein

HTML
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Jquery im Code verwenden

Sobald die Bibliothek geladen ist, kannst du jQuery in deinem JavaScript-Code verwenden.

HTML
<script>
$(document).ready(function() {
  // jQuery-Code hier
});
</script>

Vorteile:

  • Einfach und schnell: Kein Herunterladen oder Installieren erforderlich.
  • Verfügbarkeit: Die Bibliothek wird auf Servern von Google oder anderen Anbietern gehostet, so dass sie immer aktuell ist.
  • Geringere Belastung: Reduziert die Ladezeit deiner Seite, da die Bibliothek von einem externen Server geladen wird.

Nachteile:

  • Abhängigkeit von externen Servern: Funktioniert nicht, wenn keine Internetverbindung besteht.
  • Potenzielle Änderungen: Die Bibliothek auf dem CDN kann sich ohne deine Zustimmung ändern.

Lokale Einbindung der jQuery-Bibliothek:

jQuery-Bibliothek herunterladen

Lade die jQuery-Bibliothek von der offiziellen Website (https://jquery.com/download/) herunter.

Verweise dann auf die lokale Datei in deinem HTML:

HTML
<script src="path/to/jquery-3.6.0.min.js"></script>

Verwende die jQuery-Bibliothek in deinem Code:

Vorteile:

  • Offline-Verfügbarkeit: Funktioniert auch ohne Internetverbindung.
  • Größere Kontrolle: Du hast die volle Kontrolle über die Version der Bibliothek.

Nachteile:

  • Erfordert manuelles Herunterladen und Aktualisieren: Du musst die Bibliothek manuell aktualisieren, wenn neue Versionen verfügbar sind.
  • Erhöht die Ladezeit: Erhöht die Ladezeit deiner Seite, da die Bibliothek von deinem eigenen Server geladen wird.

Wichtig

  • Stelle sicher, dass die jQuery-Bibliothek vor deinen eigenen JavaScript-Dateien geladen wird.
  • Du kannst verschiedene Versionen von jQuery herunterladen. Wähle die Version, die deinen Anforderungen entspricht.
  • Es gibt verschiedene Möglichkeiten, jQuery in deine Projekte einzubinden (z. B. mit Paketmanagern).

Fazit

Die oben genannten Methoden sind die gängigsten und empfehlenswertesten. Es gibt jedoch noch weitere Möglichkeiten, jQuery in HTML einzubinden, die aber speziellere Anwendungsfälle betreffen oder veraltet sind.


Über Mich


Weitere Beiträge auf Blogseite.com




Kennst du schon diese Memes?