jQuery – das Framework um schmerzfrei mit JavaScript zu arbeiten

Wie kann man jQuery für Anfänger vorstellen. jQuery bietet sehr viel – und das browserübergreifend.

jQuery ist zugegeben wesentlich mehr, also nur die schmerzfreie Art mit JavaScript zu arbeiten. jQuery beseitigt die Nachteile von JavaScript, die oft darin lagen, dass man sich wegen der Browserkompatiblität fast tot programmiert hat. Hier bietet jQuery eine einheitliche Vorgehensweise.

Aber noch wichtiger ist, dass viele Möglichkeiten mit wenigen Zeilen jQuery-Code umgesetzt werden können.

Einsatz und Möglichkeiten von jQuery

Hier in Kurzform die Möglichkeiten – später dann ausführlich

  • Einfache Möglichkeiten, Elemente auf der Website (DOM) auszuwählen (um dann später damit Sachen zu machen wie Aussehen ändern, Animationen oder Aktionen).
    Was bisher in JavaScript umständlich und unsicher über „getElementById“ und „getElementsBy…“ gemacht wurde, geht jetzt flott und problemlos über $("#bereich1") und $(".farbe1"). Beim Auswählen der Elemente ist man sehr nahe an der Schreibweise wie bei CSS. Zur genauen Schreibweise später mehr
  • Das DOM manipulieren – sprich die ausgewählten Elemente entsprechend ändern (Farbe, Position etc.)
  • Event-System: Je nachdem, was der Nutzer macht, kann man einfach mit jQuery darauf reagieren. Ein Mausklick und ein Bereich wird eingeblendet (und schon sind wir beim nächsten Punkt)
  • Animation und Effekte sind extrem einfach umsetzbar. Über einen Einzeiler können z.B. erweiterte Texte sanft eingeblendet werden usw.
  • Ajax ist schnell eingebaut und die Brücke zum Server ist da. Sprich wir können je nach Benutzeraktion und Benutzereingabe dann vom Server Daten holen und damit weiterarbeiten wie z.B. bei einem Suchfeld Vorschläge einblenden.
  • Es sind zahlreiche Plug-Ins verfügbar und so ist im Handumdrehen eine Bildergalerie eingebaut. Man muss also nicht immer wieder neu das Rad erfinden.

Es lohnt sich also, sich mit jQuery zu beschäftigen und anzufreunden.

jQuery-Bibliothek in die eigene Website einbinden

Bevor wir jQuery nutzen können, müssen wir die jQuery-Bibliothek in unsere Website einbinden.

