Stand: 09.11.2018

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 Grundlegendes

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.

jQuery-Datei selbst 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>

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

Externe jQuery-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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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.

Da auch jQuery immer noch JavaScript ist, hat Ihre Datei die Endung .js.

In Ihrer JavaScript-Datei packen Sie üblicherweise Ihren Code in folgendes Gerüst:

(function($) {

  // Eigener jQuery-Code

})(jQuery);

Basis-Code

Hier ein Beispiel für eine minimale HTML-Datei, die jQuery von Google lädt und dann eine Ausgabe macht:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <p>jQuery running...</p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        console.log("Hello, jQuery " + jQuery().jquery + "!");
      });
    </script>
  </body>
</html>

Sie sollten auf der Konsole sehen:

Hello, jQuery 3.3.1!

Es wird empfohlen, den jQuery-Code mit diesem Gerüst zu umgeben:

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

So wird sichergestellt, dass der Code erst ausgeführt wird, wenn die Seite vollständig geladen ist.

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 und das jQuery-Objekt

Das besondere an jQuery ist, dass Sie mit den Ihnen bekannten CSS-Selektoren arbeiten können. Ergebnisse werden in einem speziellen jQuery-Objekt gespeichert, das so ähnlich wie eine Liste funktioniert, aber kein JavaScript-Array ist.

Wie in CSS können Sie Elemente (p, h1, ul, a etc.), Klassen (mit Punkt) und IDs (mit #) auswählen. Als Rückgabe bekommen Sie ein jQuery-Objekt, das alle gefundenen Elemente enthält.

Zum Beispiel alle Absätze im Dokument:

$('p')

Alle Elemente mit Klasse test:

$('.test')

Alle Absätze innerhalb eines Elements der Klasse test:

$('.test p')

Das Element mit ID special:

$('#special')

In jQuery ist es - wie in JavaScript - egal, ob Sie einfache oder doppelte Anführungezeichen verwenden, denn es handelt sich ja immer noch um JavaScript.

Wie Sie weiter mit dem zurückgegebenen jQuery-Objekt arbeiten, sehen wir im nächsten Abschnitt.

Weitere Details zum jQuery-Objekt finden Sie in der offiziellen jQuery-Doku: The jQuery Object

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 dem jQuery-Objekt

Ein "Killerfeature" von jQuery ist sicher, dass jQuery-Aktionen auch auf der zurückgegebenen Liste (= jQuery-Objekt) ausgeführt werden können, d.h. die Aktion wir auf jedem Element der Liste ausgeführt.

Ein Selektor gibt ein jQuery-Objekt zurück, dass eine Liste von Elementen enthält, z.B. alle Absätze im Dokument:

$('p')

Wenn Sie eine jQuery-Aktion wie hide (verstecken) auf einer Liste ausführen, wird diese Aktion auf jedem Element der Liste ausgeführt. Das heißt, Sie müssen weder eine Schleife noch ein forEach einsetzen, sondern schreiben einfach:

$('p').hide();

So verstecken Sie mit einer Zeile Code alle Absätze im Dokument. Wichtig zu beachten ist hier, dass hide eine Methode ist, die auf einem jQuery-Objekt arbeiten kann, aber nicht auf den regulären DOM-Objekten, die wir im letzten Kapitel kennen gelernt haben.

Sie können aber natürlich auch auf einzelne Elmente zugreifen, allerdings funktioniert das nicht mit der Array-Notation.

$('p')[0].hide(); // FEHLER!

Dieser Ausdruck ist allerdings schon korrekt:

$('p')[0]

Allerdings wird hier ein DOM-Objekt zurückgegeben, d.h. dies würde funktionieren:

$('p')[0].style.display = 'none';

Aber wir möchten die vielen Funktionen der jQuery-Welt benutzen und müssen daher lernen, wie wir innerhalb eines jQuery-Objekts auf einzelne Elemente zugreifen.

Auf Elemente im jQuery-Objekt zugreifen

Anstelle der Array-Notation verwenden Sie die Methode eq(). Diese gibt das Element zurück, das mit dem Index angegeben ist (startet bei 0). Um den ersten Absatz im Dokument zu verstecken schreiben wir also:

$('p').eq(0).hide();

Zusätzlich gibt es die Methoden first und last, die jeweils geben das erste/letzte Element

 zurückgeben:

$('p').first().hide();
$('p').last().hide();

Beachten Sie, dass die Rückgaben für die obigen Funktionen auch wieder jQuery-Objekte sind, d.h. auch diese Objekte sind im Grunde Listen, nur eben mit der Länge eins. Es ist in jQuery also irrelevant, ob Sie mit einzelnen Elementen oder einer Liste arbeiten. In der Praxis ist das sehr sinnvoll und spart eine Menge Code.

Alle Elemente durchlaufen

Wenn es eine jQuery-Aktion gibt, die Sie anwenden möchten, müssen Sie gar nicht alle Elemente eines jQuery-Objekts durchlaufen. Gibt es aber keine solche Funktion oder Sie möchten komplexere Handlungen durchführen, brauchen Sie eine Schleife oder einen Mechnismus wie forEach.

Bei einem jQuery-Objekt funktioniert forEach aber nicht, da es ja kein JavaScript-Array ist. Stattdessen gibt es eine eigene Methode each, die ähnlich arbeitet. 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());
});

