close

Manipulacija DOM z jQuery – tehnike in primeri

Manipulacija DOM z jQuery vam omogoča spreminjanje, dodajanje, odstranjevanje ali interakcijo s podatki na spletni strani s ciljanjem na strukturo DOM. jQuery ponuja priročne metode in funkcije za izvajanje nalog manipulacije DOM.

Tu so razlage za vsak razdelek skupaj s posebnimi primeri:

 

Izbira elementov

  • $("p"): izberite vse <p> elemente na strani.
  • $(".myClass"): Izberite vse elemente z razredom myClass.
  • $("#myElement"): Izberite element z ID-jem myElement.
  • $("parentElement").find(".childElement"): Izberite vse podrejene elemente z razredom childElement znotraj parentElement.

primer:

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

 

Spreminjanje vsebine

  • $("#myElement").html("<b>Hello World</b>"): Nastavite vsebino HTML za element z ID-jem myElement.
  • $("p").text("New text"): Nastavite besedilno vsebino za vse <p> elemente.

primer:

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

 

Dodajanje in odstranjevanje elementov

  • $("ul").append("<li>New item</li>"): Dodajte <li> element na konec neurejenega seznama( <ul>).
  • $(".myClass").remove(): Odstranite vse elemente z razredom myClass s strani.

primer:

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

 

Spreminjanje atributov in razredov

  • $("img").attr("src", "new-image.jpg"): Spremenite src vrednost atributa za vse <img> elemente.
  • $("#myElement").addClass("newClass"): Dodajte razred newClass elementu z ID-jem myElement.
  • $("#myElement").removeClass("oldClass"): Odstranite razred oldClass iz elementa z ID-jem myElement.

primer:

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

 

Obravnava dogodkov

$("button").click(function() { }): Registrirajte funkcijo obdelovalnika dogodkov, ko <button> kliknete element.

primer:

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

 

Učinki in animacije

  • $("#myElement").hide(): Skrij element z ID-jem myElement.
  • $("#myElement").show(): Pokaži element z ID-jem myElement.
  • $("#myElement").fadeOut(): Izvedite učinek zatemnitve na elementu z ID-jem myElement.
  • $("#myElement").fadeIn(): Izvedite učinek zatemnitve na elementu z ID-jem myElement.

primer:

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