jQuery-Beispiele

Es gibt zwar viele Javascript-Frameworks, aber sowohl privat als auch im Büro bevorzuge ich jQuery. Mit knapp 31 KB (gepackt) ist es schön klein, nicht überladen und inzwischen auch recht flott. Der größte Vorteil ist aber, dass der Zugriff auf die DOM-Objekte über die CSS-Syntax erfolgt – und auch mit den Selektoren, die z.B. der Internet Explorer nicht unterstützt.

Anhand von ein paar Code-Zeilen, die ich hier im Blog verwende, wird klar wie simpel, aber auch mächtig jQuery ist.

Grundsätzlich befinden sich alle Funktionen in der jQuery-Methode ready(), die auf das gesamte DOM angewandt wird. Dabei werden die Elemente schon manipuilert, sobald der DOM-Baum fertig geladen ist und nicht erst, wie beim Event onload(), wenn alles geladen wurde.

$(document).ready(function() {
    Code …
});

jQuery bietet ein eigenes Event-Handling an, das es über die CSS-Syntax ermöglicht Events an DOM-Elemente zu hängen. Als Beispiel fungiert hier das Abschicken eines Textfeldes beim Druck auf Enter.

$('form input[type="text"]').keyup(function(event) {
  if(event.keyCode == 13) {
     $(this).parents('form').submit();
 }
});

Damit wird an jedes Textfeld das Event keyup() gebunden und beim Druck auf Enter das übergeordnete Formular abgeschickt.

Als zweites Beispiel dient die automatische Erkennung, ob ein Link innerhalb eines Blog-Eintrags auf eine externe Seite verweist und falls ja, automatisch das Attribut target auf „_blank“ gesetzt wird, sowie dem a-Elemet ein Bild für eine entsprechende Kennzeichnung als externer Link anhängt wird.

$('#content .post a').each(function() {
   if($(this).attr('href').indexOf($('base').attr('href')) == -1 
         && $(this).attr('href') != '#' && $(this).children('img').length == 0 
        && $(this).attr('href').indexOf('javascript:') == -1) {
      
      $(this).attr('title', 'Externer Link').attr('target', '_blank');
      $(this).after(' ');
  }
});

„$(this)“ steht für aktuelle Element des each-Durchlaufs. Es handelt sich dabei aber um ein jQuery-Objekt, das z.B. nicht alle DOM-Methoden erlaubt. In einer each-Schleife ist aber auch der Zugriff auf das DOM-Element über „this“ möglich.

Die If-Bedingung prüft, ob die verlinkte URL zur eigenen Seite gehört, ob sie einen Anker-Aufruf enthält oder Javascript-Code ausführt. Trifft nichts von dem zu, werden die Attribute „title“ und „target“ gesetzt. Solche Verkettungen sind möglich, weil jede manipulierende jQuery-Methode eine Referenz auf das bearbeitete Objekt zurückgibt. Danach wird dem a-Element ein weiteres a anhängt, das die Bild-Kennzeichnung für einen externen Link enthält.

Zu guter letzt noch ein Einzeiler, der ein Problem mit dem Syntax Highlighter löst. Aus Kompatibilitätsgründen zu älteren Einträgen bin ich leider gezwungen, jeden Text durch die PHP-Funktion nl2br() zu schicken, um Zeilenumbrüche in br-Elemente ersetzen zu lassen. Bei Code-Ausschnitten in pre-Elementen ergibt sich dabei ein Problem, weil entweder das br-Element als Text am jeder Zeile anzeigt wird oder sogar umgebrochen wird und somit zig überflüssige Leerzeilen vorhanden sind.

$('pre[name="code"] br').remove();

Damit werden alle br-Elemente entfernt und die Code-Ansicht ist sauber. Sicherlich hätte man das ganze auch gleich serverseitig lösen können, aber wozu sich mit regulären Ausdrücken rumquälen, wenn eine Zeile Javascript ausreicht?

Ich hoffe, dass meine Beispiele halbwegs verständlich sind und der ein oder andere, sich entschließt jQuery eine Chance zu geben – es lohnt sich!