close

DOM manipuliavimas naudojant jQuery- Technika ir pavyzdžiai

DOM manipuliavimas naudojant jQuery leidžia keisti, pridėti, pašalinti arba sąveikauti su duomenimis tinklalapyje, taikant DOM struktūrą. „jQuery“ suteikia patogius metodus ir funkcijas DOM manipuliavimo užduotims atlikti.

Čia pateikiami kiekvieno skyriaus paaiškinimai ir konkretūs pavyzdžiai:

 

Elementų pasirinkimas

  • $("p"): pasirinkite visus <p> puslapio elementus.
  • $(".myClass"): pasirinkite visus elementus su klase myClass.
  • $("#myElement"): pasirinkite elementą su ID myElement.
  • $("parentElement").find(".childElement"): pasirinkite visus antrinius elementus, kurių klasė childElement yra parentElement.

Pavyzdys:

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

 

Turinio keitimas

  • $("#myElement").html("<b>Hello World</b>"): nustatykite elemento su ID HTML turinį myElement.
  • $("p").text("New text"): nustatykite visų <p> elementų teksto turinį.

Pavyzdys:

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

 

Elementų pridėjimas ir pašalinimas

  • $("ul").append("<li>New item</li>"): pridėkite <li> elementą netvarkingo sąrašo pabaigoje( <ul>).
  • $(".myClass").remove(): pašalinkite visus elementus su klase myClass iš puslapio.

Pavyzdys:

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

 

Atributų ir klasių keitimas

  • $("img").attr("src", "new-image.jpg"): pakeiskite src visų <img> elementų atributo reikšmę.
  • $("#myElement").addClass("newClass"): pridėkite klasę newClass prie elemento su ID myElement.
  • $("#myElement").removeClass("oldClass"): pašalinkite klasę oldClass iš elemento su ID myElement.

Pavyzdys:

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

 

Renginių tvarkymas

$("button").click(function() { }): užregistruokite įvykių tvarkyklės funkciją <button> spustelėjus elementą.

Pavyzdys:

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

 

Efektai ir animacijos

  • $("#myElement").hide(): paslėpti elementą su ID myElement.
  • $("#myElement").show(): Rodyti elementą su ID myElement.
  • $("#myElement").fadeOut(): atlikite elemento su ID išnykimo efektą myElement.
  • $("#myElement").fadeIn(): atlikite elemento su ID išnykimo efektą myElement.

Pavyzdys:

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