Pada tutorial JQuery dasar ini saya akan membahas tentang cara memanipulasi class atau cara menambah dan menghapus class dengan JQuery. misalnya kita ingin menambahkan sebuah class kedalam sebuah element tanpa ingin mengotak-atik syntax HTML nya, maka solusinya adalah bisa menggunakan fungsi JQuery untuk menambahkan class, yaitu bisa menggunakan fungsi addClass(). dan untuk menghapus class tertentu dari sebuah element dengan JQuery maka anda bisa menggunakan fungsi removeClass().
addClass() adalah sebuah fungsi yang di sediakan oleh jquery untuk mempermudah penggunanya dalam hal memanipulasi class html khususnya untuk menambahkan class pada element tersebut. dan removeClass() adalah fungsi JQuery yang di sediakan oleh jquery sendiri untuk mempermudah kita dalam menghapus class yang di inginkan dari element yang di inginkan. berikut adalah contoh cara penulisan fungsi addClass() dan removeClass() pada jQuery untuk menambah dan menghapus class dengan JQuery.
pada contoh ini kita akan membuat ketetapan dalam sebuah class sebut saja class tersebut kita beri nama dengan “biru”. dan kita membuat 2 buah tombol yaitu tombol yang berisi fungsi addClass dan tombol yang berisi removeClass. jadi di sini pada saat tombol addclass di klik maka class biru akan kita tambahkan pada element lingkaran. jika tombol removeclass di tambahkan maka class biru pada element lingkaran akan di hapus. perhatikan contoh menambah dan menghapus class dengan jquery berikut ini.
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part11:MenambahdanMenghapusClassdenganJQuery</title>
dan saat tombol tambahkan class di klik maka class biru akan di tambahkan pada class lingkaran.
menambah class dengan jquery
dapat di perhatikan pada contoh di atas bahwa class biru sudah kita setting dengan css untuk membentuk kotak berwarna biru. dan saat tombol di klik maka class biru akan di tambahkan ke class lingkaran sesuai dengan intruksi perintah jquery kita.
1
2
3
4
5
6
7
8
9
$('#tambah').click(function(){
$('.lingkaran').addClass('biru');
$('.pesan').text('class biru di tambahkan');
});
$('#hapus').click(function(){
$('.lingkaran').removeClass('biru');
$('.pesan').text('class biru di hapus');
});
dan sebaliknya jika tombol hapus class di klik maka class biru pada class lingkaran akan di hapus. perhatikan contoh berikut ini untuk lebih mudah memahami kegunaan cara menambah dan menghapus class dengan jquery.
Lantas bagaimana cara penggunaan toggle atau classToggle() pada jquery ? cara nya sangat mudah, sama seperti penggunaan toggle pada effect jquery. baca di sini tentang effect jquery di www.malasngoding.com. class akan muncul dan hilang seperti halnya effect toggle.
Terima kasih sudah membaca tutorial belajar jquery part 10 tentang cara menambah dan menghapus class dengan jquery.
Diki Alfarabi Hadi
Coding enthusiast.
Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Halo teman-teman, selamat datang di tutorial Membuat Pencarian Tanpa Reload Dengan PHP Dan Ajax JQuery. Pada tutorial sebelumnya di malasngoding.com, teman-teman sudah belajar membuat pencarian ...
Membuat Halaman Web Ajax Tanpa Reload dengan JQuery – Halo teman-teman. sebelumnya saya ucapkan dulu terima kasih sudah kembali berkunjung di www.malasngoding.com. Sesuai dengan judul ...
Show Hide Form Password Dengan JQuery Show Hide Form Password Dengan JQuery – Mungkin teman-teman ada yang masih bingung dengan judul tutorial kali ini, yaitu Show ...
Membuat Animasi Form Dengan JQuery Membuat Animasi Form Dengan JQuery – Halo teman-teman malasngoding.com. terima kasih sebelumnya saya ucapkan ke pada teman-teman pembaca setia di ...
Download Ebook belajar HTML & CSS dasar untuk pemula gratis.
Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana.
materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.