dummies
 
 

Suchen und Finden

Titel

Autor/Verlag

Inhaltsverzeichnis

Nur ebooks mit Firmenlizenz anzeigen:

 

JQuery kurz & gut

von: Andreas Vdovkin

O'Reilly Verlag, 2012

ISBN: 9783868995046 , 176 Seiten

2. Auflage

Format: PDF, ePUB, OL

Kopierschutz: frei

Windows PC,Mac OSX geeignet für alle DRM-fähigen eReader Apple iPad, Android Tablet PC's Apple iPod touch, iPhone und Android Smartphones Online-Lesen für: Windows PC,Mac OSX,Linux

Preis: 4,99 EUR

Exemplaranzahl:  Preisstaffel

Für Firmen: Nutzung über Internet und Intranet (ab 2 Exemplaren) freigegeben

Derzeit können über den Shop maximal 500 Exemplare bestellt werden. Benötigen Sie mehr Exemplare, nehmen Sie bitte Kontakt mit uns auf.


Mehr zum Inhalt

JQuery kurz & gut


 

Suchfilter


Suchfilter können verwendet werden, um einen Selektor weiter einzugrenzen um damit schneller bzw. effizienter suchen zu können. Mit Suchfiltern kann man Suchen nach bestimmten Attributen bzw. dem Inhalt dieser Attribute oder aber dem Inhalt von Elementen durchführen.

Was ihre Syntax angeht, lehnen sich Suchfilter an den CSS-Modifikator für Links an.

a:visited

Dieser Selektor liefert alle Links, die bereits geöffnet worden sind.

Ein vorangehender Selektor ist für die Suchfilter optional. Das bedeutet, dass man einen normalen Selektor voranstellen kann, aber nicht muss.

$(":first");

Liefert das allererste Element im HTML-Baum.

$("#header").find(":first");

Liefert das erste Kind der Node mit der ID header.

$("p:first");

Liefert den ersten Absatz.

Die obigen Beispiele verdeutlichen, wie man die Suchfilter anwenden kann. Das erste Beispiel zeigt einen alleinstehenden Suchfilter, das zweite die Verwendung von Suchfiltern mit Angabe eines Suchbereichs und das dritte die Verwendung von Suchfiltern mit normalen Selektoren.

Basisfilter


Erstes Element


$("p:first");

Dieser Selektor gibt den ersten Absatz zurück. :first liefert das erste Element des vorangestellten Selektors. Ist keiner vorangestellt, bezieht sich :first auf das erste Element im aktuellen Suchbereich. Ist kein Suchbereich angegeben, wird das (X)HTML-Dokument als Kontext angenommen.

Letztes Element


$("p:last")

Dieser Selektor gibt den letzten Absatz zurück. :last liefert das in Bezug auf den vorangestellten Selektor letzte Element.

Negierungsfilter


:not(Selektor)

Der Negierungsfilter liefert alle Elemente, die nicht Selektor entsprechen.

$("div:not(#header)");

Diese Anfrage liefert alle

-Elemente, die nicht die ID header haben.

Man kann mehrere :not(Selector)-Filter in einem Selektor kombinieren und auch mehrere Selektoren dem Filter übergeben.

$("div:not(#header):not(#footer)"); $("div:not(#header,#footer)");

Beide Anfragen finden alle

-Elemente, die weder header noch footer als ID haben.

$("body > div:not(.hidden)");

Dieser Selektor liefert alle

-Elemente, die ein Kind von sind und nicht die Klasse hidden haben.

$(":not(.hidden)");

Dieser Selektor liefert alle Elemente, die nicht die Klasse hidden haben.

Gerade/ungerade Filter


Selektor:even

Der Filter :even liefert aus allen Elementen, die Selektor liefern würde, jedes gerade (also das zweite, vierte usw.) Element.

Selektor:odd

Der Filter :odd liefert aus allen Elementen, die Selektor liefern würde, jedes ungerade (also das erste, dritte usw.) Element.

$(":even");

Ist kein Tag-Selektor angegeben, wird * angenommen.

$("div:even");

Dieser Selektor liefert jedes zweite gefundene

-Element.

$("div:odd");

Dieser Selektor liefert jedes ungerade div.

Indexfilter


Mit den Indexfiltern kann man direkt die Menge der zurückgegebenen Elemente beeinflussen.

n-tes Element


Mit dem :nth(Nummer) Filter kann man das n-te Element der Ergebnismenge direkt ansprechen.

$("div:nth(5)");

Dieser Selektor gibt das 5-te

-Element zurück.

Elemente größer n


