blog

Newsletter anmelden!

[mailpoet_form id="1"]

jquery-logoLeicht 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.2.1. ACHTUNG! Ab Version 2.x werden die alten Versionen von Internet Explorer 6, 7 und 8 nicht mehr unterstützt! 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 rumschreiben, was ich allerdings für reine Anwender nicht unbedingt empfehle ;-))

1. jQuery direkt einbinden

Download der jQuery-Bibliothek und Abspeichern in eurem Projekt.

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

<script src="pfad-zur-jquery/jqueryxx.min.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 jedesmal eine neue Version herunterladen, wenn ein Update veröffentlicht wird. (Für ältere Versionen einfach die Versionsnummer anpassen)

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

Und schon kann es los gehen:

Der jeweilige Script-Code wird direkt unter die Einbindung der Bibliothek in den <head></head> geschrieben, bzw. eingefügt. Speichern und Anschauen… das war´s.

Fertig sieht das dann ungefähr so aus:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/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!

Folgen und liken!