Dalam seri tutorial JQuery kali ini, kita akan membahas salah satu kemampuan JQuery yang paling berguna: memanipulasi kelas (class) pada elemen HTML. Dengan JQuery, kita bisa dengan mudah menambah, menghapus, dan mengubah kelas, yang sangat penting untuk menerapkan atau mengubah gaya CSS secara dinamis.

1. Menambah Class: Metode addClass()

Metode addClass() digunakan untuk menambahkan satu atau lebih nama kelas ke elemen yang dipilih. Ini adalah cara yang cepat untuk menerapkan gaya CSS baru pada suatu elemen.

Contoh:

Anggaplah Anda memiliki CSS berikut:

.highlight {
  background-color: yellow;
  border: 2px solid orange;
}

Untuk menambahkan kelas .highlight ke sebuah paragraf, Anda bisa menggunakan kode JQuery ini:

$('p').addClass('highlight');

Setelah kode ini dijalankan, semua elemen <p> di halaman akan memiliki latar belakang kuning dan bingkai oranye. Anda juga bisa menambahkan beberapa kelas sekaligus dengan memisahkannya menggunakan spasi:

$('p').addClass('highlight bold-text');

2. Menghapus Class: Metode removeClass()

Metode removeClass() adalah kebalikan dari addClass(). Ini digunakan untuk menghapus satu atau lebih nama kelas dari elemen yang dipilih.

Contoh:

Untuk menghapus kelas .highlight dari paragraf yang sudah ada, gunakan kode ini:

$('p').removeClass('highlight');

Seperti addClass(), Anda juga bisa menghapus beberapa kelas sekaligus:

$('p').removeClass('highlight bold-text');

Jika Anda ingin menghapus semua kelas dari sebuah elemen, panggil removeClass() tanpa parameter:

$('p').removeClass();

3. Mengubah Class: Metode toggleClass()

Metode toggleClass() adalah metode yang sangat efisien karena berfungsi sebagai sakelar. Jika elemen yang dipilih memiliki kelas yang ditentukan, maka toggleClass() akan menghapusnya. Jika tidak, toggleClass() akan menambahkannya.

Ini sangat ideal untuk membuat fungsi yang bergantian, seperti saat mengaktifkan atau menonaktifkan gaya CSS, misalnya pada menu navigasi yang bisa dibuka-tutup.

Contoh:

Anggap Anda ingin membuat tombol yang bisa menghidupkan dan mematikan efek highlight pada sebuah <p>:

// HTML
<p id="my-paragraph">Klik tombol di bawah.</p>
<button id="toggle-button">Toggle Highlight</button>

// JQuery
$('#toggle-button').click(function() {
  $('#my-paragraph').toggleClass('highlight');
});

Setiap kali tombol diklik, JQuery akan memeriksa apakah #my-paragraph memiliki kelas .highlight. Jika ada, JQuery akan menghapusnya. Jika tidak, JQuery akan menambahkannya.

Mengapa Memanipulasi Class Lebih Baik dari Mengubah CSS Langsung?

Meskipun JQuery menyediakan metode seperti css() untuk mengubah properti CSS secara langsung, memanipulasi class adalah praktik yang jauh lebih baik. Berikut alasannya:

• Pemisahan Kode: Mengubah class memisahkan kode JavaScript dari CSS. Ini membuat CSS tetap berada di stylesheet dan JavaScript di dalam file .js, yang membuat kode lebih terorganisir dan mudah dikelola.
• Dapat Digunakan Kembali: Kelas CSS bisa digunakan kembali di berbagai elemen. Dengan mengubah class, Anda bisa menerapkan sekumpulan gaya (seperti highlight) ke banyak elemen tanpa harus menulis kode yang berulang.
• Mudah Dibaca: Kode seperti addClass('highlight') lebih mudah dibaca dan dipahami tujuannya daripada kode seperti css('background-color', 'yellow').

Dengan memahami dan menguasai manipulasi class menggunakan JQuery, Anda dapat membuat interaksi dinamis yang bersih dan efisien pada situs web Anda.