close

DOM-manipuláció a jQuery segítségével- Technikák és példák

A jQuery segítségével végzett DOM-manipuláció lehetővé teszi a weboldalon lévő adatok módosítását, hozzáadását, eltávolítását vagy az adatokkal való interakciót a DOM-struktúra megcélzásával. A jQuery kényelmes módszereket és funkciókat biztosít a DOM-kezelési feladatok végrehajtásához.

Íme az egyes szakaszok magyarázata, valamint konkrét példák:

 

Elemek kiválasztása

  • $("p"): Válassza ki <p> az oldal összes elemét.
  • $(".myClass"): Jelölje ki az osztály összes elemét myClass.
  • $("#myElement"): Válassza ki az azonosítóval rendelkező elemet myElement.
  • $("parentElement").find(".childElement"): Jelölje ki az összes olyan gyermekelemet, amelyeknél az osztály childElement a parentElement.

Példa:

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

 

A tartalom megváltoztatása

  • $("#myElement").html("<b>Hello World</b>"): Állítsa be az azonosítóval rendelkező elem HTML tartalmát myElement.
  • $("p").text("New text"): Az összes elem szövegtartalmának beállítása <p>.

Példa:

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

 

Elemek hozzáadása és eltávolítása

  • $("ul").append("<li>New item</li>"): Egy elem hozzáadása <li> a rendezetlen lista végéhez( <ul>).
  • $(".myClass").remove(): Az osztállyal rendelkező összes elem eltávolítása myClass az oldalról.

Példa:

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

 

Attribútumok és osztályok megváltoztatása

  • $("img").attr("src", "new-image.jpg") src: Az összes elem attribútumértékének módosítása <img>.
  • $("#myElement").addClass("newClass"): Adja hozzá az osztályt newClass az azonosítójú elemhez myElement.
  • $("#myElement").removeClass("oldClass"): Távolítsa el az osztályt oldClass az azonosítójú elemből myElement.

Példa:

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

 

Rendezvénykezelés

$("button").click(function() { }): Eseménykezelő funkció regisztrálása, amikor egy <button> elemre kattintanak.

Példa:

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

 

Hatások és animációk

  • $("#myElement").hide(): Az azonosítóval rendelkező elem elrejtése myElement.
  • $("#myElement").show(): Az azonosítóval rendelkező elem megjelenítése myElement.
  • $("#myElement").fadeOut(): Hajtsa végre a fade-out effektust az azonosítójú elemen myElement.
  • $("#myElement").fadeIn(): Végezzen elhalványítást az azonosítójú elemen myElement.

Példa:

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