close

Manipularea DOM cu jQuery- Tehnici și exemple

Manipularea DOM cu jQuery vă permite să modificați, să adăugați, să eliminați sau să interacționați cu datele de pe o pagină web prin țintirea structurii DOM. jQuery oferă metode și funcții convenabile pentru a efectua sarcini de manipulare DOM.

Iată explicații pentru fiecare secțiune, împreună cu exemple specifice:

 

Selectarea elementelor

  • $("p"): Selectați toate <p> elementele de pe pagină.
  • $(".myClass"): Selectați toate elementele cu clasa myClass.
  • $("#myElement"): Selectați elementul cu ID myElement.
  • $("parentElement").find(".childElement"): Selectați toate elementele copil cu clasa childElement din parentElement.

Exemplu:

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

 

Schimbarea conținutului

  • $("#myElement").html("<b>Hello World</b>"): Setați conținutul HTML pentru elementul cu ID-ul myElement.
  • $("p").text("New text"): Setați conținutul textului pentru toate <p> elementele.

Exemplu:

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

 

Adăugarea și eliminarea elementelor

  • $("ul").append("<li>New item</li>"): Adăugați un <li> element la sfârșitul listei neordonate( <ul>).
  • $(".myClass").remove(): Eliminați toate elementele cu clasa myClass din pagină.

Exemplu:

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

 

Schimbarea atributelor și claselor

  • $("img").attr("src", "new-image.jpg"): Modificați src valoarea atributului pentru toate <img> elementele.
  • $("#myElement").addClass("newClass"): Adăugați clasa newClass la elementul cu ID-ul myElement.
  • $("#myElement").removeClass("oldClass"): Eliminați clasa oldClass din elementul cu ID-ul myElement.

Exemplu:

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

 

Gestionarea evenimentelor

$("button").click(function() { }): Înregistrați o funcție de gestionare a evenimentelor când <button> se face clic pe un element.

Exemplu:

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

 

Efecte și animații

  • $("#myElement").hide(): Ascunde elementul cu ID myElement.
  • $("#myElement").show(): Afișați elementul cu ID-ul myElement.
  • $("#myElement").fadeOut(): Efectuați un efect de fade-out asupra elementului cu ID myElement.
  • $("#myElement").fadeIn(): Efectuați un efect de fade-in asupra elementului cu ID myElement.

Exemplu:

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