close

DOM-manipulasjon med jQuery -teknikker og eksempler

DOM-manipulasjon med jQuery lar deg endre, legge til, fjerne eller samhandle med data på en nettside ved å målrette mot DOM-strukturen. jQuery tilbyr praktiske metoder og funksjoner for å utføre DOM-manipulasjonsoppgaver.

Her er forklaringer for hver del sammen med spesifikke eksempler:

 

Velge elementer

  • $("p"): Velg alle <p> elementene på siden.
  • $(".myClass"): Velg alle elementene med klassen myClass.
  • $("#myElement"): Velg elementet med ID myElement.
  • $("parentElement").find(".childElement"): Velg alle underordnede elementer med klassen childElement i parentElement.

Eksempel:

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

 

Endring av innhold

  • $("#myElement").html("<b>Hello World</b>"): Angi HTML-innholdet for elementet med ID-en myElement.
  • $("p").text("New text"): Angi tekstinnholdet for alle <p> elementer.

Eksempel:

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

 

Legge til og fjerne elementer

  • $("ul").append("<li>New item</li>"): Legg til et <li> element på slutten av den uordnede listen( <ul>).
  • $(".myClass").remove(): Fjern alle elementer med klassen myClass fra siden.

Eksempel:

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

 

Endre attributter og klasser

  • $("img").attr("src", "new-image.jpg"): Endre src attributtverdien for alle <img> elementene.
  • $("#myElement").addClass("newClass"): Legg klassen newClass til elementet med IDen myElement.
  • $("#myElement").removeClass("oldClass"): Fjern klassen oldClass fra elementet med ID myElement.

Eksempel:

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

 

Eventhåndtering

$("button").click(function() { }): Registrer en hendelsesbehandlerfunksjon når et <button> element klikkes.

Eksempel:

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

 

Effekter og animasjoner

  • $("#myElement").hide(): Skjul elementet med ID myElement.
  • $("#myElement").show(): Vis elementet med ID myElement.
  • $("#myElement").fadeOut(): Utfør en uttoningseffekt på elementet med ID myElement.
  • $("#myElement").fadeIn(): Utfør en inntoningseffekt på elementet med ID myElement.

Eksempel:

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