close

DOM-Manipulation mit jQuery – Techniken und Beispiele

Mit der DOM-Manipulation mit jQuery können Sie Daten auf einer Webseite ändern, hinzufügen, entfernen oder mit ihnen interagieren, indem Sie auf die DOM-Struktur abzielen. jQuery bietet praktische Methoden und Funktionen zur Durchführung von DOM-Manipulationsaufgaben.

Hier finden Sie Erläuterungen zu jedem Abschnitt sowie konkrete Beispiele:

 

Elemente auswählen

  • $("p") <p>: Alle Elemente auf der Seite auswählen .
  • $(".myClass"): Alle Elemente mit der Klasse auswählen myClass.
  • $("#myElement"): Wählen Sie das Element mit der ID aus myElement.
  • $("parentElement").find(".childElement"): Wählen Sie alle untergeordneten Elemente mit der Klasse childElement innerhalb aus parentElement.

Beispiel:

$("p").css("color", "red");

 

Inhalte ändern

  • $("#myElement").html("<b>Hello World</b>"): Legen Sie den HTML-Inhalt für das Element mit der ID fest myElement.
  • $("p").text("New text"): Legen Sie den Textinhalt für alle <p> Elemente fest.

Beispiel:

$("p").text("New paragraph");

 

Elemente hinzufügen und entfernen

  • $("ul").append("<li>New item</li>"): Fügen Sie ein <li> Element am Ende der ungeordneten Liste hinzu( <ul>).
  • $(".myClass").remove(): Alle Elemente mit der Klasse myClass von der Seite entfernen.

Beispiel:

$("ul").append("<li>Item 4</li>");

 

Attribute und Klassen ändern

  • $("img").attr("src", "new-image.jpg"): Ändern Sie den src Attributwert für alle <img> Elemente.
  • $("#myElement").addClass("newClass"): Fügen Sie die Klasse newClass dem Element mit der ID hinzu myElement.
  • $("#myElement").removeClass("oldClass"): Entfernen Sie die Klasse oldClass aus dem Element mit der ID myElement.

Beispiel:

$("img").attr("alt", "New Image");

 

Handhabung des Events

$("button").click(function() { }): Registrieren Sie eine Event-Handler-Funktion, wenn auf ein <button> Element geklickt wird.

Beispiel:

$("button").click(function() {  
  alert("Button clicked!");  
});

 

Effekte und Animationen

  • $("#myElement").hide(): Verstecke das Element mit der ID myElement.
  • $("#myElement").show(): Zeigt das Element mit der ID an myElement.
  • $("#myElement").fadeOut(): Führt einen Ausblendeffekt auf das Element mit der ID aus myElement.
  • $("#myElement").fadeIn(): Führt einen Einblendeffekt auf das Element mit der ID aus myElement.

Beispiel:

$("#myElement").fadeOut(1000, function() {  
  console.log("Fade out complete");  
});