Stil mit {stil}

Sep 2008

Jacascript Framework :: jQuery

Ohne Librarys oder Frameworks – Code-Bibliotheken – ist Javascript so geschwätzig wie alle Programmiersprachen (und vielleicht sogar noch ein wenig langatmiger). Schon einfachste Funktionen erfordern viele Zeilen Code.

• jQuery ist ein Javascript-Framework, das den Zugriff auf das DOM vereinfacht und so die Entwicklungszeit für Javascript-Anwendungen kräftig kürzt.
• jQuery ist einfach zu lernen und standard-konform. Wer HTML und CSS entsprechend der Webstandards einsetzt, erzeugt die gefragten Effekte vom Fading bis zum Accordeon-Effekt mit wenigen Anweisungen.
• Mit der Ereignissteuerung von jQuery entfällt in vielen Skripten das lästige Warten auf das Laden des vollständigen Dokuments mit all seinen Stylesheets, Bildern und sonstigen Elementen. Das DOM steht zur Verfügung, sobald das jeweilige Element geladen ist.
• Dazu bringt jQuery Funktionen, die wir in Javascript immer wieder vermissen: each, extend, grep, merge, map und trim.

<button id="openEx1">+ Aufdecken / -Schließen</button>
<div id="ex1">
   Inhalt des div-Elements
   …
</div>

… 

<script type="text/javascript">
var isShow = false;
   $(document).ready(function(){            // Prüft, ob das Dokument geladen ist
   $("div#openEx1").click(function(event){  // Bei Klick auf div#openEx1
      if (isShow == false) {
         $("div#ex1").show("slow");         // div#ex1 langsam öffnen
         isShow = true; 
      } else {
         $("div#ex1").hide("slow");         // div#ex1 langsam verbergen
         isShow = false; 
      }
   });
});
</script>

jQuery-Selektoren

jQuery agiert auf CSS und dem DOM-Baum und eröffnet sich schnell all denjenigen, die mit den Grundlagen von CSS und DOM bereits vertraut sind. jQuery wird von http://docs.jquery.com/ geladen und per script-Tag in das HTML-Dokument eingebunden.

<script type="text/javascript" src="jquery.js"></script>

Das Herzstück von jQuery ist die jQuery-Funktion jquery() oder abgekürzt $(). Jede $()-Funktion sammelt einen oder mehrere Knoten des DOM-Baums. In der einfachsten Form wird nur ein Ausdruck übergeben – meistens ein CSS-Selektor –, der alle passenden Elemente im Dokument findet.

Während das Zusammenklauben aller h2-Elemente einer Seite noch relativ übersichtlich ist, kostet das Sammeln aller DIV-Elemente mit class="simage" schon viele Zeilen Code und macht das Skript sofort unübersichtlich.

var allDivs = document.getElementsByTagName('div');
for (i=0; i<allDivs.length; i++) {
   if (/simage/.test(allDivs[i].className)) {
      ...
   }
}

$('div.simage')

Konflikte vermeiden

Wenn neben jQuery noch andere Librarys benutzt werden, kann es zu Konflikten kommen, weil auch andere Librarys das $-Zeichen als Variable benutzen. Einfach eine neue Variable für jQuery definieren:

var $j = jQuery.noConflict();

Anstelle von $('div.simage') heißt der jQuery-Aufruf jetzt

$j("div.simage")

CSS-Stile mit jQuery abfragen und ändern

Neben den normalen CSS-Selektoren helfen Kombinationen wie Nachfahren-Selektor (Descendant Selectors), Kind-Selektoren (Child Selectors) und Nachbar-Selektoren (Adjacent Selectors) und verschiedene Filter bei Auswahl der Elemente. Für ein paar schmerzliche Lücken in CSS gibt es Erweiterungen wie :visible, :odd oder :even.

Die Funktion $() gibt ein jQuery-Objekt mit allen Elementen, die zu diesem CSS-Selektor passen, zurück. Ein solches jQuery-Objekt ähnelt einem Array mit zusätzlichen jQuery-Funktionen.

Den gefundenen Elementen lassen sich z.B. CSS-Stile zuweisen, ändern oder entfernen.

$('div#content').width(300);

Setzt die Breite des div-Elements mit id="content" auf 300px

$('h2').css('color', 'blue');

Setzt die Farbe aller h2-Elemente auf Blau

$('div.post').css({max-width: 40em, border: 1px dotted gray});

Setzt die maximale Breite von div-Elementen der Klasse post auf 40em und zieht einen gepunkteten Rahmen um jedes div-Element der Klasse post.

Äquivalent zur Zuweisung von Eigenschaften mit jQuery lassen sich Eigenschaften abfragen.

var width = $('div').width();

Die Breite des ersten div-Elementd auf der Seite

var src = $('img.simage').attr('src');

Das src-Attribut des ersten img-Elements mit class="simage"

HTML-Elemente mit jQuery erzeugen

Um HTML-Elemente zu erzeugen, wird eine Zeichenkette mit den HTML-Markup übergeben.

$('<div id="collect"><p>Hallo ihr da!</p></div>').appendTo('body');

fügt das div-Element als erstes Element an das body-Element an. Da der Inhalt des neu erzeugten Elements durch innerhtml realisiert wird, ist diese Methode zwar flexibel, aber auch einschränkend: An das Innere des div-Elements kommt ein Javascrpt nicht heran.

input-Elemente dürfen auf diese Weise nicht ohne type-Attribut erzeugt werden. Und auch das hier funktioniert nicht in IE

// Does NOT work in IE:
$("<input/>").attr("type", "checkbox");
// Does work in IE:
$("<input type='checkbox'/>");

Navigation durch den DOM-Baum

Für die Navigation durch den DOM-Baum und die Manipulation der Elemente stehen API-Funktionen wie add(), next(), prev() und siblings() zur Verfügung.

Komplexe Projekte – z.B. die Zusammenarbeit mit einem PHP-Backend – werden durch Ajax-Skripte unterstützt.

jQuery Formulare

Aktuellen Wert einer Serie von Radio-Buttons abfragen

<input type="radio" name="foo" value="apfel" /> Apfel
<input type="radio" name="foo" value="birne" /> Birne
<input type="radio" name="foo" value="beere" /> Beere
… 
var theChoice = $('input:radio[name=foo]:checked').val();