jQuery Grundtutorials

jQuery Effekte

jQuery-Selektoren erlauben es Ihnen, HTML-Elemente auszuwählen und zu verarbeiten.

Dieser Abschnitt enthält eine vollständige Liste der Selektoren, die zur neuesten jQuery JavaScript-Bibliothek gehören.

Alle Selektoren werden in mehrere Kategorien eingeteilt.

Selektoren	Beispiel	Beschreibung
*	$("*")	Wählen Sie alle Elemente (allgemeiner Selektor)
#id	$("#demo")	Wählen Sie ein Element mit dem id="demo"
.class	$(".demo")	Wählen Sie alle Elemente mit der Klasse "demo"
element	$("p")	Wählen Sie alle <p>-Elemente
selector1selector2	, selector	$("p, div")

Selektoren	Beispiel	Beschreibung
ancestor descendant	$("div p")	Wählen Sie alle <p>-Elemente im <div>-Element
parent > child	$("div > p")	Wählen Sie alle <p>-Elemente, deren Eltern-Element ein <div>-Element ist
prev + next	$("div" + p")	Wählen Sie alle <p>-Elemente, die direkt nach dem <div>-Element folgen
prev ~ siblings	$("div ~ p")	Wählen Sie alle <p>-Elemente, die als Klassenbrüher des <div>-Elements stehen

Selektoren	Beispiel	Beschreibung
[attribute]	$("[target]")	Wählen Sie alle Elemente mit dem Attribut target
[attribute=value]	$("a[href=\u0026quot;]39;CSS3']")	Wählen Sie alle Elemente mit einem href-Attribut, das den Wert "CSS" hat3"s<a>-Element
[attribute!=value]	$("a[href!=\u0026quot;]39;CSS3']")	Wählen Sie alle Elemente mit dem href-Attributwert, der nicht " CSS" ist3"s<a>-Element
[attribut~=value]	$("[alt~=Parrot]")	Wählen Sie alle Elemente mit dem alt-Attribut und dem Wort "Parrot" enthält
[attribut\|=value]	$("[lang\|=en]")	Wählen Sie alle Elemente mit der lang-Attributwert, die mit " en" beginnt
[attribut^=value]	$("a[href^=https]")	Wählen Sie alle Elemente mit der lang-Attributwert, die mit " https" beginnt
[attribut$=value]	$("a[href$='.org']")	Wählen Sie jeden <a>-Element, dessen href-Attributwert mit " .org" endet
[attribut*=value]	$("a[href*=example]")	Wählen Sie jeden <a>-Element, dessen href-Attributwert den Unterstring "example" enthält

Selektoren	Beispiel	Beschreibung
:first	$("p:first")	Wählen Sie das erste <p>-Element
:last	$("p:last")	Wählen Sie das letzte <p>-Element
:even	$("tr:even")	Wählen Sie alle geraden <tr>-Elemente, Null-Index
:odd	$("tr:odd")	Wählen Sie alle ungeraden <tr>-Elemente mit Null-Index
:not()	$("p:not(.demo)")	Wählen Sie alle <p>-Elemente aus, die keine class="demo" haben
:eq()	$("tr:eq("2)")	Wählen Sie das dritte <tr>-Element aus, das im abgestimmten Satz von Null beginnenden Index ist
:lt()	$("tr:lt("5)")	Wählen Sie alle Indexnummern, die kleiner sind als5der <tr>-Elemente, der von Null beginnenden Index
:gt()	$("tr:gt("5)")	Wählen Sie alle Indexnummern, die größer sind als5der <tr>-Elemente, der von Null beginnenden Index
:header	$(":header")	Wählen Sie alle Header-Elemente aus, z.B. <h1>, <h2>, <h3> usw.
:lang()	$("div:lang(en)")	Wählen Sie alle <div>-Elemente aus, die den Sprachwert "en" haben, d.h. lang="en", lang="en-us" usw.
:root	$(":root")	Wählen Sie den Wurzelelement des Dokuments aus, das immer das <html>-Element im HTML-Dokument ist
:animated	$(":animated")	Der Selektor wählt alle animierten Elemente aus, wenn der Selektor ausgeführt wird

Selektoren	Beispiel	Beschreibung
:first-child	$("p:first-child)	Wählen Sie alle <p>-Elemente, die als erster Abkömmling ihres Elternelements gehören
:last-child	$("p:last-child)	Wählen Sie alle <p>-Elemente, die als letzter Abkömmling ihres Elternelements gehören
:only-child	$("p:only-child)	Wählen Sie alle <p>-Elemente, die dem einzigen Kindknoten in ihrem Elternelement gehören
:first-of-type	$("p:first-of-type)	Wählen Sie alle <p>-Elemente, die dem ersten <p>-Element in ihrem Elternelement gehören
:last-of-type	$("p:last-of-type)	Wählen Sie alle <p>-Elemente, die dem letzten <p>-Element in ihrem Elternelement gehören
:only-of-type	$("p:only-of-type)	Wählen Sie alle <p>-Elemente, die keine Gleichknoten haben und denselben Elementnamen tragen
:nth-child(n)	$("p:nth-child(3)")	Wählen Sie alle <p>-Elemente, die dem dritten Kindknoten in ihrem Elternelement gehören
:nth-last-child(n)	$("p:nth-last-child(4)")	Wählen Sie alle <p>-Elemente, die von dem vorherigen Element bis zum ersten Element gehen, und die der vierte Kindknoten ihres Elternelements sind
:nth-of-type(n)	$("span:nth-of-type(3)")	Wählen Sie alle <span>-Elemente, die dem dritten <span>-Element in ihrem Elternelement gehören
:nth-last-of-type(n)	$("span:nth-last-of-type(4)")	Wählen Sie das4alle <span>-Elemente eines <span>-Elements, gezählt von letztem zum ersten Element

Selektoren	Beispiel	Beschreibung
:contains()	$("p:contains('is')")	Wählen Sie alle <p>-Elemente, die den Text "is" enthalten
:empty	$(":empty")	Wählen Sie alle leeren Elemente, d.h. Elemente ohne Kindknoten (einschließlich Text)
:has()	$("p:has(span)")	Wählen Sie alle <p>-Elemente, die mindestens einen <span>-Element enthalten
:parent	$(":parent")	Wählen Sie alle Elemente mit mindestens einem Kindknoten (Element oder Text)

Selektoren	Beispiel	Beschreibung
:input	$(":input")	Wählen Sie alle Eingabe-, Textbereich-, Auswahl- und Button-Elemente
:text	$(":text")	Wählen Sie alle Eingabe-Elemente mit dem Typ "text"
:password	$(":password")	Wählen Sie alle Eingabe-Elemente mit dem Typ "password"
:radio	$(":radio")	Wählen Sie alle Eingabe-Elemente mit dem Typ "radio"
:checkbox	$(":checkbox")	Wählen Sie alle Eingabe-Elemente mit dem Typ "checkbox"
:button	$(":button")	Wählen Sie alle Eingabe- und Button-Elemente mit dem Typ "button"
:submit	$(":submit")	Wählen Sie alle Eingabe- und Button-Elemente mit dem Typ "submit"
:reset	$(":reset")	Wählen Sie alle Eingabelemente und Schaltflächen mit dem Typ "reset"
:image	$(":image")	Wählen Sie alle Eingabelemente mit dem Typ "image"
:file	$(":file")	Wählen Sie alle Eingabelemente mit dem Typ "file"
:enabled	$(":enabled")	Wählen Sie alle aktiven Elemente
:disabled	$(":disabled")	Wählen Sie alle deaktivierten Elemente
:selected	$(":selected")	Wählen Sie alle ausgewählten Elemente, geeignet nur für <option>-Elemente
:checked	$(":checked")	Wählen Sie alle ausgewählten oder ausgewählten Elemente, geeignet für Kontrollkästchen, Optionsfelder und Auswahllemente
:focus	$(":focus")	Wählen Sie das Element aus, das im Fokus ist

Selektoren	Beispiel	Beschreibung
:hidden	$("p:hidden")	Wählen Sie alle versteckten <p>-Elemente
:visible	$("p:visible")	Wählen Sie alle sichtbaren <p>-Elemente