close

Manipulasi DOM karo jQuery -Techniques lan Conto

Manipulasi DOM karo jQuery ngidini sampeyan ngowahi, nambah, mbusak, utawa sesambungan karo data ing kaca web kanthi nargetake struktur DOM. jQuery nyedhiyakake cara lan fungsi sing trep kanggo nindakake tugas manipulasi DOM.

Mangkene panjelasan kanggo saben bagean bebarengan karo conto tartamtu:

 

Milih unsur

  • $("p"): Pilih kabeh <p> unsur ing kaca.
  • $(".myClass"): Pilih kabeh unsur karo kelas myClass.
  • $("#myElement"): Pilih unsur karo ID myElement.
  • $("parentElement").find(".childElement"): Pilih kabeh unsur anak karo kelas childElement ing parentElement.

Tuladha:

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

 

Ngganti isi

  • $("#myElement").html("<b>Hello World</b>"): Setel isi HTML kanggo unsur karo ID myElement.
  • $("p").text("New text"): Setel isi teks kanggo kabeh <p> unsur.

Tuladha:

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

 

Nambah lan mbusak unsur

  • $("ul").append("<li>New item</li>"): Tambah <li> unsur ing mburi dhaftar unordered( <ul>).
  • $(".myClass").remove(): Mbusak kabeh unsur karo kelas myClass saka kaca.

Tuladha:

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

 

Ngganti atribut lan kelas

  • $("img").attr("src", "new-image.jpg"): Ngganti src nilai atribut kanggo kabeh <img> unsur.
  • $("#myElement").addClass("newClass"): Tambah kelas newClass menyang unsur karo ID myElement.
  • $("#myElement").removeClass("oldClass"): Mbusak kelas oldClass saka unsur karo ID myElement.

Tuladha:

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

 

Penanganan acara

$("button").click(function() { }): Register fungsi handler acara nalika <button> unsur diklik.

Tuladha:

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

 

Efek lan animasi

  • $("#myElement").hide(): Singidaken unsur karo ID myElement.
  • $("#myElement").show(): Nuduhake unsur karo ID myElement.
  • $("#myElement").fadeOut(): Nindakake efek fade-metu ing unsur karo ID myElement.
  • $("#myElement").fadeIn(): Nindakake efek fade-in ing unsur karo ID myElement.

Tuladha:

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