Ändern von Inhalten durch jQuery
Wir können nicht nur Inhalte auslesen, sondern genauso auch durch jQuery beeinflussen.
Der Inhalt des Attributs title wird angezeigt, wenn wir mit der Maus über dem Link sind und kurz warten.
Jetzt wollen wir den Link und den href ändern.
<script>
$(document).ready(function(){
/* Hier der jQuery-Code */
$('a').attr({title: 'jQuery-Kurs', href: 'https://www.html-seminar.de/jquery.htm'});
});
</script>
Genauso könnten wir natürlich Bilder ändern. Im HTML-TAG „img“ den Inhalt des Attributs „src“ verändern und es wird ein anderes Bild angezeigt.
Wenn wir an die Inhalte vom Text ran wollen, funktioniert das über .html() – wir ändern im folgenden Beispiel die Überschrift über jQuery
$('h1').html('mit jQuery Inhalte ändern');
Und im kompletten Quellcode:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>jQuery Beispiel: einbinden und erste Anweisung</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
/* Hier der jQuery-Code */
$('h1').html('mit jQuery Inhalte ändern');
});
</script>
</head>
<body>
<h1>jQuery Beispiel: einbinden und erster Befehl</h1>
<a href="https://www.html-seminar.de/" title="HTML, CSS u. jQuery lernen">https://www.HTML-Seminar.de</a>
<p>Erster Absatz</p>
<p>Zweiter Absatz</p>
</body>
</html>
Jetzt können wir auch noch Variablen einsetzen und Beispielsweise den Inhalt von <p> durch den Inhalt von <h1> ersetzen und <h1> bekommt den alten Inhalt von <p>. Nachdem wir 2 Absätze haben und das <p> allgemein über jQuery ansprechen wird spannend ist was genommen wird: der erste Absatz oder der zweite Absatz
<script>
$(document).ready(function(){
/* Hier der jQuery-Code */
var inhaltUeberschrift = $('h1').html();
var inhaltAbsatz = $('p').html();
$('h1').html(inhaltAbsatz);
$('p').html(inhaltUeberschrift);
});
</script>
Der erste Absatz gewinnt bei der allgemeinen Auswahl durch jQuery. Wir müssen also genau sagen, was wir wollen. Und hier kommen jetzt die jQuery-Selektoren zum Einsatz, die im folgenden Kapitel eingeführt werden.