Das $(this) verweist dabei auf das aktuell durchlaufene jQuery-Element.

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. Im Gegensatz zu DOM-Objekten - wo man mit Eigenschaften arbeitet - funktioniert der Zugriff in jQuery über Getter- und Setter-Methoden.

Den HTML-Text bekommen Sie mit der Getter-Methode html:

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

Zu beachten ist hier, dass nur der HTML-Text des ersten gefundenen Elements zurückgegeben wird.

Vergleichen wir den Code mit JavaScript:

document.getElementsByTagName('p')[0].innerHTML

Sie ändern HTML-Elemente in jQuery mit der Setter-Methode html. Hier werden alle gefundenen Elemente geändert:

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

Möchten Sie nur das erste Element ändern, müssen Sie first oder eq einbauen:

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

Auch hier der Vergleich zu JavaScript:

document.getElementsByTagName('p')[0].innerHTML = 'I have been <strong>clicked</strong>!'

Sie sehen, dass Getter- und Setter-Methode genau gleich heißen und sich nur darin unterscheiden, dass die Setter-Methode einen Parameter erwartet, nämlich den neuen Wert.

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

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

Oder Sie setzen Text:

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

Wenn Sie mit einen Klick auf die Überschrift den Text ändern wollen, schreiben Sie z.B.

$('h1').click(function(){
  $(this).html('Das ist <em>schräg</em>!');
});

Nach diesem Befehl reagieren alle h1-Überschriften auf einen Klick mit der Änderung der Überschrift.

Styling ändern

Das Styling (CSS)
 ändern Sie mit:

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

Auch das können Sie in einer Interaktion verwenden: Wir möchten, dass der Hintergrund der Überschrift gelb markiert wird, wenn wir mit der Maus in das Element fahren:

$('h1').mouseenter(function(){
  $(this).css('background-color', 'yellow');
});

Wenn wir wollen, dass bei Verlassen des Elements der Hintergrund wieder weiß wird, schreiben wir:

$('h1').mouseleave(function(){
  $(this).css('background-color', 'white');
});

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.2.6 Im Baum 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.

