close

Manipulimi DOM me jQuery -Teknika dhe shembuj

Manipulimi DOM me jQuery ju lejon të modifikoni, shtoni, hiqni ose ndërveproni me të dhënat në një faqe interneti duke synuar strukturën DOM. jQuery ofron metoda dhe funksione të përshtatshme për të kryer detyrat e manipulimit të DOM.

Këtu janë shpjegimet për çdo seksion së bashku me shembuj të veçantë:

 

Përzgjedhja e elementeve

  • $("p"): Zgjidhni të gjithë <p> elementët në faqe.
  • $(".myClass"): Zgjidhni të gjithë elementët me klasën myClass.
  • $("#myElement"): Zgjidhni elementin me ID myElement.
  • $("parentElement").find(".childElement"): Zgjidhni të gjithë elementët fëmijë me klasën childElement brenda parentElement.

Shembull:

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

 

Ndryshimi i përmbajtjes

  • $("#myElement").html("<b>Hello World</b>"): Vendosni përmbajtjen HTML për elementin me ID myElement.
  • $("p").text("New text"): Vendosni përmbajtjen e tekstit për të gjithë <p> elementët.

Shembull:

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

 

Shtimi dhe heqja e elementeve

  • $("ul").append("<li>New item</li>"): Shtoni një <li> element në fund të listës së parenditur( <ul>).
  • $(".myClass").remove(): Hiqni të gjithë elementët me klasën myClass nga faqja.

Shembull:

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

 

Ndryshimi i atributeve dhe klasave

  • $("img").attr("src", "new-image.jpg"): Ndryshoni src vlerën e atributit për të gjithë <img> elementët.
  • $("#myElement").addClass("newClass"): Shtoni klasën newClass në elementin me ID myElement.
  • $("#myElement").removeClass("oldClass"): Hiqeni klasën oldClass nga elementi me ID myElement.

Shembull:

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

 

Trajtimi i ngjarjeve

$("button").click(function() { }): Regjistroni një funksion të mbajtësit të ngjarjeve kur <button> klikohet një element.

Shembull:

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

 

Efektet dhe animacionet

  • $("#myElement").hide(): Fshehni elementin me ID myElement.
  • $("#myElement").show(): Trego elementin me ID myElement.
  • $("#myElement").fadeOut(): Kryeni një efekt zbehjeje në elementin me ID myElement.
  • $("#myElement").fadeIn(): Kryeni një efekt fade-in në elementin me ID myElement.

Shembull:

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