-

Belajar JQuery Part 11 : Manipulasi Class Dengan JQuery


Menambah dan Menghapus class dengan JQuery

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

style.css

menambah dan menghapus class dengan jquery

menambah dan menghapus class dengan jquery

dan saat tombol tambahkan class di klik maka class biru akan di tambahkan pada class lingkaran.

menambah dan menghapus class dengan jquery

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.

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.

See the Pen vLgvpo by Malas Ngoding (@malasngoding) on CodePen.0

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.

Tutorial Menarik Lainnya

Membuat pencarian dengan php mysqli dan ajax jquery
Membuat Halaman Web Ajax Tanpa Reload dengan JQuery
show hide password dengan jquery
membuat animasi form dengan jquery

Diskusi

Belum Ada Diskusi

Tulis Komentar / Pertanyaan

Download ebook belajar HTML & CSS dasar untuk pemula gratis

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.

DOWNLOAD