jQuery von Kopf bis Fuß (German Edition)
tun, nicht mit ihrer Veränderung.
Selektor
Nein
Ein Selektor wählt ein Element anhand der Dinge im DOM aus. Wir haben unsere Elemente bereits ausgewählt. Wir müssen diese Elemente jetzt speichern.
Es gibt keine: Dummen Fragen
F:
F: Ich kenne remove und detach. Was mache ich, wenn ich nicht das Element, sondern nur seinen Inhalt entfernen will?
A:
A: Um den Inhalt eines Elements zu entfernen, können Sie die
empty
-Methode verwenden. Um den Inhalt eines Absatzes auf einer Seite zu entfernen, können Sie beispielsweise diese Formulierung verwenden:
$("p").empty();
.
F:
F: Gibt es eine Möglichkeit, sämtliche Vorfahrenelemente eines Elements auszuwählen?
A:
A: Ja. Zusätzlich zur
parent
-Methode besitzt jQuery die Methode
parents
. Damit können Sie sämtliche Vorfahren des gewählten Elements ansprechen. Weiter hinten in diesem Kapitel können Sie die Methode in Aktion erleben.
F:
F: Was kann ich machen, wenn ich das nächstgelegene Vorfahrenelement eines bestimmten Typs finden möchte?
A:
A: Dafür können Sie die
closest-
Methode benutzen. Wie die
parents-
Methode steigt
closest
im DOM-Baum nach oben. Sobald sie einen Treffer erzielt, hält sie an. Wenn Sie beispielsweise für ein li-Element das nächstgelegene ul-Element finden möchten, können Sie schreiben:
$("li").closest("ul")
.
F:
F: Ich kenne die Methoden
next
und
previous
. Was kann ich tun, um alle Elemente auf der gleichen Ebene im DOM-Baum zu finden?
A:
A: Glücklicherweise haben die jQuery-Entwickler auch daran gedacht. Die Methode
siblings
findet alle Geschwisterelemente auf der gleichen Ebene wie das ausgewählte Element.
F:
F: Ist jQuery in Google Chrome bereits eingebaut?
A:
A: Der Grund dafür, dass Sie jQuery in den Entwicklerwerkzeugen von Chrome benutzen können, liegt darin, dass wir jQuery am Anfang der HTML-Seite eingebettet haben. Wenn Sie eine Webseite besuchen, auf der jQuery nicht benutzt wird, sollten Sie nicht erwarten, dass die JavaScript-Konsole von Chrome jQuery-Anweisungen ausführt.
Speichern von Elementen in Variablen
Variablen sind offensichtlich ziemlich praktisch. Immerhin benutzen wir sie immer wieder. Wir haben Variablen bereits in den ersten drei Kapiteln gesehen. Bisher haben wir sie aber nur verwendet, um Zahlen und Text zu speichern. Wäre es nicht bequem, wenn Variablen auch unsere Elemente speichern könnten?
Der Browser bewahrt die Elemente kurze Zeit im Arbeitsspeicher auf. Wenn wir sie später im Programm noch einmal benutzen möchten, ist es eine gute Idee, sie in Variablen zu speichern. Aber wie geht das?
Schon wieder dieses Dollarzeichen ...
Das Speichern der Elemente ist einfach. Zunächst erzeugen wir eine Variable, genau wie beim Speichern von Text und Zahlen. Dann weisen wir ihr (mithilfe des Gleichheitszeichens) das Ergebnis der Anweisung zu, die die Elemente zurückgibt. Aber eigentlich wäre es gut, zu wissen, wenn die Variable besondere Dinge (im Gegensatz zu einfachem Text oder Zahlen) speichert, oder? Üblicherweise stellen jQuery-Coder Variablen, die zurückgegebene Elemente speichern, ein Dollarzeichen voran. Auf diese Weise lässt sich schnell erkennen, dass in der Variablen Dinge von jQuery gespeichert werden.
Verschiedene Elemente zu speichern, führt schnell zu einem Durcheinander. Daher benutzt jQuery immer JavaScript- Arrays , um seine Elemente abzulegen.
Die Speichermöglichkeiten mit Arrays erweitern
Immer wenn wir Elemente aus dem DOM auswählen und in einer Variable speichern, gibt jQuery diese Daten als Array zurück. Ein Array ist einfach eine Variable mit größeren Speichermöglichkeiten.
Wir können jedes Fach mit Daten befüllen und sie wieder auslesen. Um den Wert »15« im dritten Fach abzulegen, würden wir das hier schreiben:
Freak-Futter
Arrays müssen nicht mit einem Dollarzeichen ($) beginnen. Die Praxis, jQuery-Arrays ein Dollarzeichen voranzustellen ist eine Programmierkonvention von jQuery-Entwicklern.
Elemente in einem Array speichern
Wenn wir die li-Elemente auswählen, entfernen und einer Variablen (
$f
) zuweisen, nimmt jQuery die vom DOM zurückgegebenen Elemente und speichert sie ordentlich in einem JavaScript-Array. Dadurch wird die Arbeit nicht so schwierig, wenn jemand den »Zurücksetzen«-Button anklickt und die Elemente wieder an ihren alten Platz müssen.
$f = $(".fisch").parent().parent().detach();
jQuery nimmt die vom DOM zurückgegebenen Elemente und speichert sie ordentlich in einem Array.
Entspannen Sie sich
Zu Arrays gibt es noch
Weitere Kostenlose Bücher