jQuery von Kopf bis Fuß (German Edition)

inklusive Text, Bildern, Videos und der anderen Dinge, die wir uns gerne ansehen.

Die versteckte Struktur einer Webseite
    Im Laufe der Jahre hat das DOM stark zu beigetragen, dass HTML, CSS und JavaScript effizient miteinander funktionieren. Es stellt ein standardisiertes Skelett bereit, das alle modernen Browser nutzen, um das Stöbern im Web effektiver zu machen. Viele Leute stellen sich das DOM als Baum vor: Es hat eine Wurzel und Äste, anderen Enden sich »Nodes« (Knoten, Blätter) befinden. Alternativ können Sie sich das Ganze auch als Röntgenbild vom Aufbau der Seite vorstellen.

    Ein Röntgenbild zeigt dem Arzt, was mit der verborgenen Struktur des Körpers los ist. Wie ein Röntgenbild bildet das DOM die verborgene Struktur ab. Im Gegensatz zu einem Röntgenbild können JavaScript und jQuery das DOM jedoch verwenden, um die Struktur der Seite zu verändern .

jQuery macht das DOM einfacher
    Das DOM kann komplex und einschüchternd wirken. Zum Glück für uns vereinfacht jQuery die Arbeit damit. Vergessen Sie nicht: jQuery ist JavaScript, allerdings in einer viel besser zugänglichen Form. jQuery macht es wesentlich leichter, das DOM zu kontrollieren. Nehmen wir einmal an, wir wollen den HTML-Code im einzigen p-Element (Absatz) unserer Seite ändern.

    Oder wir wollen den HTML-Code in fünf p-Elementen unserer Seite ändern:

    Eine der großen Stärken von jQuery liegt darin, dass Sie mit dem DOM arbeiten können, ohne jedes einzelne Detail zu kennen. Hinter den Kulissen verrichtet weiterhin JavaScript die groben Arbeiten. Im Verlauf dieses Buches werden Sie lernen, JavaScript und jQuery zusammen zu benutzen. In Kapitel 6 erfahren Sie mehr über die Beziehung von jQuery zu JavaScript und werden dabei gleich noch Ihre JavaScript-Kenntnisse ein bisschen aufmotzen. Im Augenblick reicht jQuery für die Arbeit mit dem DOM aber völlig aus.
    Dann lassen Sie uns mal eine kleine Spritztour mit jQuery machen, OK?
    Auf Die Plätze, Fertig, Code!
    Geben Sie den folgenden Code in einen Texteditor ein und sichern ihn. Danach öffnen Sie die Datei mit Ihrem Browser und probieren die Buttons aus. (Ein Blick auf den Code schadet nicht. Und wenn Sie dabei noch herausbekommen, was hier passiert – umso besser!)

Wie geht das denn?
    Nicht schlecht, wie jQuery die Seite verändern kann, was? Hierbei ist es wichtig, daran zu denken, dass der ursprüngliche HTML- und CSS-Code dabei nicht verändert wird , wenn Sie Buttons anklicken. Aber wie macht jQuery das? Zum Beispiel so:

    Der JavaScript-Interpreter verändert die ursprünglichen HTML- und CSS-Dateien nicht, sondern er modifiziert die DOM- Darstellung der Seite im Speicher des Browsers.

    Das Dollarzeichen steht für das Geld, das Sie mit Ihren neu erworbenen jQuery-Fähigkeiten verdienen werden. Nur Spaß. Immerhin bringt das Dollarzeichen in der Welt von jQuery die Brötchen auf den Tisch.

Willkommen zur jQuery-Funktion (und ihrer Abkürzung)
    Das Dollarzeichen mit den runden Klammern ist der Kurzname für die jQuery-Funktion. Dadurch müssen wir nicht bei jedem Funktionsaufruf »jQuery()« schreiben. Die jQuery-Funktion wird oft auch »jQuery-Wrapper« genannt.

    Der kurze und der lange Name stehen für das Gleiche: den großen Codeblock, der als jQuery bekannt ist. Wir werden in diesem Buch mit der Abkürzung arbeiten. Hier sehen Sie drei verschiedene Dinge, mit denen Sie die jQuery-Funktion füttern können.

jQuery wählt Elemente genauso aus wie CSS
    Sie wissen schon viel mehr über jQuery, als Sie denken. Die Hauptsache ist: Sie wählen alles in jQuery mit Selektoren aus – mit den gleichen Selektoren, die Sie auch in CSS verwenden. Für den Fall, dass Sie sich mit CSS-Selektoren nicht so gut auskennen, gibt es hier ein wenig Nachhilfe.

(Aus-)Wahlverwandtschaften: Stil und Skript
    Das Tolle an jQuery ist, das es die gleichen CSS-Selektoren verwendet, mit denen Sie sonst die Gestaltung Ihrer Seite steuern. Hier werden sie allerdings benutzt, um Elemente der Seite zu manipulieren .

    CSS-Selektoren wählen Elemente aus, um ihnen Stile zuzuweisen; jQuery-Selektoren wählen Elemente aus, um sie mit Verhalten auszustatten.
    Anmerkung
    Sie werden in Kapitel 2 und im Rest dieses Buches noch öfter Selektoren und Methoden kombinieren.

jQuery-Selektoren, stets zu Diensten
    Wie der Name schon ahnen lässt, geht es bei jQuery hatupsächlich um Abfragen (»queries«). Sie fordern mit einem Selektor etwas an, und der JavaScript-Interpreter bittet das DOM, es