Mini-Tutorial JQuery

Autorin: Dr. Silvia Rothen, rothen ecotronics, Bern, Schweiz
Letzte Überarbeitung: 13.05.18

JQuery ist ein JavaScript-Framework, das die Erstellung von unobtrusive JavaScript erheblich vereinfacht hat. Die vorliegende Seite stellt wie ein Cheat Sheet die wichtigsten Elemente der Sprache zusammen.

Einleitung

Ohne JavaScript geht im Web fast nichts mehr. Gleichzeitig haben sich die Sicherheitsprobleme dadurch massiv verschärft, dass JavaScript jedes Element eines Dokumentes manipulieren kann. Die radikale Lösung, aber selten verwendete Lösung, wäre es, JavaScript im Browser ganz abzustellen. Zudem wird das Netz immer öfter mit Handys und Smartphones benutzt, die JavaScript nicht oder nur teilweise unterstützen.

Das neue Schlagwort, das Abhilfe für diese Situationen verspricht, ist "unobtrusive JavaScript". Darunter versteht man die schwierige Aufgabe, Webseiten zu erstellen, die zwar all die tollen neuen Möglichkeiten von JavaScript nutzen, deren Grundfunktionalität aber auch ohne JavaScript nutzbar ist. Horizontale, ausklappbare Menüs? Vergessen Sie es! Bäume mit Dutzenden oder gar Hunderten von Ästen? Passé! Modale Dialogfenster? Geschichte! AJAX? Unmöglich!

Zum Glück gibt es Frameworks wie JQuery, welche den Umgang mit JavaScript generell stark vereinfachen und Grundlagen für unobtrusive JavaScript zur Verfügung stellen. Doch all die neuen Möglichkeiten haben Web Design nicht einfacher, sondern schwieriger gemacht: Die Kundschaft will Websites, die benutzerfreundlich sind, durch schnelle Ladezeiten hervorstechen und modern aussehen. Gleichzeitig soll jede Seite in Google möglichst zuoberst in der Liste erscheinen, und der Site muss auch ohne JavaScript und auf dem Handy bedienbar sein. Manchmal möchte der Kunde den Web Site auch noch selbst warten (möglichst ohne die geringste technische Schulung). Diese Gratwanderung erfordert nach wie vor viel Denkarbeit und ein immenses technisches Wissen. Kein Framework nimmt uns diese Aufgaben ab.

Zurück zum Inhaltsverzeichnis

JQuery einbinden

Bevor man mit JQuery starten kann, muss man es vom JQuery-Website herunterladen und in die gewünschten Seiten einbinden.

Herunterladen kann man es unter http://docs.jquery.com/Downloading_jQuery.

Eingebunden wird es wie jede externe JavaScript-Datei folgendermassen:

Bei dieser Variante muss man die letzte heruntergeladene Version, die normalerweise mit einem Dateinamen wie jquery-1.4.2.min.js daherkommt, noch in jquery.js umbenennen. Das bietet den Vorteil, dass man seine Seiten nie anpassen muss, wenn man von einer Version zur nächsten wechselt. Es hat allerdings auch den Nachteil, dass man die Version nicht mehr auf den ersten Blick sieht und dass man nicht auf verschiedenen Seiten verschiedene Versionen von JQuery einbinden kann, was manchmal bei einem Update auf die neueste Version notwendig ist, wenn verwendete PlugIns noch nicht mit der neuesten Version kompatibel sind.

Zurück zum Inhaltsverzeichnis

Selektoren

Die wichtigste Grundlage für unobtrusive JavaScript ist, dass man den JavaScript-Code nicht mehr direkt an die einzelnen HTML-Tags anhängt und so über die ganze Seite verstreut, sondern stattdessen im Header der Seite einen JavaScript-Block mit Eventhandlern für alle möglichen Events schreibt. Dazu muss man aber gezielt auf die Elemente der Seite zugreifen können. Mit dem DOM geht das zwar auch, ist aber ziemlich umständlich. JQuery stellt dafür sogenannte Selektoren zur Verfügung. Die folgende Tabelle listet die wichtigsten Selektoren auf:

$("*")	alle HTML-Tags
$("p")	alle HTML-Tags eines bestimmten HTML-Typs, z.B. <p>
$("[border]")	alle HTML-Tags, bei denen ein Attribut border haben
$("[type=text]")	alle HTML-Tags, bei denen das Attribut "type" den Wert "text" hat
$("[border!=0]")	alle HTML-Tags, bei denen das Attribut "border" nicht den Wert "0" hat
$("input[type=text]")	alle HTML-Tags eines bestimmten Typs, die ein Attribut mit einem bestimmten Wert haben
$(".main")	alle HTML-Tags der Klasse "main"
$(".article.check")	alle HTML-Tags, welche die beiden Klassen "article" und "check" haben
$("span.code")	alle SPAN-Tags der Klasse "code"
$("#artikel1")	das HTML-Tag mit der ID artikel1 (ID muss einmalig sein)
$("a[href*=/bilder/]")	alle Links, bei welchen "/bilder/" im Wert des Attributes href enthalten ist = steht für enthält*, statt = für gleich
parent.$("#ds_mask")	das HTML-Tag mit der ID ds_mask im Eltern-Frame
$("form")[0].reset();	das erste Formular auf der Seite zurücksetzen
$("li").not(":has(ul)")	Alle li-Tags, die kein Unterelement ul haben

