Schritt für Schritt lernen
die eigene Website zu erstellen

Jetzt das HTML-Seminar als
Video-Tutorial mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

Videokurs HTML + CSS + Webdesign erstellen

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"). Bei dem 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 type="text/javascript" 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 die 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 soll 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 <head>-Bereich der gewünschte jQuery-Code eingebunden:

<script type="text/javascript">
/* 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 type="text/javascript">
$(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 type="text/javascript">
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://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(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 bisherigen 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 <head>-Bereich mitführen. Dazu speichern wir folgenden Teil in die Datei „scripts.js“ (am einfachsten im selben Ordner wie unsere HTML-Datei liegt)

<script type="text/javascript">
$(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://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="scripts.js" type="text/javascript"></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.

Facebook und Google+

Sehr geehrte Nutzer/innen dieser Website! Wir würden uns freuen, wenn Sie uns durch Facebook oder Google+ unterstützen würden - sei es durch ein Like/+1 oder das Teilen dieser Seite. Allerdings legen wir Wert auf Datenschutz und möchten nicht, dass diese Netzwerke Daten von Ihnen erhalten, sollten Sie dies nicht wünschen. Deshalb sind die entsprechenden Buttons bei uns standardmäßig deaktiviert.

Durch einen Klick auf einen der unteren Buttons stimmen Sie der Nutzung/Speicherung Ihrer Daten (in uns unbekanntem Ausmaß, uns unbekannten Orten und uns unbekannter Weise) zu und erhalten Zugriff auf die Buttons. Wir bitten um Ihr Verständis und freuen uns über Ihre Unterstützung :)

X

Wenn Sie einen Fehler finden, bitte mitteilen
(egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:

Fehler:

Verbesserung:

Name/E-Mail (damit ich auch Danke sagen kann)

eBook HTML-Seminar.de Videokurs HTML + CSS + Webdesign erstellen

Video-Tutorial: über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

© 2000-2015 Axel Pratzner • www.html-seminar.de • Stand 18.8.2015
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de