jQuery in HTML einbinden

Kategorie(n)
Kategorie(n): 
christiane-weigel-blog-jj

Tutorial “jQuery in HTML einbinden”

Leicht verständliches Tutorial über das Einbinden des JavaScript-Framework jQuery auf Webseiten.

Ich stelle euch 2 Arten vor, wie jQuery in die HTML-Website eingebaut wird.

Zu allererst: Welche jQuery-Version wird benötigt?
Normalerweise wird immer die aktuellste Version gewählt. Stand heute ist dies jQuery 3.6.0. ACHTUNG! Ab Version 2.x unterstützt jQuery die alten Versionen von Internet Explorer 6, 7 und 8 nicht mehr! Wenn ihr diese Browser noch über jQuery ansprechen wollt, solltet ihr eine ältere Version z.B. 1.9.1 einbinden.

Von jeder Version stehen immer 2 Varianten zur Verfügung:
Der normale Code und eine komprimierte “minified” Variante (*.min.js). Der Funktionsumfang ist absolut identisch, aber die minimierte Version ist wesentlich kleiner und spart damit Ladezeit. Also wählt nach Möglichkeit die minimierte Version (außer ihr wollt im Code noch rum schreiben, was ich allerdings für reine Anwender nicht unbedingt empfehle ;-))

1. jQuery direkt einbinden

Download der jQuery-Bibliothek und Abspeichern in eurem Projekt.
Die aktuelle Version findet ihr hier: jQuery.com

Und nun das entsprechende HTML-Dokument öffnen (in der Regel die index.html) und den Code im Head der Datei einbinden


<!doctype html>
<script src="pfad-zur-jquery/jqueryxx.js" type="text/javascript"></script>

Der Pfad zur Datei muss entsprechend eurer Verzeichnisstruktur angepasst werden. z.B. /js/jquery/…

2. jQuery aus einer externen Quelle einbinden

Wenn ihr euch das Herunterladen und Abspeichern sparen möchtet, könnt ihr jQuery auch aus einer externen Quelle (z.B. Google) einbinden. Weiterer Vorteil: Man muss nicht jedes Mal eine neue Version herunterladen, wenn ein Update veröffentlicht wird. (Für ältere Versionen einfach die Versionsnummer anpassen)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Und schon kann es los gehen:

Der jeweilige Script-Code wird direkt unter die Einbindung der Bibliothek in dengeschrieben, bzw. eingefügt. Speichern und Anschauen… das war´s.

Fertig sieht das dann ungefähr so aus:


<!doctype html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript">
$(document).ready(function(){     /* Hier folgt jQuery-Code */
alert('Hallo Welt'); });
</script>

Wenn ihr euch weitere zusätzliche Arbeit ersparen möchtet, könntet ihr noch jQuery UI einbinden. Diese Bibliothek bietet viele zusätzliche Funktionen, wie z.B. Drag & Drop, Animationen, Effekte und diverse Widgets. Komplett fertig und schick gecoded. Also: Wie oben beschrieben einbinden und fertig!

Weigel#NOTES Anmeldung

Datenschutzerklärung: *
christiane-weigel-blog-jj