Mit dem :gt(Nummer)-Filter bekommt man alle Elemente, deren Position in der Ergebnismenge größer als Nummer ist.

$("div:gt(3)");

Dieser Selektor gibt alle

-Elemente zurück, deren Array-Index größer als 3 ist. gt steht für greater than (größer als).

Elemente kleiner n


Mit dem :lt(Nummer)-Filter bekommt man alle Elemente, deren Position in der Ergebnismenge kleiner als Nummer ist.

$("div:lt(3)");

Dieser Selektor gibt alle

-Elemente zurück, deren Array-Index kleiner als 3 ist. lt steht für less than (weniger als).

Titelselektor


:header

Dieser Selektor findet alle Elemente, die ein Titel sind, z. B.

,

und

.

Ein möglicher vorangestellter Selektor kann den Filter unbrauchbar machen; es empfiehlt sich, hier als vorangestellten Selektor nur die Einschränkung auf Klassen bzw. auf Element-IDs durchzuführen.

$(".myTitle:header")

Diese Suche liefert alle Titelelemente mit der Klasse myTitle.

$(":header.myTitle");

Auch diese Suche liefert alle Elemente mit der Klasse myTitle.

Filter für animierte Elemente


:animated

Der Filter :animated liefert alle Elemente, die zum Zeitpunkt der Suchanfrage animiert werden.

$("div#header").fadeOut(2000).fadeIn(2000); $("div:animated").stop();

In diesem Beispiel wird zunächst in der ersten Zeile eine Animation auf den

-Block mit der ID header angewandt. In der zweiten Zeile werden anschließend alle
-Elemente gesucht und jede darauf ausgeführte Animation mit stop() angehalten. Mehr dazu finden Sie in Kapitel 7.

Inhaltsfilter


:contains(Text)

Der Filter :contains(Text) findet alle Elemente, die Text enthalten. Text bezieht sich dabei auf die reine Textrepräsentation eines Elements.

Achtung: Ohne passenden Suchbereich bzw. vorangestellten Selektor gibt dieser Suchfilter alle Elemente auf dem Weg zum Element zurück, das den Text enthält.

jQuery ist toll

write less, do more

$(":contains(jQuery ist toll)");

Diese Suchanfrage gibt alle Elemente auf dem Weg zu

zurück, die den angegebenen Text enthalten:

[html, body, div, h1]

Deshalb sollte der vorangestellte Selektor bei Verwendung dieses Suchfilters den Tag enthalten, in dem man den gesuchten Text vermutet.

$("h1:contains(jQuery ist toll)");

Dieser Selektor liefert das h1-Element, das den Text jQuery ist toll enthält.

Leere Elemente


:empty

Dieser Filter liefert alle Elemente, die leer sind. Elemente sind dann leer, wenn sie weder Kindelemente noch Text enthalten. Nach dieser Definition sind z. B. img-Elemente immer leer, da sie per Definition keine Kindelemente enthalten können und auch keinen Text haben.

$("img"); $("img:empty");

Diese Selektoren liefern beide dasselbe Ergebnis.

Dieser Selektor kann als Synonym für :not(:parent) verstanden werden.

Selektor enthält


$("div:has(h1)");

Der has(selector)-Selektor liefert alle Elemente, die Elemente enthalten, die im inneren Selektor beschrieben werden. Im Beispiel werden alle Elemente gefunden, die ein h1-Element enthalten. Der Selektor kann umschrieben werden mit: »Finde alle Vorfahren aller Elemente, die durch den inneren Selektor gefunden werden.«

Elternselektor


:parent

Dieser Selektor liefert alle Elemente, die einen Kind-Node haben. Ein Kind-Node kann dabei ein HTML-Element oder Text sein.

$("div:parent");

Das kann als Alias für :not(:empty) verstanden werden.

n-Kind-Filter


Der n-Kind-Filter liefert alle Elemente, die das gerade, ungerade usw. Kind ihres jeweiligen Elternelements sind. Dieser Filter liefert im Vergleich zum Filter eq(x) mehr als nur ein Element: Wird even als Parameter übergeben, liefert der Selektor alle Elemente, die ein gerades Kind ihres Elternelements sind.

:nth-child(n)

Dieser Filter liefert alle Elemente, die das n-te Kind ihres Elternelements sind.

$("div p:nth-child(3)");

Wird dieses Beispiel auf eine Seite angewandt, die vier

-Blöcke mit je 2, 3, 4, 5

-Elementen hat, wird das Ergebnis drei

-Elemente umfassen. Der Index ist eins-basiert, 1 als Parameter liefert...