close

DOM-manipulation med jQuery -Tekniker och exempel

DOM-manipulation med jQuery låter dig ändra, lägga till, ta bort eller interagera med data på en webbsida genom att rikta in dig på DOM-strukturen. jQuery tillhandahåller praktiska metoder och funktioner för att utföra DOM-manipulationsuppgifter.

Här är förklaringar för varje avsnitt tillsammans med specifika exempel:

 

Att välja element

  • $("p"): Markera alla <p> element på sidan.
  • $(".myClass"): Välj alla element med klassen myClass.
  • $("#myElement"): Välj elementet med ID myElement.
  • $("parentElement").find(".childElement"): Välj alla underordnade element med klassen childElement inom parentElement.

Exempel:

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

 

Ändra innehåll

  • $("#myElement").html("<b>Hello World</b>"): Ställ in HTML-innehållet för elementet med ID:t myElement.
  • $("p").text("New text"): Ställ in textinnehållet för alla <p> element.

Exempel:

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

 

Lägga till och ta bort element

  • $("ul").append("<li>New item</li>"): Lägg till ett <li> element i slutet av den oordnade listan( <ul>).
  • $(".myClass").remove(): Ta bort alla element med klassen myClass från sidan.

Exempel:

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

 

Ändra attribut och klasser

  • $("img").attr("src", "new-image.jpg"): Ändra src attributvärdet för alla <img> element.
  • $("#myElement").addClass("newClass"): Lägg till klassen newClass i elementet med ID:t myElement.
  • $("#myElement").removeClass("oldClass"): Ta bort klassen oldClass från elementet med ID myElement.

Exempel:

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

 

Eventhantering

$("button").click(function() { }): Registrera en händelsehanterarfunktion när ett <button> element klickas.

Exempel:

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

 

Effekter och animationer

  • $("#myElement").hide(): Dölj elementet med ID myElement.
  • $("#myElement").show(): Visa elementet med ID myElement.
  • $("#myElement").fadeOut(): Utför en uttoningseffekt på elementet med ID myElement.
  • $("#myElement").fadeIn(): Utför en intoningseffekt på elementet med ID myElement.

Exempel:

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