close

Manipulasi DOM dengan jQuery -Teknik dan Contoh

Manipulasi DOM dengan jQuery membolehkan anda mengubah suai, menambah, mengalih keluar atau berinteraksi dengan data pada halaman web dengan menyasarkan struktur DOM. jQuery menyediakan kaedah dan fungsi yang mudah untuk melaksanakan tugas manipulasi DOM.

Berikut ialah penjelasan untuk setiap bahagian bersama dengan contoh khusus:

 

Memilih elemen

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

Contoh:

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

 

Menukar kandungan

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

Contoh:

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

 

Menambah dan mengalih keluar elemen

  • $("ul").append("<li>New item</li>"): Tambah <li> elemen di hujung senarai tidak tertib( <ul>).
  • $(".myClass").remove(): Alih keluar semua elemen dengan kelas myClass daripada halaman.

Contoh:

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

 

Menukar atribut dan kelas

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

Contoh:

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

 

Pengendalian acara

$("button").click(function() { }): Daftar fungsi pengendali acara apabila <button> elemen diklik.

Contoh:

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

 

Kesan dan animasi

  • $("#myElement").hide(): Sembunyikan elemen dengan ID myElement.
  • $("#myElement").show(): Tunjukkan elemen dengan ID myElement.
  • $("#myElement").fadeOut(): Lakukan kesan pudar pada elemen dengan ID myElement.
  • $("#myElement").fadeIn(): Lakukan kesan pudar masuk pada elemen dengan ID myElement.

Contoh:

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