jQuery

Überblick, Basiskonzepte, Beispiele, Plugins

Allgemein

populärste JavaScript-Bibliothek
open source (MIT- oder GPL-Lizenz)
sehr gute, umfassende Dokumentation
vereinfacht Interaktion zwischen HTML und JavaScript (DOM, Animationen, Effekte, Events, AJAX, …)

erste Überlegungen und Hinweise im August 2005
veröffentlicht im Januar 2006 von John Resig
auf dem BarCamp NYC

durchschnittlich alle zwei Monate neuer Release
aktuelle Version: 1.7.2 (Juni 2012)

abstrahiert browserspezifische Eigenheiten
Browser-Support:
- Firefox 2+
- IE 6+
- Safari 3+
- Opera 10.6+
- Chrome 8+

AJAX-Beispiel aus 1. Übung

function doSomeAjax() {

    var xmlhttp;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else { // support for older IE versions
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET", "info.txt", true);
    xmlhttp.send();

}

Basiskonzepte

jQuery-Objekt
ready-Event
Methoden
Method Chaining

1. jQuery-Objekt

$("div").addClass("test");

ganz allgemein: $ ist die Funktion, die das jQuery-Objekt zurückgibt (synonym: jQuery)
"div" ist ein CSS-Selektor
$("div") erzeugt jQuery-Objekt, das auf alle gefundenen Elemente im DOM-Baum zeigt
addClass(…) verändert alle divs

2. `ready`-Event

wird ausgeführt, wenn HTML-Code fertig geladen ist
Skript greift so schnell wie möglich auf DOM-Baum zu
keine Verzögerung durch Bilder, iFrames, Plugins, etc. (im Gegensatz zum load-Event)
essenzielles Muster für unobtrusive DOM scripting
Empfehlung: Code damit umschließen

2. `ready`-Event

$(document).ready(function() {
  // jQuery code
});

Kurzschreibweise (synonym):

$(function() {
  // jQuery code
});

3. Methoden

DOM-Traversierung
find(), prevAll(), next(), siblings(), …
DOM-Manipulation
before(), after(), appendTo(), val(), …
Effekte
show(), slideDown(), hide(), fadeIn(), …
Events
bind(), change(), click(), mousedown(), …
…

4. Method Chaining

mehrere Methodenaufrufe pro jQuery-Objekt möglich
Methoden, die keinen Rückgabewert haben, geben jQuery-Objekt für weitere Aktionen zurück
Ziel: wortreiche DOM-API sinnvoller, effektiver, kompakter zur Verfügung zu stellen (DRY-Prinzip)

4. Method Chaining

var node = document.createElement("div");
node.innerHTML = "foo";
node.style.background = "red";
document.body.appendChild(node);

vs.

$("<div></div>")
  .html("foo")
  .css("background", "red")
  .appendTo(document.body);

Beispiele

Traversierung mit Method Chaining
Manipulation mit after()
Effekt mit slideToggle()
AJAX mit load()

Traversierung mit Method Chaining:

$("button")
  .parent().css("background", "red")
  .siblings().css("background", "green");

Lorem
ipsum
dolor

Manipulation mit after():

$("a[target=_blank]").after(" – extern");

Effekt mit slideToggle():

$("a.menu").click(function() {
  $(this).next().slideToggle("slow");
  return false;
});

Menu 1
- Lorem
- ipsum
Menu 2
- dolor

AJAX mit load():

$("div.box").load("info.txt");

Diese Box wird sich bald ändern.

Plugins

sehr wahrscheinlich, dass für gewünschte Funktionalität bereits ein Plugin existiert
Tipp: »einfach googeln«™ und Rad nicht neu erfinden
blindes copy and paste natürlich trotzdem nicht empfehlenswert (Quantität ≠ Qualität)