CSS, HTML und Javascript mit {stil}

Javascript mit jQuery

jQuery Javascript Swiss Army KnifejQuery

jQuery ist eine Javascript-Library, die das Scripting für Webseiten vereinfacht. jQuery glättet die nervigen Unterschiede zwischen den Browsern und füllt viele Lücken von Javascript.

Ohne Libraries wie jQuery wäre Javascript langatmig mit viel Schreibaufwand und fehlerträchtig durch die Unterschiede zwischen den Browsern. Schon einfachste Funktionen können viele Zeilen Code erfordern, wo jQuery mit einer Zeile auskommt.

Das DOM – Document Object Model – bringt uns zwar für ein strikes Modell für die Manipulation von HTML-Dokumenten, aber das DOM ist aufwändig und das Fischen nach den HTML-Elementen verlangt unzählige Schleifen in unzähligen Wiederholungen.

jQuery Javascript Library

jQuery ist einfach zu lernen und standard-konform. Wer HTML und CSS entsprechend der Webstandards einsetzt, greift mit wenigen Anweisungen auf häufig benutzte Funktionen wie Hide und Show bis zu JSON und zum HTTP-Request zu.

Der Clou von jQuery ist der genial einfache Zugriff auf die Elemente des Dokuments: Die $-Funktion borgt bei den CSS-Selektoren, um Elemente zu filtern.

$( 'img' ).addClass( )
$( '#myid' ).hasClass()
$( '.myclass' ).attr('name')
$( ':odd' ).attr ('name','value')
$( ':not div a' ).remove()
$( ':only-child' ).unwrap()

jQuery Selectors

  • Mit der Event-Steuerung 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.
  • jQuery füllt viele Lücken in Javascript: each, extend, grep, merge, map und trim.
  • Als Sahnehäuptchen gibt es feine Fading-Effekte à la Flash und subtile Animation mit einer Zeile Javascript.
<script>
$('.searchicon').click ( function () {
   $('.searchicons').animate({top: "+=50"},500, function() {
      $('.searchfield').slideDown( "slow");
   });
});
</script>

Am Ende ist jQuery browser-übergreifend und befreit vom starren Blick auf das Verhalten der verschiedenen Browser in den verschiedenen Version.

jQuery einbinden

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

<script src="jquery-2.0.3.min.js"></script>
<script src="myscript.js"></script>

Dabei muss nur sicher gestellt sein, dass jQuery als erste Skript-Datei eingebunden wird.

In Content Management Systemen, die im Backend auf jQuery setzen, kommt es schon mal zu Fehlermeldungen:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (jquery-1.10.2.min.map, line 0)

Die jQuery Source Map setzt die minifizierte Version von jQuery in Beziehung zur nicht-minifizierten Version, um das Debuggen einfacher zu machen. jquery-x-x-x.min.js kommt in einer Zeile, so dass Fehlermeldungen (die in vielen Browsern zur die Zeilennummer, nicht aber die Spalte und das Objekt angeben) kaum hilfreich sind.

jQuery $() / jquery()

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.

Mit jQuery wird der Code kürzer und besser lesbar:

Fade In
$(elem).fadeIn();
addClass
$(elem).addClass(className);
each
$(selector).each(function (i, el){
});
jQuery Events
var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on("click", function(event) {
    hiddenBox.show();
});
Ajax
$ajax ({
    url: '/my/url',
    success: function (resp) {
       …
    },
    error: function () {
       …
    }
 });

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 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.

$('#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 die Eigenschaften der Elemente auslesen.

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 Javascript nicht heran, denn innerHTML erzeugt keine DOM-Elemente.

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();

jQuery oder Vanilla Javascript?

Mit neuen Javascript-Funktionen aus dem HTML5-Paket und CSS3 hat das native Javascript viel Raum gewonnen: querySelector, querySelectorAll, classList und getElementsByClassName machen Javascript ähnlich kurz und effizient wie jQuery. CSS3 ergänzt Javascript mit weichen Animationen durch transition, transform und keyframe-Animationen

You might not need jQuery

Do you really need jQuery?

10 tips for writing JavaScript without jQuery

Content Management Systeme von WordPress bis Drupal bringen jQuery schon mit, die CSS-Frameworks wie Bootstrap und Foundation bauen auf jQuery. Mit Rücksicht auf die kleinen Abweichungen zwischen den Browsern ist jQuery die sichere Option.

Trotzdem lohnt sich ein Blick über den Gartenzaun, denn jQuery ist nicht immer eine effiziente und elegante Lösung. Bei aufwändigen Animationen geht jQuery schnell in die Knie und zappelt und stottert schon mal.