jQuery Schnellstart – Getter & Setter
In diesem Tutorial lernst Du, wie Du den Inhalt und den Attributwert des Elements abrufen oder setzen kannst.
Inhalte und Werte holen (get) oder setzen (set)
Einige jQuery-Methoden können verwendet werden, um einer Auswahl entweder einen Wert zuzuweisen oder diesen auszulesen.
Einige dieser Methoden sind text(), html(), attr() und val().
Wenn diese Methoden ohne Argument aufgerufen werden, wird sie als Getter bezeichnet, weil sie den Wert des Elements erhält (oder ausliest). Wenn diese
Wenn Methoden mit einem Wert als Argument aufgerufen werden, werden sie als Setter bezeichnet, weil sie diesen Wert setzen (oder zuweisen).
Schauen wir uns die o.g. Methoden im Detail an.
jQuery text() Methode
Die text()-Methode wird verwendet, um den Textinhalt der ausgewählten Elemente zu erhalten oder um den Textinhalt der ausgewählten Elemente zu setzen.
Inhalt mit der text() Methode erhalten (Get)
Das folgende Code-Beispiel zeigt dir, wie Du den Textinhalt von Absätzen erhältst:
<script>
$(document).ready(function() {
$(".button1").click(function() {
// Liest den gesamten Text aus
var str = $("p").text();
alert(str);
});
$(".button2").click(function() {
// Liest den ersten <p>-Text aus
var str = $("p:first").text();
alert(str);
});
$(".button3").click(function() {
// Liest den letzten <p>-Text aus
var str = $("p.letzter").text();
alert(str);
});
});
</script>
Hinweis: Die text() ruft die Werte aller ausgewählten Elemente ab, während die anderen Getter wie html(), attr() und val() nur den Wert des ersten Elements in der Auswahl zurückgeben.
Inhalt mit text() setzen (Set)
Das folgende Beispiel zeigt dir, wie Du den Textinhalt eines Absatzes festlegst:
<script>
$(document).ready(function(){
$(".button1").click(function() {
// Fügt Text zur CSS-Klasse "leer" hinzu
$("p.leer").text("Da bin ich.");
});
$(".button2").click(function() {
// Ändert den Text im ersten Paragraphen
$("p:first").text("Das ist ein neuer Text.");
});
$(".button3").click(function() {
// Änderte alle Texte mit dem p-Tag
$("p").text("Ich lerne jQuery.");
});
});
</script>
Hinweis: Wenn die jQuery-Methoden text(), html(), attr() und val() mit einem Wert als Argument aufgerufen werden, wird dieser Wert auf jedes übereinstimmende Element gesetzt.
jQuery html() Methode
Die jQuery html()-Methode wird verwendet, um den HTML-Inhalt der Elemente abzurufen oder zu setzen.
HTML-Inhalt mit der html()-Methode erhalten (Get)
Das folgende Beispiel zeigt Dir, wie Du sowohl den HTML-Inhalt der Absatzelemente als auch einen <div> Elementcontainer erhalten kannst:
<script>
$(document).ready(function() {
$(".button1").click(function() {
var str = $("p").html();
alert(str);
});
$(".button2").click(function() {
var str = $("#container").html();
alert(str);
});
});
</script>
Hinweis: Wenn mehrere Elemente ausgewählt sind, gibt die html()-Methode nur den HTML-Inhalt des ersten Elements aus der Menge der übereinstimmenden Elemente zurück.
HTML-Inhalte mit html() festlegen (Set)
Das folgende Beispiel zeigt Dir, wie Du den HTML-Inhalt des Elements <body> einstellst:
<script>
$(document).ready(function(){
$("button").click(function(){
$("body").html("<p>Hallo LerneProgrammieren!</p>");
});
});
</script>
jQuery attr() Methode
Du kannst die Methode attr() verwenden, um entweder den Wert des Attributs eines Elements abzurufen oder ein oder mehrere Attribute für das ausgewählte Element zu setzen.
Attributwert mit der Methode attr() abrufen (Get)
Das folgende Beispiel zeigt Ihnen, wie Du das href-Attribut des Hyperlinks erhältst, d.h. sowohl das <a>-Element als auch das alt-Attribut eines <img>-Elements:
<script>
$(document).ready(function(){
$(".button1").click(function(){
var str = $("a").attr("href");
alert(str);
});
$(".button2").click(function(){
var str = $("img#bild").attr("alt");
alert(str);
});
});
</script>
Hinweis: Wenn mehrere Elemente ausgewählt sind, gibt die Methode attr() nur den Attributwert des ersten Elements aus der Menge der übereinstimmenden Elemente zurück.
Attribute mit der Methode attr() setzen (Set)
Das folgende Beispiel zeigt Dir, wie Du das angekreuzte Attribut des Ankreuzfeldes setzen kannst.
<script>
$(document).ready(function(){
$("button").click(function(){
$('input[type="checkbox"]').attr("checked", "checked");
});
});
</script>
Hinweis: Die Methode attr() ermöglicht es Dir auch, mehrere Attribute gleichzeitig zu setzen.
jQuery val() Methode
Die jQuery val()-Methode wird hauptsächlich verwendet, um den aktuellen Wert der HTML-Formularelemente wie <input>, <select> und <textarea> zu erhalten oder zu setzen.
Formularfeldern mit val() abrufen (Get)
Das folgende Beispiel zeigt Dir, wie Du die Werte von Formularsteuerelementen erhalten kannst:
<script>
$(document).ready(function(){
$("button.get-vorname").click(function(){
var name = $("#vorname").val();
alert(name);
});
$("button.get-bestellhinweis").click(function(){
var comment = $("#bestellhinweis").val();
alert(comment);
});
$("button.get-stadt").click(function(){
var city = $("#stadt").val();
alert(city);
});
});
</script>
Hinweis: Wenn mehrere Formelemente ausgewählt sind, gibt die val()-Methode nur den Wert des ersten Elements aus der Menge der übereinstimmenden Elemente zurück.
Formularfeldern mit der val()-Methode setzen (Set)
Das folgende Beispiel zeigt Dir, wie Du die Werte der Formularsteuerelemente einstellen kannst:
<script>
$(document).ready(function(){
$("button").click(function(){
var text = $(this).text();
$('input[type="text"]').val(text);
});
});
</script>
Fazit
In dieser Lektion hast Du gelernt, wie Du den Inhalt und den Attributwert von Elementen abrufen oder setzen kannst. Einige dieser Methoden sind text(), html(), attr() und val(). Probiere sie alle aus, bevor Du zur nächsten Lektion übergehst. Alle hier aufgeführten Methoden wirst Du ständig beim coden mit jQuery benötigen.
In der nächsten Lektion lernst Du, wie Du Inhalte & Elemente mit jQuery hinzufügst.