ersten Rezept wollen wir aber ein paar grundlegende Prinzipien beschreiben.
Der einfachste Weg, ein bestimmtes Element oder eine Menge von Elementen in einem Dokument zu erhalten, ist das Verwenden eines CSS-Selektors in der jQuery-Wrapper-Funktion:
jQuery('#content p a');
// Selektieren aller Anker-Elemente innerhalb von Absatz-Elementen innerhalb von #content
Nachdem wir die gesuchten Elemente selektiert haben, können wir auf dieses Set beliebige jQuery-Methoden loslassen. Um zum beispiel allen Links die Klasse
selected
zuzuweisen, geht man wie folgt vor:
jQuery('#content p a').addClass('selected');
jQuery stellt eine Reihe von Methoden bereit, mit denen das DOM durchlaufen werden kannund die beim Selektionsprozess helfen können, wie zum Beispiel
next()
,
prev()
und
parent()
. Diesen und anderen Methoden kann ein Selektions-Ausdruck als einziger Parameter übergeben werden, womit das zurückgelieferte Ergebnis gefiltert werden kann. Sie können also CSS-Selektoren an verschiedensten Stellen nutzen, nicht nur innerhalb von
jQuery(...)
.
Wenn man Selektoren aufbaut, gibt es eine grundlegende Optimierungs-Regel:Seien Sie so spezifisch wie nötig. Je komplizierter ein Selektor ist, desto mehr Zeit braucht jQuery, um den String zu verarbeiten. jQuery nutzt native DOM-Methoden, um die gesuchten Elemente auszulesen. Die Tatsache, dass Sie Selektoren nutzen können, ist nur das Produkt einer nett gemachten Abstraktion. Daran ist nichts verkehrt, aber es ist sehr wichtig, sich der Auswirkungen seines Codes bewusst zu sein. Hier ein typisches Beispiel eines unnötig komplizierten Selektors:
jQuery('body div#wrapper div#content');
Eine genauere Angabe bedeutet nicht zwangsläufig, dass die Suche schneller ist. Der vorige Selektor kann auch wie folgt geschrieben werden:
jQuery('#content');
Das hat den gleichen Effekt, nur mit weniger Overhead. Manchmal können Sie Optimierungen vornehmen, indem Sie Ihren Selektoren einen Kontext mitgeben – das werden wir in diesem Kapitel auch noch behandeln (siehe Den Kontext-Parameter verwenden ).
Nur Kind-Elemente selektieren
Problem
Sie müssen eines oder mehrere direkte Kind-Elemente eines bestimmten Elements selektieren.
Lösung
Nutzen Sie den Kombinator für direkt abhängige Elemente(
>
).Dieser Kombinator erwartet zwei Selektionsausdrücke, einen auf jeder Seite. Möchten Sie zum Beispiel alle Anker-Elemente selektieren, die direkt unterhalb von List-Elementen liegen, dann können Sie diesen Selektor nutzen:
li > a
. Damit werden alle Anker gefunden, die Kind-Elemente eines List-Elements sind – und zwar direkt abhängige. Hier ein Beispiel:
Category Um nun nur die Anker in jedem List-Element zu selektieren, würden Sie jQuery wie folgt aufrufen:
jQuery('#nav li > a');
// Damit werden wie erwartet zwei Elemente selektiert
Der dritte Anker innerhalb der
#nav
Liste wird nicht selektiert, weil er kein Kind eines List-Elements ist, sondern eines
-Elements.
Diskussion
Es ist wichtig, zwischen einem Kind-Elementund einem Nachkommen zu unterscheiden. Ein Nachkomme ist jedes Element innerhalb eines anderen Elements, während ein Kind ein direkter Nachkomme ist. Die Analogie zu Kindern und Eltern hilft hier sehr, da die Hierarchie des DOM durchaus Ähnlichkeiten hierzu aufweist.
Kombinatoren wie
>
können auch ohne einen Ausdruck auf der linken Seite genutzt werden, wenn schon ein Kontext angegeben wurde:
jQuery('> p', '#content');
// Prinzipiell das Gleiche wie jQuery('#content > p')
Das Selektieren von Kind-Elementen in einer JavaScript-lastigeren Umgebung sollte mit der jQuery-Methode
children()
vorgenommen werden,der Sie einen Selektor als Filter für die zurückgegebenen Elemente mitgeben können. Mit folgender Anweisung würden alle direkten Kind-Elemente des
#content
-Element ausgewählt:
jQuery('#content').children();
Dieser Code führt zu dem gleichen Ergebnis wie
jQuery('#content > *')
, nur ist er schneller. Statt Ihren Selektor zu parsen, weiß jQuery direkt, was Sie wollen. Das ist allerdings kein notwendiges Unterscheidungskriterium. In manchen Situationen ist der Geschwindigkeitsunterschied nämlich nahezu inexistent – abhängig vom verwendeten Browser und von den zu suchenden Objekten. Die Methode
children()
ist insbesondere dann nützlich, wenn Sie mit
Kostenlos Online Lesen 
