jQuery ist eine kostenlose Javascript-Bibliothek, die den Umgang mit DOM-Elementen erleichtert und zusätzlich viele Effekte anbietet. jQuery nutzt dabei die wohlbekannte CSS-Syntax zur Selektion.

jQuery ist sicher die populärste Bibliothek im WWW für die Frontend-Programmierung, wurde von John Resig entwickelt und 2006 veröffentlicht. jQuery ist nicht verwechseln mit JQuery UI und jQuery Mobile. Letztere sind eigenständige Projekte mit teils ganz anderer Zielsetzung.

Als Literatur empfehle ich folgendes Buch, das besonders Design-affine Menschen anspricht:

Jon Duckett (2015) JavaScript & jQuery: Interaktive Websites entwickeln, Wiley.

9.1 Erste Schritte

9.1.1 jQuery einbinden

jQuery ist eine JavaScript-Bibliothek. Eine Bibliothek (engl. library) ist eine Datei mit lauter (JavaScript-)Funktionen, die Sie für Ihre Programmierung verwenden können. Das heißt: Sie programmieren in JavaScript und werden dabei durch zusätzliche Funktionalität unterstützt.

Damit Ihr Code funktioniert, muss der Browser die Bibliothek laden. Um dies zu tun, hat man zwei Optionen.

Datei bereitstellen

Sie können die Bibliothek als Datei von jquery.com runterladen und anschließen auf Ihre Webseite hochladen. Auf der Webseite können Sie zwischen "compressed" und "uncompressed" unterscheiden. Ersteres bedeutet lediglich, dass alle Leerzeichen und Zeilenumbrüche entfernt sind. Das nennt man auch "minifizieren" und wird mit dem Kürzel "min" angezeigt.

In Ihrer HTML-Datei geben Sie den Ort Ihrer Datei an, zum Beispiel:

<script src="pfad-zu-jquery/jquery-3.2.1.min.js"></script>

Jetzt können Sie in einem weiteren script-Block jQuery verwenden:

<script>
  // Eigener jQuery-Code
</script>

Natürlich muss dieser Block unter dem anderen Script-Block stehen.

Das Einbindung von JavaScript macht man am besten ganz am Ende des body-Blocks, also direkt vor dem schließenden Tag </body>.

Externe Datei verlinken (CDN)

Alternativ können Sie auf eine Datei verweisen, die bei einem CDN (content delivery network) liegt, z.B. bei Google. Der Vorteil ist, dass die Bibliothek evtl. schon im Cache-Speicher der Browsers liegt, weil andere Webseiten das selbe CDN bemüht haben.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

Auch hier gilt: Das Einbindung von JavaScript macht man am besten ganz am Ende des body-Blocks, also direkt vor dem schließenden Tag </body>.

Vorsicht: Es gibt eine Variante, die sich "slim" nennt. Diese stellt einige wichtige Effekte nicht zur Verfügung.

jQuery testen

Um herauszufinden, ob jQuery "da" ist, laden Sie die Seite im Browser und öffnen die JavaScript-Konsole. Geben Sie ein:

jQuery

Die Reaktion sollte klar machen, dass es sich um ein Objekt handelt.

Die Versionsnummer bekommen Sie mit

jQuery().jquery

Eigener Code

jQuery-Code wird wie JavaScript-Code eingebunden, denn es ist ja JavaScript.

Also entweder direkt im HTML:

<script>
  // Ihr Code
</script>

Oder als Link auf separate Datei z.B. "script.js" im Unterverzeichnis "/js".

<script src="js/script.js"></script>

In beiden Fällen ist es wichtig, dass der eigene Code erst nach der Stelle kommt, wo die Bibliothek eingebunden wird.

9.1.2 jQuery-Befehle

Ein jQuery-Befehl macht in der Regel folgendes:

  1. ein oder mehrere HTML-Elemente auswählen
  2. eine Aktion auf diesen Elementen ausführen (z.B. unsichtbar schalten)

Die Basis-Syntax ist:

$(selektor).aktion();

Beispiele sind:

$('p').hide();
$('.test').hide();

Diese Form


$('p').hide();

ist eine Abkürzung für


jQuery('p').hide();

Es wird zu 99% die Form mit dem $ benutzt.

Um sicher zu stellen, dass Ihr Code erst dann ausgeführt wird, wenn die Seite komplett geladen ist, betten Sie den gesamten Code ein in:

$(document).ready(function(){

    // jQuery-Code, zum Beispiel:
    alert('Hallo');

});