Es gibt 2 Arten um jQuery einzubinden. Wir können natürlich alle benötigten Dateien von jQuery herunterladen und auf dem eigenen Webspace bereitstellen ( http://jquery.com/ ) oder einfach einen Link setzen und dann jQuery nutzen.

Lokal einbinden (nach Download der Dateien):

<script src="pfad-zur-jquery/jquery.js"></script>

Oder die aktuellste Version von jquery.com nutzen:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Auch kann jQuery über Google APIs eingebunden werden (was zum Lernen 100% Sinn macht, wenn man permanent Online ist).

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

Hier kann auch die gewünschte Version von jQuery angegeben werden. Normalerweise wird man immer die Aktuellste nutzen.

Wenn man nicht den obigen verwenden möchte (sprich die jQuery Version 1.10.2) kann man den entsprechenden aktuellen Link am schnellsten bekommen über https://developers.google.com/speed/libraries/devguide?hl=de#jquery

(Vor dem Link jeweils noch „http:“ schreiben, dann funktioniert das auch).

Vorteil an dieser Vorgehensweise ist der Geschwindigkeitsaspekt. Wenn man über Google jQuery einbindet und ein Besucher kommt, der bereits eine andere Website besucht hat, die auch über Google jQuery nutzt, so werden bei ihm direkt aus dem Cache die entsprechenden Dateien geladen.

3 Vorteile, wenn jQuery über Google geladen wird:

  • jQuery ist unter Umständen bereits geladen, weil eine andere Website auch über Google jQuery eingebunden hat. Somit ist jQuery bereits im Cache des Besuchers und sofort verfügbar.
  • Es wird schneller von Google geladen. Normalerweise wird es vom Google-Server schneller geladen, da es eine Beschränkung der gleichzeitig zu ladenden Dateien von einem Webserver gibt. Daher ist es gut, wenn diese Datei von einem anderen Webserver kommt.
  • Bandbreite wird nicht verbraucht. Hat man keine unlimitierte Bandbreite, kann das durchaus ein Thema sein.

Nachteil vom Laden von jQuery über Google

Die Nachteile sollen nicht verschwiegen werden.

  • Man muss permanent Online sein.
  • Ist man aus Sicherheitsgründen angehalten, dass keine Daten nach außen gehen (z.B. Firmengeschichten), dann darf es nur vom eigenen Server kommen!

jQuery-Code einbinden

Haben wir nun die jquery.min.js eingebunden, können wir jQuery nutzen. Dazu wird im -Bereich der gewünschte jQuery-Code eingebunden:

<script>
/* Hier der jQuery-Code */
</script>

Das würde zwar funktionieren - ABER, wir wollen erst jQuery nutzen, wenn sichergestellt ist, dass die Website und alle notwendigen Ressourcen komplett geladen sind. Ansonsten könnte passieren, dass wir ein Element auf der Website ändern wollen, das noch gar nicht komplett geladen ist.

Aus diesem Grund ist der Standardaufbau für jQuery folgender:

<script>
$(document).ready(function(){
    /* Hier der jQuery-Code */
});
</script>

Hier sieht man auch schon die Kurzschreibweise mit dem Dollarzeichen. Eigentlich könnte man auch schreiben:

<script>
jQuery(document).ready(function(){

Aber kürzer ist schöner ist schneller. Daher wird man auf freier Wildbahn nur die Kurzschreibweise sehen. Aber an der langen Schreibweise wird die Denkweise bei jQuery klarer.

Der komplette Quellcode in HTML5:

<!DOCTYPE html>
<html lang="de">
<head>
<title>jQuery Beispiel: einbinden und erster Befehl</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
    /* Hier der jQuery-Code */
    alert('Hallo Welt');
});
</script>
</head>
<body>
<h1>jQuery Beispiel: einbinden und erster Befehl</h1>
</body>
</html>

Das ist jetzt noch nicht wirklich mehr als wir mit bisherigem JavaScript auch machen könnten.

Das ist das Standardvorgehen um jQuery einzubinden und Code einzugeben. Allerdings können wir den JavaScript-Teil auch in eine externe Datei auslagern und müssen nicht alles im -Bereich mitführen. Dazu speichern wir folgenden Teil in die Datei „scripts.js“ (am einfachsten in den selben Ordner in dem unsere HTML-Datei liegt).

<script>
$(document).ready(function(){
    /* Hier der jQuery-Code */
    alert('Hallo Welt');
});
</script>

ALLERDINGS dürfen in der externen Datei nicht die Script-TAGs verwendet werden, weil es laut der HTML-Datei ja eh schon eine ist!

Also steht in der externen Datei nur:

$(document).ready(function(){
    /* Hier der jQuery-Code */
    alert('Hallo Welt');
});

Im <head>-Bereich unserer HTML-Datei muss nun nur noch die Verknüpfung erfolgen.

<!DOCTYPE html>
<html lang="de">
<head>
  <title>jQuery Beispiel: einbinden und erster Befehl</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="scripts.js"></script>
</head>
<body>
<h1>jQuery Beispiel: einbinden und erster Befehl</h1>
</body>
</html>

Im folgenden jQuery-Tutorial werde ich allerdings der Übersichtlichkeit halber immer im <head>-Bereich arbeiten.

Im folgenden Kapitel geht es um die Selektion (das Auswählen) von bestimmten Elementen und wie komfortabel dies über jQuery möglich ist.