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.

Incoming search terms:

  • perintah-perintah menghapus class pada jquery
  • penulisan $(class) pada jquery
  • jquery meambah class pada element tertentu
  • even-even menghapus class pada jquery
  • contoh remove menggunakan a href jquery
  • Contoh addclass pada javascript
  • cara menambahkan class pada jquery
  • cara gunakan addclass di javascript
  • Cara addclass di javascript
  • belajar jquery manipulasi html




About the author
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.


Discussion
  • 3 Comments

Write a Comment

Your email address will not be published. Required fields are marked *


CENTANG untuk bisa mengirimkan komentar. [ Verifikasi bukan robot ]