close

Manipolazione DOM con jQuery -Tecniche ed esempi

La manipolazione del DOM con jQuery consente di modificare, aggiungere, rimuovere o interagire con i dati su una pagina Web prendendo di mira la struttura del DOM. jQuery fornisce metodi e funzioni convenienti per eseguire attività di manipolazione DOM.

Di seguito sono riportate le spiegazioni per ciascuna sezione insieme a esempi specifici:

 

Selezione degli elementi

  • $("p"): seleziona tutti <p> gli elementi della pagina.
  • $(".myClass"): Seleziona tutti gli elementi con la classe myClass.
  • $("#myElement"): Selezionare l'elemento con l'ID myElement.
  • $("parentElement").find(".childElement"): seleziona tutti gli elementi figlio con la classe childElement all'interno del file parentElement.

Esempio:

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

 

Modifica del contenuto

  • $("#myElement").html("<b>Hello World</b>"): Imposta il contenuto HTML per l'elemento con l'ID myElement.
  • $("p").text("New text"): imposta il contenuto del testo per tutti <p> gli elementi.

Esempio:

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

 

Aggiunta e rimozione di elementi

  • $("ul").append("<li>New item</li>"): aggiunge un <li> elemento alla fine dell'elenco non ordinato( <ul>).
  • $(".myClass").remove(): rimuove tutti gli elementi con la classe myClass dalla pagina.

Esempio:

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

 

Modifica di attributi e classi

  • $("img").attr("src", "new-image.jpg"): Modifica il src valore dell'attributo per tutti <img> gli elementi.
  • $("#myElement").addClass("newClass"): Aggiungi la classe newClass all'elemento con l'ID myElement.
  • $("#myElement").removeClass("oldClass"): Rimuove la classe oldClass dall'elemento con ID myElement.

Esempio:

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

 

Gestione degli eventi

$("button").click(function() { }): registra una funzione di gestione eventi quando <button> si fa clic su un elemento.

Esempio:

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

 

Effetti e animazioni

  • $("#myElement").hide(): Nascondere l'elemento con l'ID myElement.
  • $("#myElement").show(): Mostra l'elemento con l'ID myElement.
  • $("#myElement").fadeOut(): esegue un effetto di dissolvenza sull'elemento con l'ID myElement.
  • $("#myElement").fadeIn(): esegue un effetto di dissolvenza in entrata sull'elemento con l'ID myElement.

Esempio:

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