Ä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.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
