SUCKUP.de

Crashkurs: jQuery-Selektoren

voku
This blog post has been published on 2011-10-16 and may be out of date.

Was ist jQuery?

Es ist eine Vereinfachung von JavaScript durch ein sogenanntes Framework, welches uns lästige Routinearbeit beim Programmieren abnimmt und einen einfachen Zugang zu schwer nutzbaren JavaScript-Methoden bietet.

 

JavaScript mit & ohne jQuery!

Für den Einstieg in das Thema möchte ich ein Beispiel mit JavaScript und den selben Effekt via jQuery zeigen.

JavaScript: (JavaScript_test1.html)

<html>
<head>
<title>JavaScript</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script tyle="text/javascript">
window.onload = function() {
	var elements = document.getElementById("box").getElementsByTagName("p");
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].firstChild.data == "Zweiter Absatz") {
			elements[i].className = "green";
		}
	}
}
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>
Mit ein wenig Programmiererfahrung kann man den Quelltext direkt lesen und wer dieses Beispiel nicht versteht, sollte sich auf der folgenden Webseite umschauen > de.selfhtml.org/javascript/

 

jQuery: (jQuery_test1.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p:contains('Zweiter Absatz')").css({ 'color' : '#009933' });
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

Wie man an diesem Beispiel erkennen kann, sind die “Selektoren” ein sehr wichtiger / umfangreicher Teil von jQuery.

 

jQuery-Selektoren

Als nächstes möchte ich einige jQuery-Selektoren und Methoden zum Auswählen von HTML-Elementen zeigen. Doch zuerst sollten wir die selben Werkzeuge zum ausführen & debuggen von JavaScript (jQuery) nutzen. Da JavaScript direkt im Browser kompiliert wird, könnten wir die Code-Zeilen auch direkt im Browser ausführen: Firefox + Firebug oder z.B. hier html5snippet.net

Firebug zum debuggen
JavaScript via Firebug ausführen

 

Selektiert alle HTML-Elemente von einem bestimmten Typ. -> z.B.: $(“p”)

(jQuery_selektoren1.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert HTML-Elemente mit einer bestimmten ID. -> z.B.: $(“#box”)

(jQuery_selektoren2.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#box").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

PS: ID’s müssen auf einer HTML-Seite einmalig sein!

 

Selektiert HTML-Elemente mit einer bestimmten CSS-Klasse. -> z.B.: $(“.box”)

(jQuery_selektoren3.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div div .box").addClass("green");
});
</script>
</head>
<body>
<div class="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
<div>
	<div>
		<div class="box">
			<p>Erster Absatz</p>
			<p>Zweiter Absatz</p>
			<p>Dritter Absatz</p>
		</div>
	</div>
</div>
</body>
</html>

Hier wurde die Auswahl noch einmal via HTML-Tags (div) eingeschränkt.

 

Selektiert HTML-Elemente und die Auswahl weiterer Selektoren. -> z.B.: $(“div + .box”)

(jQuery_selektoren4.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div + .box").addClass("green");
});
</script>
</head>
<body>
<div class="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
<div>
	<div>
		<div class="box">
			<p>Erster Absatz</p>
			<p>Zweiter Absatz</p>
			<p>Dritter Absatz</p>
		</div>
	</div>
</div>
<div class="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle HTML-Elemente X, die Kindknoten eines Elements Y sind. -> $(“X > Y”) -> z.B: $(“div > p”)

(jQuery_selektoren5.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div > p").addClass("green");
});
</script>
</head>
<body>
<div>
	<span>
		<p>Erster Absatz</p>
		<p>Zweiter Absatz</p>
		<p>Dritter Absatz</p>
	</span>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle folgenden Geschwisterknoten eines Elements X, die den Typ Y besitzen. -> $(“X ~ Y”) -> z.B: $(“#start ~ p”)

(jQuery_selektoren6.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#start ~ p").addClass("green");
});
</script>
</head>
<body>
<div>
	<p id="start">Erster Absatz</p>
	<p>Zweiter Absatz<p>
	<div>
		<p>Dritter Absatz<p>
	</div>
	<p>Vierter Absatz</p>
</div>
</body>
</html>

 

Selektiert die Kombination aus allen durch die Selektoren gewählten Knoten. -> z.B: $(“#p1, #p2, #p3”)

(jQuery_selektoren7.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#p1, #p2, #p3").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p id="p1">Erster Absatz</p>
	<p id="p2">Zweiter Absatz</p>
	<p id="p3">Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert bestimmte HTML-Kind-Tags. -> z.B: $(“#box”).find(“p”)

(jQuery_selektoren8.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#box").find("p").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

(jQuery_selektoren9.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#box").find("*").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert über Attribute. -> z.B: $(“div[id]”)

(jQuery_selektoren10.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div[id]").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert über Attribute und dessen Werte. -> z.B: $(“div[id=’box’]”)

(jQuery_selektoren11.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div[id='box']").addClass("green");
});
</script>
</head>
<body>
<div id="box1">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert über HTML-Tags und dessen Anordnung in der HTML-Struktur. -> z.B: $(“div:first”)

(jQuery_selektoren12.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:first").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

(jQuery_selektoren13.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:last").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle Elemente mit geradem Index innerhalb der aktuellen Auswahl. (0 ist even) -> z.B: $(“div p:even”)

(jQuery_selektoren14.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:even").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle Elemente mit ungeradem Index innerhalb der aktuellen Auswahl. (1 ist odd) -> z.B: $(“div p:odd”)

(jQuery_selektoren15.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:odd").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle Elemente die nicht zutreffen. -> z.B: $(“div:not(:last)”)

(jQuery_selektoren16.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:not(:last)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert Elemente, die innerhalb der aktuellen Auswahl einen bestimmten Index haben. -> z.B: $(“div p:eq(1)”)

(jQuery_selektoren17.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:eq(1)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die innerhalb der aktuellen Auswahl einen bestimmten größeren Index haben. -> z.B: $(“div p:gt(1)”)

(jQuery_selektoren18.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:gt(1)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die innerhalb der aktuellen Auswahl einen bestimmten kleineren Index haben. -> z.B: $(“div p:lt(1)”)

(jQuery_selektoren19.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:lt(1)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die sich innerhalb der aktuellen Auswahl “bewegen”. -> z.B: $(“div p:animated”)

(jQuery_selektoren20.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	function run() {
		$("#test").slideToggle("slow",run);
	}
	run();

	$("div p:animated").addClass("green");
});
</script>
</head>
<body>
<div>
	<p id="test">Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die mindestens ein Element enthalten, auf die der Selektor zutrifft. -> z.B: $(“div:has(‘span’)”)

(jQuery_selektoren21.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:has('span')").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die Elternelement eines anderen Knotens sind. (also sowohl von Element- als auch Textknoten) -> z.B: $(“p:parent”)

(jQuery_selektoren22.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p:parent").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p></p>
	<p>Zweiter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die über ein bestimmtes Attribut verfügen. -> z.B: $(“[name]”)

(jQuery_selektoren23.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("[name]").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Erster_Absatz">Erster Absatz</p>
	<span name="Zweiter_Absatz">Zweiter Absatz</span>
	<p name="Dritter_Absatz">Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die über ein bestimmtes Attribut mit einem bestimmten Wert verfügen. -> z.B: $(“span[name=’Zweiter_Absatz’]”)

(jQuery_selektoren24.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span[name='Zweiter_Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Erster_Absatz">Erster Absatz</p>
	<span name="Zweiter_Absatz">Zweiter Absatz</span>
	<p name="Dritter_Absatz">Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert ein Element, wenn das Attribut einen bestimmten Wert, oder den bestimmten Wert mit einem “Bindestrich” abgetrennten String folgt -> z.B: $(“p[name|=’Absatz’]”)

(jQuery_selektoren25.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name|='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz-Erster">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz-Vierter">Vierter Absatz</p>
</div>
</body>

 

Selektiert ein Element, wenn der Wert des benannten Attributs den übergebenen String als Substring enthält. -> z.B: $(“p[name*=’Absatz’]”)

(jQuery_selektoren26.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name*='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz-Erster">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz-Vierter">Vierter Absatz</p>
</div>
</body>

 

Selektiert ein Element, wenn der Wert des benannten Attributs durch Leerzeichen abgetrennten Teilwert des benannten Attributes oder dem vollständigen Wert entspricht. -> z.B: $(“p[name~=’Absatz’]”)

(jQuery_selektoren27.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name~='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz Erster">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz Vierter">Vierter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die nicht einem bestimmten Attribut entsprechen. -> z.B: $(“p[name!=’Absatz’]”)

(jQuery_selektoren28.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name!='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz Vierter">Vierter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die mit einem bestimmten Attribut beginnen. -> z.B: $(“p[name^=’Absatz’]”)

(jQuery_selektoren29.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name^='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Erster_Absatz">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="VierterAbsatz">Vierter Absatz</p>
</div>
</body>

 

Selektiert alle Knoten, die der erste (letzte) Kindknoten ihres Elternelements sind. -> z.B: $(“p[name^=’Absatz’]”)

(jQuery_selektoren30.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p:first-child, p:last-child").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt ein neues jQuery-Objekt aus dem unmittelbar folgendem Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“p”).next(‘span’)

(jQuery_selektoren31.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").next('span').addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

(jQuery_selektoren34.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").next().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Holt die Kindelemente jedes Elements der Auswahl. -> z.B: $(“div”).children()

(jQuery_selektoren32.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div").children().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt eine neue Auswahl aus den Elternknoten jedes Elements der aktuellen Auswahl. -> z.B: $(“span”).parent()

(jQuery_selektoren33.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").parent().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt ein neues jQuery-Objekt aus den unmittelbar vorherigen Geschwisterknoten des Elemente der aktuellen Auswahl. -> z.B: $(“span”).prev()

(jQuery_selektoren35.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").prev().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt ein neues jQuery-Objekt aus allen folgenden Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“p”).nextAll()

(jQuery_selektoren36.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").nextAll().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt ein neues jQuery-Objekt aus allen vorherigen Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“p”).prevAll()

(jQuery_selektoren37.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").prevAll().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Bildet eine Auswahl aus allen Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“span”).siblings()

(jQuery_selektoren38.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").siblings().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

 

(jQuery_selektoren39.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").siblings().add("span").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

 

Bildet auf der Decendant-Achse der Elemente der aktuellen Auswahl eine neue Auswahl aus Elementen, die dem angegebenen Selektor entsprechen. -> z.B: $(“div p”).filter(‘:contains(Erster Absatz)’)

(jQuery_selektoren40.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p").filter(':contains(Erster Absatz)').addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

 

Bildet auf der Decendant-Achse der Elemente der aktuellen Auswahl eine neue Auswahl aus Elementen, die dem angegebenen Selektor nicht entsprechen. -> z.B: $(“div p”).not(‘:contains(Erster Absatz)’)

(jQuery_selektoren41.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p").not(':contains(Erster Absatz)').addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

 

(jQuery_selektoren42.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	var auswahl = $("div p");

	auswahl.clone().appendTo('#test');
	auswahl.not(':contains(Erster Absatz)').addClass("green").end().css({ 'color' : 'red', 'background-color' : 'black' }).last().css({ 'color' : 'yellow'});
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<br>
<div id="test"></div>
</body>

 

jQuery-Beispiel

Zum Schluss möchte ich noch ein einfaches Beispiel mit Selektoren zeigen …

(jQuery-Selektoren_test.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>jQuery-Selektoren | Beispiel</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<h1>TEST: JPEG + PNG</h1>

<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_PNG.png" alt="PNG: Original > 10 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_PNG_punypng.png" alt="PNG: Optimized > 9 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_JPEG_100.jpg" alt="JPEG: 100% Qualität > 27 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_JPEG_80.jpg" alt="JPEG: 80% Qualität > 9 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_JPEG_60.jpg" alt="JPEG: (60% Qualität > 7 KB" height="54">
</div>

<br clear:both><div style="float:left">
	<img style="margin-top: 50px; margin-left: -450px;" id="refMain" src=""><br>
	<div style="width: 420px; margin-left: -450px;" id="imageText"></div>
</div>

<script type="text/javascript">
$('div.pic_all').css({ 'border-color' : '#ffffff', '-moz-opacity' :'0.4' });
$(document).ready(function() {
	$('div.pic_all').each(function() {
		$(this).mouseenter(function() {
			$(this).css('border-color', '#EE398C').css('-moz-opacity', '1');
			$('div.pic_all').css({ 'border-color' : '#ffffff', '-moz-opacity' :'0.4' });
			$(this).css('border-color', '#EE398C').css('-moz-opacity', '1');
			var src_new = $(this).find('img').attr('src');
 			$('#refMain').attr('src', src_new);
 			var text_new = $(this).find('img').attr('alt');
 			$('#imageText').html(text_new);
		});
		$(this).mouseleave(function() {
			$(this).css('border-color', '#ffffff').css('-moz-opacity', '0.4');
			if ($(this).find('img').attr('src') == $('#refMain').attr('src')) {
				$(this).css('border-color', '#EE398C').css('-moz-opacity', '1');
			}
		});
 	});
});
</script>

</body>
</html>

Ähnliche Beiträge:

jQuery Performance jQuery: width() in Prozent