Bab 11: Manipulasi Class jQuery – Tambah, Hapus, dan Toggle Class dengan Mudah

Bab 11: Manipulasi Class jQuery – Tambah, Hapus, dan Toggle Class dengan Mudah

Setelah mempelajari Manipulasi Attribute, langkah berikutnya adalah Manipulasi Class jQuery. Dengan fitur ini, Anda bisa menambahkan, menghapus, atau mengganti class CSS elemen secara dinamis, sehingga tampilan website bisa berubah tanpa memodifikasi file CSS secara langsung.

Manipulasi class sangat berguna untuk:

  • Membuat efek interaktif
  • Mengubah style elemen secara responsif
  • Menambahkan atau menghapus state elemen (aktif, disabled, selected)

1. Menambahkan Class dengan .addClass()

Method .addClass() digunakan untuk menambahkan satu atau beberapa class pada elemen.

Contoh:

$("#kotak").addClass("aktif");

Jika elemen memiliki class CSS aktif, style akan diterapkan.

Menambahkan lebih dari satu class

$("#kotak").addClass("aktif besar");

2. Menghapus Class dengan .removeClass()

Method .removeClass() digunakan untuk menghapus class dari elemen.

Contoh:

$("#kotak").removeClass("aktif");

Menghapus beberapa class sekaligus

$("#kotak").removeClass("aktif besar");

3. Toggle Class dengan .toggleClass()

Method .toggleClass() digunakan untuk menambahkan class jika belum ada, dan menghapusnya jika sudah ada.

Contoh:

$("#kotak").toggleClass("aktif");

Efek ini sangat cocok untuk membuat interaksi seperti menu dropdown atau button aktif/nonaktif.

4. Contoh Lengkap Manipulasi Class jQuery

<!DOCTYPE html>
<html>
<head>
  <title>Manipulasi Class jQuery</title>
  <style>
    #kotak {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      margin: 20px;
      text-align: center;
      line-height: 100px;
      transition: all 0.3s;
    }
    .aktif {
      background-color: yellow;
      border: 3px solid red;
    }
    .besar {
      width: 300px;
      height: 150px;
      line-height: 150px;
    }
  </style>
</head>
<body>

<div id="kotak">Kotak</div>
<button id="btnTambah">Tambah Class</button>
<button id="btnHapus">Hapus Class</button>
<button id="btnToggle">Toggle Class</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $("#btnTambah").click(function(){
    $("#kotak").addClass("aktif besar");
  });

  $("#btnHapus").click(function(){
    $("#kotak").removeClass("aktif besar");
  });

  $("#btnToggle").click(function(){
    $("#kotak").toggleClass("aktif besar");
  });
</script>

</body>
</html>

5. Tips dan Kesalahan Umum

  • ❌ Menambahkan class yang tidak ada di CSS tidak akan menampilkan efek visual
  • ❌ Salah selector (# untuk id, . untuk class)
  • ❌ Lupa menempatkan jQuery di dalam $(document).ready()
  • ❌ Toggle class terlalu cepat bisa membuat efek animasi terlihat tidak rapi

Kesimpulan

Pada Bab 11: Manipulasi Class jQuery, Anda telah mempelajari cara:

  • Menambahkan class dengan .addClass()
  • Menghapus class dengan .removeClass()
  • Toggle class dengan .toggleClass()

Manipulasi class adalah cara yang efisien untuk mengubah tampilan elemen HTML secara dinamis tanpa mengubah file CSS. Fitur ini sering digunakan dalam UI modern dan efek interaktif.

Bab berikutnya akan membahas AJAX jQuery, fitur penting untuk mengambil dan mengirim data ke server tanpa me-refresh halaman.

Related Posts