12.2 Selektoren und Methoden
Selektoren dienen der Auswahl des Elements, auf das sich der jQuery-Code bezieht. In diesem Abschnitt stelle ich Ihnen einige Möglichkeiten für jQuery-Selektoren vor.
Außerdem lernen Sie verschiedene Methoden kennen:
In Abbildung 12.5 sehen Sie vier verschiedene div-Elemente. Die Betätigung eines der angegebenen Hyperlinks führt zu Änderungen bei einem oder mehreren div-Elementen.
Abbildung 12.5 Selektoren und Methoden
Es folgt der Code:
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>jQuery, Selektoren und Methoden</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function()
{
$("#idLink1").click(function(){
$("div").css({"width":"300px"}); });
[… weitere jQuery-Funktionen, siehe Erläuterung …]
});
</script>
<style>
div {width:250px; height:50px; background-color:#b0b0b0;}
#idHell {width:250px; height:50px; background-color:#d0d0d0;}
.dunkel {width:250px; height:50px; background-color:#909090;}
</style>
</head>
<body>
<div>div-Element, ohne id, ohne class</div>
<div id="idHell">Element mit id 'hell'</div>
<div class="dunkel">1. div-Element mit class 'dunkel'</div>
<div class="dunkel">2. div-Element mit class 'dunkel'</div>
<p><a id="idLink1" href="#"> 1: CSS für div-Elemente</a><br>
[… weitere Hyperlinks, siehe Abbildung …]
</body></html>
Listing 12.2 Datei »jq_selektieren.htm«
Es gibt vier div-Elemente:
-
Das erste Element hat keine ID. Ihm wird keine CSS-Klasse zugeordnet.
-
Dem dritten und dem vierten Element wird jeweils die CSS-Klasse dunkel zugeordnet.
Darüber sehen Sie die CSS-Vorgabe für die Darstellung der Elemente:
-
div-Elemente allgemein haben eine Größe von 250 mal 50 Pixeln und sind mittelgrau.
-
Das Element mit der ID idHell ist hellgrau.
-
Alle Elemente der CSS-Klasse dunkel sind dunkelgrau.
Es folgt die Auswirkung der Betätigung der Hyperlinks. Ein Klick auf den ersten Hyperlink führt zu diesem Code:
$("#idLink1").click(function(){
$("div").css({"width":"300px"}); });
Es wird die Methode css() für alle div-Elemente ausgeführt. Diese Methode ändert CSS-Eigenschaften. Hier wird der Eigenschaft width der Wert 300 Pixel zugewiesen. Ein Eigenschaft-Wert-Paar geben Sie im JSON-Format an.
Im vorliegenden Programm sind die Hyperlinks und die zugehörigen Klick-Methoden alle gleichartig aufgebaut. Nachfolgend werde ich nur noch die Auswirkung des jeweiligen Klicks beschreiben:
Hyperlink 2 ändert das Element mit der ID idHell:
$("#idHell").css({"width":"350px"}); });
Hyperlink 3 ändert alle Elemente mit der CSS-Klasse dunkel:
$(".dunkel").css({"width":"400px"}); });
Sie können mehrere Selektoren in einer Collection zusammenfassen: Hyperlink 4 ändert das Element mit der ID idHell und alle Elemente mit der CSS-Klasse dunkel:
$("#idHell, .dunkel").css({"width":"450px"}); });
Mehrere Eigenschaft-Wert-Paare geben Sie ebenfalls im JSON-Format an, jeweils durch Kommata voneinander getrennt. Hyperlink 5 ändert die Hintergrundfarbe und die Breite für das Element mit der ID idHell:
$("#idHell").css({"background-color":"#f0f0f0", "width":"500px"}); });
Die Methode html() dient dem Ändern des Textes inklusive des HTML-Codes; Hyperlink 6 sorgt für einen neuen Text in Fettdruck für das Element mit der ID idHell:
$("#idHell").html("<b>HTML neu</b>"); });
Die Methode text() dient dem Ändern des Textes ohne Berücksichtigung des HTML-Codes: Hyperlink 7 dient dazu, einen neuen Text in das Element mit der ID idHell zu schreiben. Versehentlich enthaltene HTML-Elemente werden ebenfalls als Text ausgegeben:
$("#idHell").text("<b>Text neu</b>"); });
Durch Verkettung können Sie mehrere Methoden für einen Selektor direkt nacheinander ausführen. Außerdem können Sie einen CSS-Wert mithilfe der beiden Operatoren += und -= relativ verändern: Hyperlink 8 führt die Methoden css() und html() für das Element mit der ID idHell aus. In der Methode css() wird die Breite pro Klick um 20 Pixel erhöht:
$("#idHell").css({"width":"+=20px"}).html("CSS und HTML neu");});