$("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.

$("span").parents("ul");

Als Anwendungsbeispiel schauen wir uns eine Liste in HTML an:

<ul>
  <li>Johnny</li>
  <li>Lonny</li>
  <li>Donny</li>
</ul>

Vielleicht möchten Sie folgenden Mausover-Effekt erreichen: Wenn Sie Maus über ein Item fährt, soll das Item gekennzeichnet werden (z.B. rote Schrift). Gleichzeitig soll aber auch die gesamte Liste markiert werden (z.B. gelber Hintergrund).

Dann schreiben Sie

$('li').mouseenter(function() {
  $(this).css('color', 'red');
  $(this).parent().css('background-color', 'yellow');
});

Außerdem müssen wir das rückgängig machen, wenn die Maus das Item verlässt:

$('li').mouseleave(function() {
  $(this).css('color', 'black');
  $(this).parent().css('background-color', 'white');
})

Kinder / Nachfahren

Mit children() bekommen Sie alle Kindknoten:

$("div").children();

Auch hier können Sie zusätzlich filtern:

$("div").children(".special");

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

$("div").find("span");

In der Anwendung verwenden Sie diese Methoden, wenn Sie in einem übergeordneten Container ein Event auffangen (z.B. Klick), aber alle enthaltenen Elemente stylen wollen (mit einer nicht-vererbbaren Eigenschaft).

Hier bekommen alle Kindelemente einen Rahmen:

$('div').click(function() {
    $(this).children().css('border-style', 'solid');
})

So bekommen alle Kinder und Kindeskinder einen Rahmen:

$('div').click(function() {
    $(this).find('*').css('border-style', 'solid');
})

Geschwister

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

$("h2").siblings();

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

$("h2").next();

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

$("h2").nextAll();

Sie können in die Klammer noch einen Filter stecken, um z.B. nur alle Absätze zu bekommen, die unter dem h2 liegen:

$("h2").nextAll("p");

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

Nehmen wir an, Sie möchten den Text unter h2 verstecken bzw. zeigen, wenn Sie auf die Überschrift klicken. Dann schreiben Sie:

$('h2').click(function() {
    $(this).nextAll('p').toggle();
})

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.

$("p").filter(".intro");

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

$(document).find('*').not('meta');

9.3 Effekte

Neben dem eleganten Ansteuern von DOM-Elementen stellt jQuery auch eine Reihe von wichtigen Effekten bereit, die sehr bequem eingebaut werden können.

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 animate() 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 Beispiel: Akkordeon

9.4.1 Umsetzung in jQuery

Wir schauen uns jetzt an, wie wir das Akkordeon aus dem letzten Kapitel mit jQuery realisieren:

Beispiel Akkordeon aufgeklappt

In HTML sieht die Struktur wie folgt aus:

<div class="accordion">
  <h2>Vorlesung 1</h2>
  <div class="section">
    <p>
      Lorem ipsum ...
    </p>
    <p>
      Lorem ipsum ...
    </p>
  </div>

  <h2>Vorlesung 2</h2>
  <div class="section">
    <p>
      Lorem ipsum ...
    </p>
    <p>
      Lorem ipsum ...
    </p>
  </div>

  ...
</div>

Wir wollen auf einen Klick auf eine h2-Überschrift reagieren, indem wir (a) alle Abschnitte zunächst zuklappen und (b) den einen Abschnitt hinter dem angeklickten h2-Element aufklappen.

In jQuery benötigt man für jeden Schritt eine Zeile Code:

$('.accordion h2').click(function() {
  $(this).parent().children(".section").css("display", "none");
  $(this).next().css("display", "block");
});

Zum Vergleich die JavaScript-Funktion:

document.querySelectorAll('.accordion h2').forEach(function(x) {
  x.addEventListener('click', function() {
    collapseAll();
    this.nextElementSibling.style.display = 'block';
  });
});

Zum Zuklappen aller Abschnitte hatten wir zusätzlich die Funktion collapseAll definiert:

function collapseAll() {
  document.querySelectorAll('.accordion .section').forEach(function(el) {
    el.style.display = 'none';
  });
}

Sie würden vielleicht zustimmen, dass die jQuery-Variante nicht nur weniger Code erfordert, sondern auch deutlich lesbarer ist.

9.4.2 Roll-Effekt hinzufügen

Wir möchten jetzt das angeklickte Segment ausrollen mit Hilfe von slideDown. Wir ändern unseren Code wie folgt.

$('.accordion h2').click(function() {
  //$(this).parent().children(".section").css("display", "none");
  $(this).next().slideDown();
});

Da das Verschwinden der bislang aufgeklappten Segmente nicht zu unserer Animation passt, haben wir die Zeile ausgekommentiert. Wir haben noch das Problem, dass bei mehrmaligem Anklicken der Überschrift, das Segment immer neu ausgerollt wird. Wir wollen also vorher testen, ob das Segment nicht schon sichtbar ist. Dazu verwenden wir die Methode css.

$('.accordion h2').click(function() {
  if ($(this).next().eq(0).css('display') == 'none') {
    $(this).next().slideDown();
  }
});

Wir können jetzt auch sagen: Wenn das Segment aufgerollt ist und ich klicke auf die Überschrift, dann soll das Segment wieder zurollen:

$('.accordion h2').click(function() {
  if ($(this).next().eq(0).css('display') == 'none') {
    $(this).next().slideDown();
  } else {
    $(this).next().slideUp();
  }
});

Eine letzte Herausforderung ist es, immer nur ein Segment zu zeigen. Dazu müssen wir, bevor wir ein Segment öffnen, alle anderen Segmente schließen. Wir müssen dabei nicht extra checken, ob ein Segement offen ist. Die Methode slideUp macht einfach nichts, wenn das Segment unsichtbar ist.

$('.accordion h2').click(function() {

  // Alle anderen Segmente schließen
  $(this).siblings('h2').each(function() {
    $(this).next().slideUp();
  });

  if ($(this).next().eq(0).css('display') == 'none') {
    $(this).next().slideDown();
  } else {
    $(this).next().slideUp();
  }
});

9.5 Übungen

Laden Sie sich die Datei jQ_headlines.html herunter. Sie sehen Überschriften und Texte:

Seite mit Überschriften

In der Datei finden Sie bereits eine Verlinkung mit einer jQuery-Bibliothek und einen Code-Bereich (<script>) für Sie.

(A) Absätze einfärben

Implementieren Sie folgenden Mouseover-Effekte.

(1) Zunächst ein leichter: Wenn Sie mit der Maus einen Absatz berühren, soll dieser mit gelb unterlegt werden.

(2) Erweitern Sie dies, so dass sowohl Absätze als auch alle Überschriften sind so verhalten.

(3) Ein ganz anderer Ansatz: Wenn Sie mit der Maus eine Überschrift berühren, sollen alle darunter liegenden Absätze gelb eingefärbt werden.

(B) Überschriften nummerieren

Auch hier haben wir wieder zwei Teile:

(1) Schreiben Sie jQuery-Code, der alle h2-Überschriften mit einer Nummerierung versieht:

Seite mit nummerierten Überschriften

Sie benötigen die jQuery-Methode text, um den Text zu modifizieren, und offensichtlich müssen Sie die Überschriften "zählen".

(2) Anschließend können Sie versuchen, auch die nächste Ebene zu nummerieren:

Seite mit nummerierten Unterüberschriften

(C) 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: jQ_toc.html