close

Manipulasi DOM dengan jQuery -Teknik dan Contoh

Manipulasi DOM dengan jQuery memungkinkan Anda untuk memodifikasi, menambah, menghapus, atau berinteraksi dengan data di halaman web dengan menargetkan struktur DOM. jQuery menyediakan metode dan fungsi yang nyaman untuk melakukan tugas manipulasi DOM.

Berikut adalah penjelasan untuk setiap bagian beserta contoh spesifiknya:

 

Memilih elemen

  • $("p"): Pilih semua <p> elemen di halaman.
  • $(".myClass"): Pilih semua elemen dengan kelas myClass.
  • $("#myElement"): Pilih elemen dengan ID myElement.
  • $("parentElement").find(".childElement"): Pilih semua elemen turunan dengan kelas childElement di dalam parentElement.

Contoh:

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

 

Mengubah konten

  • $("#myElement").html("<b>Hello World</b>"): Mengatur konten HTML untuk elemen dengan ID myElement.
  • $("p").text("New text"): Mengatur konten teks untuk semua <p> elemen.

Contoh:

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

 

Menambahkan dan menghapus elemen

  • $("ul").append("<li>New item</li>"): Tambahkan <li> elemen di akhir daftar tidak terurut( <ul>).
  • $(".myClass").remove(): Hapus semua elemen dengan kelas myClass dari halaman.

Contoh:

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

 

Mengubah atribut dan kelas

  • $("img").attr("src", "new-image.jpg"): Mengubah src nilai atribut untuk semua <img> elemen.
  • $("#myElement").addClass("newClass"): Tambahkan kelas newClass ke elemen dengan ID myElement.
  • $("#myElement").removeClass("oldClass"): Hapus kelas oldClass dari elemen dengan ID myElement.

Contoh:

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

 

Penanganan acara

$("button").click(function() { }): Daftarkan fungsi event handler saat <button> elemen diklik.

Contoh:

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

 

Efek dan animasi

  • $("#myElement").hide(): Sembunyikan elemen dengan ID myElement.
  • $("#myElement").show(): Menampilkan elemen dengan ID myElement.
  • $("#myElement").fadeOut(): Melakukan efek fade-out pada elemen dengan ID myElement.
  • $("#myElement").fadeIn(): Melakukan efek fade-in pada elemen dengan ID myElement.

Contoh:

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