Mehr Effizienz bei weniger Aufwand

Teil 2: Workshop Javascript-Bibliothek: Einstieg in jQuery

Außerdem können Sie $(document).ready(function() {}); auch mehrmals in einem Dokument anwenden, der Code wird dann in der angegebenen Reihenfolge ausgeführt.

Weil diese Funktion so häufig benötigt wird, gibt es eine verkürzte Version:

$(function() {
/* hier steht der Code zum
Ausführen */
});

Anstelle des $-Zeichens können Sie übrigens auch jQuery benutzen.

Macht der Selektoren

Üblicherweise wollen Sie bei der Programmierung mit Javascript einzelne Elemente verändern oder auf Ereignisse reagieren, die bei einzelnen Elementen stattfinden.

Dafür müssen Sie immer zuerst eines tun: Nämlich die entsprechenden Elemente auswählen. Elemente lassen sich bei jQuery sehr intuitiv auswählen, weil Sie CSS-Selektoren verwenden können.

$(function() {
$('.unsichtbar').hide();
});

hide() ist der Befehl zum Verbergen von Elementen. Welche verborgen werden sollen, gibt der Ausdruck davor an. Der Selektor wird dabei genau wie in CSS notiert, bei Klassen mit einem Punkt $('.unsichtbar').

Javascript-Bibliotheken

© Archiv

Anlaufstelle zur Realisierung von Komponenten der Benutzeroberfläche: jQuery UI.

Mit dieser Zeile verstecken Sie alle Elemente mit class="unsichtbar". Das kann natürlich erst funktionieren, wenn das HTML-Dokument geladen ist, deswegen steht diese Zeile innerhalb von $(function() { und });.

Genauso können Sie andere CSS-Selektoren benutzen: Der Ausdruck $('p') wählt beispielsweise alle p-Elemente aus oder $('#navi') das Element mit id="navi".

Selbstverständlich können Sie auch Kindselektoren $('p > a'), Nachkommenselektoren $('#navi a') benutzen, oder Gruppen von Selektoren durch Komma aneinanderreihen $('.betont, #navi').

Ohne Probleme lassen sich auch Attributselektoren einsetzen. Normalerweise unterstützt diese der Internet Explorer erst ab Version 7, aber beim Einsatz in jQuery funktionieren sie auch im Internet Explorer Version 6.

Ein praktisches Beispiel hierzu: Angenommen, Sie wollen alle Links auf PDF-Dokumente durch ein besonderes Icon kennzeichnen. Diesen Links können Sie über den jQuery-Befehl addClass() eine neue Klasse hinzufügen. In Klammern schreiben Sie den Namen der Klasse, die ergänzt werden soll.

$(function() {
$('a[href$=pdf]').addClass('pdf');
});

Der Ausdruck $('a[href$=pdf]') wählt alle Links aus, bei denen der Wert des href- Attributs auf pdf endet, und diese erhalten die Klasse pdf. Die Formatierungen definieren Sie dann in CSS - so können Sie sie mit einem Hintergrundbild versehen.

.pdf {
background: transparent url
(pdficon_small.gif) no-repeat;
padding-left: 20px;
}

Zebratabellen

Wenn Sie eine Zebratabelle - das heißt, eine Tabelle, bei der jede zweite Zeile anders eingefärbt ist - manuell in Javascript programmieren, so ist das mit einem relativ großen Aufwand verbunden: David F. Miller stellt hierfür bei A List Apart unter ein Skript mit 70 Zeilen vor. Mit jQuery geht es einfacher.

Javascript-Bibliotheken

© Archiv

Eine Zebratabelle ist mit jQuery im Handumdrehen erstellt.

Neben den klassischen CSS-Selektoren können Sie nämlich auch fortgeschrittene verwenden, die sonst kaum von Browsern unterstützt werden. Erst einmal sollten Sie Ihre Tabelle über eine Klasse oder eine ID kennzeichnen:

<table class="datentabelle"><tr><td>...</td><td>...</tr><!-- weitere Zeilen ausgelassen --></table>

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…