close

DOM-manipulation med jQuery -Teknikker og eksempler

DOM-manipulation med jQuery giver dig mulighed for at ændre, tilføje, fjerne eller interagere med data på en webside ved at målrette mod DOM-strukturen. jQuery giver praktiske metoder og funktioner til at udføre DOM-manipulationsopgaver.

Her er forklaringer til hvert afsnit sammen med specifikke eksempler:

 

Valg af elementer

  • $("p"): Vælg alle <p> elementer på siden.
  • $(".myClass"): Vælg alle elementer med klassen myClass.
  • $("#myElement"): Vælg elementet med ID'et myElement.
  • $("parentElement").find(".childElement"): Vælg alle underordnede elementer med klassen childElement i parentElement.

Eksempel:

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

 

Ændring af indhold

  • $("#myElement").html("<b>Hello World</b>"): Indstil HTML-indholdet for elementet med ID'et myElement.
  • $("p").text("New text"): Indstil tekstindholdet for alle <p> elementer.

Eksempel:

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

 

Tilføjelse og fjernelse af elementer

  • $("ul").append("<li>New item</li>"): Tilføj et <li> element i slutningen af ​​den uordnede liste( <ul>).
  • $(".myClass").remove(): Fjern alle elementer med klassen myClass fra siden.

Eksempel:

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

 

Ændring af attributter og klasser

  • $("img").attr("src", "new-image.jpg"): Skift src attributværdien for alle <img> elementer.
  • $("#myElement").addClass("newClass"): Tilføj klassen newClass til elementet med ID'et myElement.
  • $("#myElement").removeClass("oldClass"): Fjern klassen oldClass fra elementet med ID'et myElement.

Eksempel:

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

 

Begivenhedshåndtering

$("button").click(function() { }): Registrer en hændelseshåndteringsfunktion, når <button> der klikkes på et element.

Eksempel:

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

 

Effekter og animationer

  • $("#myElement").hide(): Skjul elementet med ID myElement.
  • $("#myElement").show(): Vis elementet med ID myElement.
  • $("#myElement").fadeOut(): Udfør en fade-out-effekt på elementet med ID'et myElement.
  • $("#myElement").fadeIn(): Udfør en fade-in-effekt på elementet med ID'et myElement.

Eksempel:

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