close

Manipulacija DOM-om s jQueryjem- Tehnike i primjeri

Manipulacija DOM-om s jQueryjem omogućuje vam izmjenu, dodavanje, uklanjanje ili interakciju s podacima na web stranici ciljanjem DOM strukture. jQuery pruža prikladne metode i funkcije za obavljanje zadataka manipulacije DOM-om.

Evo objašnjenja za svaki odjeljak zajedno s konkretnim primjerima:

 

Odabir elemenata

  • $("p"): Odaberite sve <p> elemente na stranici.
  • $(".myClass"): Odaberite sve elemente s klasom myClass.
  • $("#myElement"): Odaberite element s ID-om myElement.
  • $("parentElement").find(".childElement"): Odaberite sve podređene elemente s klasom childElement unutar parentElement.

Primjer:

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

 

Mijenjanje sadržaja

  • $("#myElement").html("<b>Hello World</b>"): Postavite HTML sadržaj za element s ID-om myElement.
  • $("p").text("New text"): Postavite tekstualni sadržaj za sve <p> elemente.

Primjer:

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

 

Dodavanje i uklanjanje elemenata

  • $("ul").append("<li>New item</li>"): Dodajte <li> element na kraj neuređenog popisa( <ul>).
  • $(".myClass").remove(): Uklonite sve elemente s klasom myClass sa stranice.

Primjer:

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

 

Mijenjanje atributa i klasa

  • $("img").attr("src", "new-image.jpg"): Promijenite src vrijednost atributa za sve <img> elemente.
  • $("#myElement").addClass("newClass"): Dodajte klasu newClass elementu s ID-om myElement.
  • $("#myElement").removeClass("oldClass"): Uklonite klasu oldClass iz elementa s ID-om myElement.

Primjer:

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

 

Rukovanje događajima

$("button").click(function() { }): Registrirajte funkciju rukovatelja događajem kada <button> se klikne na element.

Primjer:

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

 

Efekti i animacije

  • $("#myElement").hide(): Sakrij element s ID-om myElement.
  • $("#myElement").show(): Prikaži element s ID-om myElement.
  • $("#myElement").fadeOut(): Izvedite efekt zatamnjenja na elementu s ID-om myElement.
  • $("#myElement").fadeIn(): Izvedite efekt zatamnjenja na elementu s ID-om myElement.

Primjer:

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