jQuery von Kopf bis Fuß (German Edition)

kannst.

    Anmerkung
    Diesmal gibt es hier keine Übung, auch wenn Sie das vielleicht erwartet haben. Schreiben Sie die Anforderungsliste aber auf jeden Fall noch einmal in eigenen Worten auf, damit Sie wissen, was hier passieren soll.
    Bevor wir anfangen, jQuery-Code zu schreiben, wollen wir zunächst einen Blick auf die HTML- und CSS-Dateien werfen, die uns der Webdesigner geschickt hat. Dann können wir feststellen, ob Stil und Struktur für unsere Aufgabe verwendbar sind.
    DOM-Baum-Magneten
    Machen Sie sich ein Bild von der momentanen Struktur der Speisekarte, indem Sie ein Diagramm des DOM-Baumes erstellen. Unten finden Sie die Magneten für die einzelnen Elemente, die zum Vervollständigen des Baumes gebraucht werden. Überall, wo Sie im Diagramm einen Kreis sehen, gehört ein Magnet hin. Ein paar haben wir schon für Sie angebracht.
    DOM-Baum-Magneten: Lösung
    Es sieht so aus, als seien die Zutaten als Kindelemente in Form von Listeneinträgen der übergeordneten Liste für die Vorspeisenliste angelegt. Sie sind nicht besonders deutlich oder gar einmalig markiert, oder?
    Kopf-Nuss
    Eine reguläre Webseitenstruktur (HTML) erleichtert das Schreiben von jQuery-Code. Allerdings sind die Zutaten, die wir finden wollen, nicht speziell markiert. Was können wir tun, damit die Elemente leichter ausgewählt werden können?

Elemente mit Klasse
    Wie Sie aus den vorigen Kapiteln bereits wissen, können gut geschriebener HTML- und CSS-Code dabei helfen, dass jQuery die Elemente in der Webseite effizienter findet. Damit die Struktur so richtig gut wird, sollten wir das Stylesheet mit passenden Klassen und IDs versehen. Im HTML-Code fügen wir dann die passenden id- und class-Attribute ein. Dadurch wird die Auswahl der Elemente wesentlich einfacher und Sie brauchen später nicht so viel Zeit zum Programmieren.
    In jQuery sind die Selektoren nicht nur dafür da, das Aussehen von Seiten zu steuern. Mit Selektoren kann jQuery auch bestimmte Elemente in der Seite finden.

    Übung
    Finden Sie die Zutaten in der Speisekarte, für die die Chefköchin eine Alternative anbieten möchte, und versehen Sie sie mit der passenden Klasse (fisch, fleisch oder hamburger). Braucht eine Zutat keine Klasse, lassen Sie die Zeile frei. Der HTML-Code ist hier so dargestellt, wie er nachher auch auf dem Bildschirm erscheint.
    Lösung zur Übung
    Finden Sie die Zutaten in der Speisekarte, für die die Chefköchin eine Alternative anbieten möchte, und versehen Sie sie mit der passenden Klasse (fisch, fleisch oder hamburger). Braucht eine Zutat keine Klasse, lassen Sie die Zeile frei.

Und jetzt an die Umsetzung
    Jetzt, wo wir so weit alles vorbereitet haben, wollen wir uns die Serviette mit den Anforderungen der Chefköchin noch einmal ansehen. Der nächste Schritt besteht in der Erstellung von zwei Buttons.

    Spitzen Sie Ihren Bleistift
    Aktualisieren Sie Seitenstruktur und Skript, um die beiden gewünschten Buttons einzubauen. Geben Sie dem »Für Vegetarier«-Button die ID
vegetarisch_an
und dem »Zurücksetzen«-Button die ID
zuruecksetzen
.
    Spitzen Sie Ihren Bleistift: Lösung
    Aktualisieren Sie Seitenstruktur und Skript, um die beiden gewünschten Buttons einzubauen. Geben Sie dem »Für Vegetarier«-Button die ID
vegetarisch_an
und dem »Zurücksetzen«-Button die ID
zuruecksetzen
.

Was kommt jetzt?
    Das ging schnell. Die zwei Buttons sind fertig. Diese Dinge können können wir von der Serviette streichen und uns mit den Dingen beschäftigen, die der »Für Vegetarier«-Button tun soll.

    Übung
    Schreiben Sie in eigenen Worten auf, was der »Für Vegetarier«-Button tun soll.
    _____________________________________________________________
    _____________________________________________________________
_____________________________________________________________
    _____________________________________________________________
_____________________________________________________________
    _____________________________________________________________
    Lösung zur Übung
    Schreiben Sie in eigenen Worten auf, was der »Für Vegetarier«-Button tun soll.
    Finde Elemente mit der Klasse »fisch« und entferne sie aus der Liste. _________________________
Finde li-Elemente mit der Klasse »hamburger« und ersetze sie durch Portobello-Champignons.
Finde li-Elemente mit der Klasse »fleisch« und ersetze sie durch Tofu. _________________________
    Anmerkung
    Machen Sie sich keine Sorgen, wenn Ihre Antworten nicht ganz die gleichen waren. Die