Hauptinhalt
Programmierung
Kurs: Programmierung > Lerneinheit 7
Lesson 3: DOM-Modifikationen mit jQueryWiederholung: DOM-Modifikationen mit jQuery
Wenn du mit der Funktion jQuery eine Collection von Elementen gefunden hast, kannst du diese mit verschiedenen Methoden verändern.
Verändere das innere HTML mit
html()
:$("h1").html("Ich <strong>liebe</strong> Katzen");
(Siehe Beispiel)Verändere Attribute mit
attr()
:$(".dog-pic").attr("src", "dog.jpg");
$(".google-link").attr("href", "http://www.google.com");
(Siehe Beispiel)Verändere CSS Styles mit
css()
:$("h1").css("font-family", "monospace");
$("h1").css({"font-family": "monospace", "color": "red"});
(Siehe Beispiel)Du kannst ebenfalls neue Elemente erstellen, indem du der Funktion jQuery einen HTML-String übergibst:
var $p = $("<p>");
Du kannst sogar das ganze HTML inklusive Inhalt der Tags, Attributen und Styles übergeben.
var $p = $('<p style="color:red;">I mag Menschen welche Katzen mögen.</p>');
Sobald du ein Element erstellt hast, kannst du es mit den oben gezeigten Methoden verändern:
$p.addClass("warning");
Und dann kannst du es einem bestehen Element anhängen mit der Funktion
append()
:$("#main-div").append($p);
(Siehe Beispiel)Du kannst es auch einer Webseite hinzufügen mit
prepend()
(Siehe Beispiel) oder appendTo()
(Siehe Beispiel).Lies die jQuery-Dokumentation für weitere Details zu den einzelnen Methoden mit den oben verlinkten Methodennamen. Wir können hier nicht alles behandeln und da die besten Praktiken der Web-Entwicklung sich schnell ändern, musst du dir angewöhnen, dich mit dem Lesen der Dokumentation auf dem neuesten Stand der Entwicklung zu halten. Es ist gut, damit gleich jetzt zu beginnen!
Willst du an der Diskussion teilnehmen?
Noch keine Beiträge.