close

DOM-manipulointi jQuerylla- tekniikat ja esimerkit

DOM-manipuloinnin avulla jQuerylla voit muokata, lisätä, poistaa tai olla vuorovaikutuksessa verkkosivun tietojen kanssa kohdistamalla DOM-rakenteeseen. jQuery tarjoaa käteviä menetelmiä ja toimintoja DOM-käsittelytehtävien suorittamiseen.

Tässä on kunkin osion selitykset ja erityiset esimerkit:

 

Elementtien valinta

  • $("p"): Valitse kaikki <p> sivun elementit.
  • $(".myClass"): Valitse kaikki luokan elementit myClass.
  • $("#myElement"): Valitse elementti tunnuksella myElement.
  • $("parentElement").find(".childElement"): Valitse kaikki alatason elementit, joiden luokka childElement on parentElement.

Esimerkki:

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

 

Sisällön muuttaminen

  • $("#myElement").html("<b>Hello World</b>"): Aseta HTML-sisältö elementille tunnuksella myElement.
  • $("p").text("New text"): Aseta tekstisisältö kaikille <p> elementeille.

Esimerkki:

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

 

Elementtien lisääminen ja poistaminen

  • $("ul").append("<li>New item</li>"): Lisää <li> elementti järjestämättömän luettelon() loppuun <ul>.
  • $(".myClass").remove() myClass: Poista sivulta kaikki luokkaa sisältävät elementit .

Esimerkki:

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

 

Attribuuttien ja luokkien muuttaminen

  • $("img").attr("src", "new-image.jpg"): Muuta src attribuutin arvoa kaikille <img> elementeille.
  • $("#myElement").addClass("newClass"): Lisää luokka newClass elementtiin tunnuksella myElement.
  • $("#myElement").removeClass("oldClass"): Poista luokka oldClass elementistä tunnuksella myElement.

Esimerkki:

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

 

Tapahtuman käsittely

$("button").click(function() { }): Rekisteröi tapahtumakäsittelijätoiminto, kun <button> elementtiä napsautetaan.

Esimerkki:

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

 

Tehosteet ja animaatiot

  • $("#myElement").hide(): Piilota elementti tunnuksella myElement.
  • $("#myElement").show(): Näytä elementti tunnuksella myElement.
  • $("#myElement").fadeOut(): Suorita häivytystehoste elementille, jonka tunnus on myElement.
  • $("#myElement").fadeIn(): Suorita häivytystehoste elementille, jonka tunnus on myElement.

Esimerkki:

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