Kombinationen:

$("div span")	Alle SPAN-Tags, die innerhalb eines DIV-Tags stehen (Vorfahre, muss nicht direkt sein)
$("div > span")	Alle SPAN-Tags, die direkt innerhalb eines DIV-Tags stehen (Eltern-Element)
$("#artikel1294").parents("p")	Alle P-Tags, die Eltern-Element vom Tag mit der ID artikel1294 sind
$("div, span").find("[id]")	Alle DIV- und SPAN-Tags, die ein Attribut "id" haben
$(this).parent()	Das direkte Eltern-Element des aufrufenden Tags
$(this).children("p:last")	Das letzte P-Tag, das unterhalb des aufrufenden Tags hängt

Die folgende Zeile findet z.B. das erste Element mit der Klasse art, das am gleichen Eltern-Tag hängt, wie das aufrufende Element, und setzt dessen Wert auf 0:

$(this).parent().children(".art:first").attr('value', 0);

Zurück zum Inhaltsverzeichnis

Eventhandler

Mit den Selektoren allein kann man noch nichts anfangen. Als zweites muss man angeben, auf welche Ereignisse man mit diesen Selektoren reagieren möchte.

Seite geladen?

Da JavaScript auf alle Elemente einer Seite zugreifen kann, muss man als erstes sicherstellen, dass die Seite vollständig geladen ist, bevor eine JavaScript-Routine aufgerufen wird. Deshalb ist es üblich, alle Eventhandler mit einem Eventhandler zu ummanteln, der dies abfragt.

$(document).ready(function() {
//weitere Eventhandler
...
});

Ist die Seite bereits vollständig geladen?

Normale Eventhandler

Die Events, auf welche die Eventhandler reagieren, sind natürlich dieselben wie in JavaScript generell.

$("a").click(function() {...});	reagiert, wenn irgendein Link angeklickt wird
$("#home").hover(function() { ...}, function(){...});	reagiert auf das Hovern: erste Funktion beim Darüberfahren, zweite Funktion beim Verlassen des Tags
$("#ddAktionen").bind("change", function() {...});	Eventhandler für das Event onChange eines Kombinationsfeldes

AJAX-Eventhandler

Normale Eventhandler reagieren nur für HTML-Tags, die bereits von Anfang an geladen sind. Mit AJAX werden aber nachträglich Elemente zu einer Seite hinzugefügt oder von der Seite entfernt. In diesem Fall verwendet man für den Eventhandler die Methode live.

$("input[type=text]").live('blur', function() {...});

Eventhandler, der reagiert, wenn ein dynamisch geladenes Input-Feld verlassen wird.

Zurück zum Inhaltsverzeichnis

Elemente abfragen und manipulieren

Elemente hinzufügen und löschen

$("body").append("<div>Bitte klicken</div>");	ein neues Element innen als letztes Element anfügen
$("body").prepend("<div>Bitte klicken</div>");	ein neues Element innen als erstes Element anfügen
$("#wk").after("<span>x</span>");	ein neues Element hinter einem Element anfügen
$("#wk").before("<span>x</span>");	ein neues Element vor einem Element anfügen
$("#wk").wrap("<div></div>");	ein Element mit einem neuen Element umschliessen (mindestens ein übergebenes Tag darf kein Unterlemente aufweisen)
$("#info").empty();	alle Unterelemente sowie Textnodes von #info löschen
$("#info").remove();	das Element #info löschen
$("hr").replaceWith("<hr class="red"/>);	alle hr-Elemente durch das angegeben HTML ersetzen

Attribute und Werte

var wert = $(this).attr('value');	Den Wert eines Tags auslesen
$(this).attr('value', wert);	Dem Attribut "value" einen neuen Wert zuweisen
$(".chkArticles").size() $(".chkArticles").length	Die Anzahl Elemente mit der Klasse chkArticles zurückgeben

CSS

if ($('.ad-image-description').css("display") == 'none' ) {..}.	CSS-Eigenschaft "display" abfragen
$('.ad-image-description').css("display", "block") ;	CSS-Eigenschaft "display" ändern
$("#artikel1").addClass("vergriffen");	Zum Tag mit der ID "#artikel1" die CSS-Klasse "vergriffen" hinzufügen
$("#artikel1").removeClass("vergriffen");	Vom Tag mit der ID "#artikel1" die CSS-Klasse "vergriffen" entfernen
$("input").toggleClass("mitfocus");	zwischen ursprünglicher Klasse und der neuen Klasse "mitfocus" hin- und herwechseln

Zurück zum Inhaltsverzeichnis

AJAX mit JQuery

Verschiedene Funktionen für AJAX

Ablauf:

Gewisse Einstellungen vornehmen
Evtl. Daten aufbereiten, die im Request an Server geschickt werden sollen
Request an Server senden
Callback-Funktion error oder success ausführen, Daten oder Resultat vom Server entgegennehmen und evtl. an Elemente der Seite hängen
Callback-Funktion complete ausführen

Die Callback-Funktionen entsprechen ungefähr dem try-catch-finally in Java: try ist success, catch entspricht error und finally entspricht complete.

Zurück zum Inhaltsverzeichnis