JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts

Vom Netzwerk:

umgewandelt in jQuery-Code, würde in etwa so aussehen:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

alter Inhalt

Lassen Sie uns diese vier jQuery-Anweisungen durchgehen:
Die

-Elemente auf der Seite verbergen, so dass sie der Anwender nicht mehr sieht.
Den Text in den verborgenen

durch neuen Text (
neuer Inhalt
) ersetzen.
Das

-Element durch ein neues Attribut (
class
) mit einem Wert (
updatedContent
) ergänzen.
Das

-Elements auf der Seite anzeigen, so dass es der Benutzer wieder zu sehen bekommt.
Wenn Ihnen der jQuery-Code jetzt noch etwas mystisch vorkommt, ist das schon in Ordnung. Wir werden uns im ersten Rezept dieses Kapitels die Grundlagen anschauen. Was Sie aber aus diesem Code-Beispiel mitnehmen sollten, ist das jQuery-Konzept »Elemente finden, mit denen etwas getan wird«. In diesem Beispiel haben wir alle

-Elemente in der HTML-Seite mit Hilfe der jQuery-Funktion (
jQuery()
) gefunden und dann jQuery-Methoden genutzt, um mit dieser Menge etwas zu tun (zum Beispiel
hide()
,
text()
,
addClass()
,
show()
).
    Verketten
    jQuery ist so aufgebaut, dass Sie dessen Methoden verketten können. Warum sollten Sie nicht zum Beispiel ein Element finden und dann nacheinander Operationen für dieses anwenden können? Unser vorheriges Codebeispiel, das Konzept »Elemente finden, mit denen etwas getan wird« könnte durch das Verketten zu einer einzigen JavaScript-Anweisung kombiniert werden.
    Dieser Code:
//alle divs auf der Seite verbergen jQuery('div').hide(); //Text in allen divs aktualisieren jQuery('div').text('neuer Inhalt'); //Klassen-Attribut mit dem Wert updatedContent bei allen divs hinzufügen jQuery('div').addClass("updatedContent"); //alle divs auf der Seite anzeigen jQuery('div').show();
    kann durch Verketten auch so aussehen:
jQuery('div') .hide().text('neuer Inhalt').addClass("updatedContent").show();
    oder mit Einrückung und Zeilenumbruch:
jQuery('div') .hide() .text('neuer Inhalt') .addClass("updatedContent") .show();
    Einfach gesagt können Sie durch das Verketten eine endlose Folge von jQuery-Methoden auf die Elemente anwenden, die aktuell mit der Funktion jQuery ausgewählt werden (also mit jQuery-Funktionalität umhüllt sind). Im Hintergrund werden die Elemente, die vor dem Anwenden einer jQuery-Methode ausgewählt sind, immer zurückgegeben, so dass die Kette fortgesetzt werden kann. Wie Sie in zukünftigen Rezepten sehen werden, sind auch Plugins so aufgebaut (es werden umhüllte Elemente zurückgegeben), so dass auch die Anwendung eines Plugins die Kette nicht unterbricht.
    Es ist nicht direkt offensichtlich, aber abhängig vom Code kann durch das Verketten auch der Aufwand reduziert werden, der durch ein mehrfaches Selektieren von DOM-Elementen entsteht. So muss man die betreffenden Objekte nur einmal auswählen und kann dann eine Vielzahl von jQuery-Methoden darauf anwenden. Es ist für die Performance einer Seite ausgesprochen wichtig, unnötige Durchläufe des DOM zu vermeiden. Wann immer es möglich ist, sollten Sie ein Set ausgewählter DOM-Objekte puffern oder wiederverwenden.
    Die Wrapper-Sets von jQuery
    Wenn Sie mit jQuery zu tun haben, werden Sie einen Großteil der Zeit auch mit Wrappern arbeiten. Mit anderen Worten: Sie wählen DOM-Elemente aus einer HTML-Seite aus, die mit jQuery-Funktionalität »umhüllt« werden. Manchmal wird dieses Wrapper-Set ein DOM-Element enthalten, manchmal aber auch viele. Es gibt sogar Fälle, in denen das Wrapper-Set gar kein Element enthält. In diesen Situationen werden die Methoden/Eigenschaften, die jQuery bereitstellt, still und leise nichts tun, wenn sie dafür aufgerufen werden. Das kann praktisch sein, da unnötige
if
-Anweisungen so vermieden werden können.
    Schauen Sie sich jetzt einmal den Code an, den wir zum Demonstrieren des Konzepts »Elemente finden, mit denen etwas getan wird« genutzt haben. Was würde wohl passieren, wenn wir auf der Webseite