9.2 jQuery und DOM

9.2.1 Selektion

Das besondere an jQuery ist, dass Sie mit den Ihnen bekannten CSS-Selektoren arbeiten können.

Wie in CSS können Sie Elemente (p, h1, ul, a etc.), Klassen (mit Punkt) und IDs (mit #) auswählen. Hier wird auf den selektierten Elementen direkt eine Aktion ausgeführt, die die Elemente unsichtbar schaltet.

$('p').hide()
$(".test").hide()
$('#test').hide()

In jQuery ist es egal, ob Sie einfache oder doppelte Anführungezeichen verwenden, da es ja immer noch um JavaScript handelt.

Sie können auch auf Attribute eines HTML-Elements zugreifen:

$('a').attr('title')

Hier geben wir das Attribut mit alert aus:

alert($('a').attr('title'));

9.2.2 Umgang mit Listen

Selektoren geben eine Liste von Entitäten zurück. Wenn Sie eine Aktion auf einer Liste ausführen, wird diese Aktion auf jedem Element der Liste ausgeführt.

Sie können aber natürlich auch auf einzelne Elmente zugreifen.

Element auswählen

first() und last() geben das erste/letzte Element

 zurück:

$(document).ready(function(){
  $("div p").first();
});

eq() gibt das Element zurück, das mit dem Index angegeben ist (startet bei 0):



$(document).ready(function(){
  $("p").eq(1);
});

Schleife

Wenn man auf jeder Entität einer Liste eine Funktion ausführen möchte, kann man das so schreiben:

$("h1").each(function(){
  console.log($(this).text());
});

9.2.3 Verkettung

Die Ausführung einer Funktion gibt wieder das ausgewählte Objekt zurück, so dass Befehle mit Punktnotation verkettet werden können:


$("#p1").css("color","red").slideUp(2000).slideDown(2000);

Vorteil: es wird nur einmal gesucht (selektiert).

9.2.4 Events

Events sind Ereignisse, die z.B. vom User ausgelöst werden, z.B.

Diese Ereignisse sind gleichzeitig jQuery-Aktionen, mit denen Sie eine eigene Funktion an Elemente binden können. Die Funktion nennt man auch den Event-Handler.

Hier wird für das Click-Event eine Funktion (= Event-Handler) an alle "p"-Elemente gebunden:

$('p').click(function(){
  // Ihr Code!!
});

Innerhalb Ihres Event-Handlers können Sie mit $(this) auf das Element zugreifen, das den Event ausgelöst hat:

$('p').click(function(){
  $(this).hide();
});

9.2.5 Elemente ändern

Inhalte ändern

Sie können mit jQuery natürlich auch auf Inhalte zugreifen und diese ändern.

Den HTML-Text bekommen Sie mit:

foo = $('h1').html();

Sie ändern ihn entsprechend mit

$('h1').html('I have been <strong>clicked</strong>!');

Wollen Sie nur den Text ohne HTML-Markup, schreiben Sie:

foo = $('h1').text();

Oder Sie setzen Text:

$('h1').text('I have been clicked!');

Styling ändern

Das Styling (CSS)
 ändern Sie mit:

$('h1').css('color', 'red');

Wenn Sie auf einen Click hin den Text ändern wollen, schreiben Sie z.B.

$('p').click(function(){
  $(this).html('I have been <strong>clicked</strong>!');
});

Klassen ändern

Nehmen wir an, wir haben das folgende CSS vorliegen:

.important {
  font-weight: bold;
  font-size: 40px;
}

.blue {
  color: blue;
}

Sie können eine Klasse hinzufügen mit addClass():

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

Sie können eine Klasse entfernen mit removeClass():

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

9.3 Effekte

9.3.1 Basiseffekte

Hide/Show

Wenn Sie auf Events reagieren reagieren möchten, indem Sie z.B. ein Bildschirmelement aus- oder einschalten, können Sie hide() und show() verwenden:

$(this).hide();
$(this).show();

Es gibt auch toggle(), das ein Element zeigt, wenn es versteckt ist und umgekehrt. Es ist also so eine Art Schalter:

$(this).toggle();

Fade

Mit fadeIn und fadeOut können Sie ein Element weich ein- und ausblenden:

fadeIn(speed, callback)
fadeOut(speed, callback)

Die Geschwindigkeit kann optional gesetzt werden (in Millisekunden, also 1000 für eine Sekunde).

Mit "callback" ist eine Funktion gemeint, die Sie übergeben können und die nach Ende des FadeIn ausgeführt wird.

Auch hier haben Sie eine Schalterfunktion:

fadeToggle(speed, callback)

Um zu einer bestimmten Deckkraft (engl. opacity) zu faden, schreibt man:

fadeTo(speed, opacity, callback)

0 ist transparent, 1 ist voll sichtbar.

Slide

Schließlich können Sie ein Element durch "rollen" öffnen oder schließen:

slideDown(speed, callback)
slideUp(speed, callback)
slideToggle(speed, callback)

9.3.2 Animate

Mit animat() können Sie beliebige CSS-Eigenschaften (Farbe, Abstand vom Rand, Drehung …) animieren. Allgemein sieht das so aus:

animate({ css }, speed, callback);

Ein Beispiel:

$("button").click(function(){
  $("div").animate({left:'250px'});
});

Es können mehrere Eigenschaften gleichzeitig animiert werden:

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

Relative Werte können Sie mit += und -=



 angeben:

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

Mehrere Animationen werden hintereinander ausgeführt, wie hier z.B.:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

9.4 Im DOM navigieren

Wie auch in JavaScript möchten wir im DOM-Baum navigieren. Schauen wir uns nochmal ein Beispiel für einen DOM-Baum an:

Beispiel für einen DOM-Baum

Die Wurzel des Dokuments bekommen Sie bei jQuery mit

$(document)

Eltern

Mit parent() bekommen Sie den einen direkten Elternknoten, den jedes Element hat.

$(document).ready(function(){
  $("span").parent();
});

Mit parents() bekommen Sie nicht nur den direkten Elternknoten, sondern auch dessen Elternknoten usw.

Im folgenden Beispiel sehen Sie, dass man in den Klammern auch noch einen Filter angeben kann.

$(document).ready(function(){
  $("span").parents("ul");
});

Kinder / Nachfahren

Mit children() bekommen Sie alle Kindknoten:

$(document).ready(function(){
  $("div").children();
});

Auch hier können Sie zusätzlich filtern:

$(document).ready(function(){
  $("div").children("p.1");
});

Der Befehl find() sucht in allen Nachfahren, also allen Kindern und Kindeskindern:

$(document).ready(function(){
  $("div").find("span");
});

Geschwister

Mit siblings() bekommen Sie alle Geschwisterknoten. In einer Baumdarstellung wie oben sind das alle benachbarten Knoten mit dem selben Elternknoten.

$(document).ready(function(){
  $("h2").siblings();
});

Mit next() bekommen Sie den nächsten (rechten) Geschwisterknoten:

$(document).ready(function(){
  $("h2").next();
});

Mit nextAll() bekommen Sie alle Geschwisterknoten, die rechts liegen:

$(document).ready(function(){
  $("h2").nextAll();
});

Ähnlich, aber nach links, funktionieren prev() und prevAll().

Listen filtern

Viele Selektoren und Funktionen liefern Listen zurück, z.B. parents(), siblings(), nextAll() usw. Es ist möglich, mit filter() in diesen Listen zu suchen.

$(document).ready(function(){
  $("p").filter(".intro");
});

Mit not() können Sie auch die Liste ausdünnen:

$(document).ready(function(){
  $(document).find('*').not('meta');
});

9.5 Übungen

(a) Akkordeon

Wie schon im Kapitel über JavaScript sollen Sie sich wieder an einem "Akkordeon" versuchen. Das heißt, bei einem Click auf einer Überschrift wird jeweils der darunter liegende Abschnitt angezeigt. Die anderen Abschnitte werden versteckt.

Beispieldatei Akkordeon

Sie können die folgende Basisdatei verwenden, wo jQuery über ein CDN eingebunden ist: akkordeon_jquery.html

(b) Automatisches Inhaltsverzeichnis

Erstellen Sie aus einem vorliegenden Dokument automatisch ein Inhaltsverzeichnis (engl. table of contents) in Form einer Liste. Dazu sammeln Sie alle Überschriften vom Typ h2 und h3 ein und erzeugen eine entsprechende Liste. Binden Sie das ganze als nav-Element in Ihr Dokument ein.

Außerdem müssen Sie seiteninterne Links mit selbst-generierten IDs erzeugen.

Ihr Dokument soll bei Erfolg so aussehen:

Dokument mit Inhaltsverzeichnis

Sie können die folgende Basisdatei verwenden, wo jQuery über ein CDN eingebunden ist: toc_jquery.html