Bab 10: Manipulasi Attribute jQuery – Ubah Atribut HTML dengan Mudah

Bab 10: Manipulasi Attribute jQuery – Ubah Atribut HTML dengan Mudah

Setelah mempelajari Effect dan Animation jQuery, kini saatnya memahami Manipulasi Attribute. Dengan fitur ini, Anda bisa mengubah, menambahkan, atau menghapus atribut HTML secara dinamis, seperti src, href, title, alt, dan atribut lainnya.

Manipulasi atribut sering digunakan untuk:

  • Mengganti gambar secara dinamis
  • Mengubah link sesuai kondisi
  • Menambahkan tooltip atau title pada elemen
  • Mengatur status input, seperti disabled atau readonly

1. Mengambil Atribut dengan .attr()

Method .attr() dapat digunakan untuk membaca nilai atribut.

Contoh:

var gambarSrc = $("img").attr("src");
alert(gambarSrc);

Artinya: mengambil nilai src dari elemen <img> dan menampilkannya melalui alert.

2. Mengubah Atribut dengan .attr()

Selain mengambil, .attr() juga bisa digunakan untuk mengubah atribut.

Contoh:

$("img").attr("src", "gambar-baru.jpg");
$("a").attr("href", "https://www.example.com");
  • Gambar akan berubah
  • Link akan diarahkan ke URL baru

3. Menghapus Atribut dengan .removeAttr()

Untuk menghapus atribut tertentu dari elemen HTML.

Contoh:

$("input").removeAttr("disabled");

Artinya: input yang sebelumnya disabled sekarang bisa digunakan.

4. Menambahkan Atribut dengan .attr()

Selain mengubah, .attr() bisa menambahkan atribut baru.

Contoh:

$("#link").attr("title", "Klik untuk menuju website");

Atribut title baru akan muncul saat mouse hover.

5. Contoh Lengkap Manipulasi Attribute jQuery

<!DOCTYPE html>
<html>
<head>
  <title>Manipulasi Attribute jQuery</title>
</head>
<body>

<img id="gambar" src="gambar1.jpg" alt="Gambar Awal" width="200">
<br><br>
<button id="ubahGambar">Ubah Gambar</button>
<button id="ambilAtribut">Ambil Atribut</button>
<button id="hapusAtribut">Hapus Alt</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  // Ubah atribut src
  $("#ubahGambar").click(function(){
    $("#gambar").attr("src", "gambar2.jpg");
  });

  // Ambil atribut alt
  $("#ambilAtribut").click(function(){
    var altText = $("#gambar").attr("alt");
    alert("Atribut alt: " + altText);
  });

  // Hapus atribut alt
  $("#hapusAtribut").click(function(){
    $("#gambar").removeAttr("alt");
    alert("Atribut alt telah dihapus");
  });
</script>

</body>
</html>

6. Tips dan Kesalahan Umum

  • ❌ Salah selector saat mengambil atau mengubah atribut
  • ❌ Mengubah atribut non-eksisten tanpa menambahkannya terlebih dahulu
  • ❌ Lupa menambahkan $(document).ready()
  • ❌ Tidak memperhatikan efek visual jika atribut berpengaruh pada tampilan (misal src gambar)

Kesimpulan

Pada Bab 10: Manipulasi Attribute jQuery, Anda telah mempelajari cara:

  • Mengambil atribut dengan .attr()
  • Mengubah atribut dengan .attr()
  • Menghapus atribut dengan .removeAttr()

Manipulasi atribut membuat elemen HTML lebih dinamis dan responsif sesuai aksi pengguna. Bab berikutnya akan membahas AJAX jQuery untuk mengambil dan mengirim data dari server tanpa me-refresh halaman.

Related Posts