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(). Show 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 Part 11 : Menambah dan Menghapus Class dengan JQuery</title> <script type="text/javascript" src="jquery.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>add and remove class Function JQuery | www.malasngoding.com</h1>
<button class="tombol" id="tambah">Tambahkan class</button> <button class="tombol" id="hapus">Hapus class</button>
<div class="lingkaran"></div> <p class="pesan"></p> </body> <script type="text/javascript"> $(document).ready(function(){ $('#tambah').click(function(){ $('.lingkaran').addClass('biru'); $('.pesan').text('class biru di tambahkan'); });
$('#hapus').click(function(){ $('.lingkaran').removeClass('biru'); $('.pesan').text('class biru di hapus'); }); }); </script> </html> style.css 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 body{ font-family: sans-serif; }
h1{ text-align: center; }
.lingkaran{ border-radius: 100%; width: 200px; height: 200px; background: orange; padding: 30px; color: #fff; margin-top: 20px; }
.biru{ border-radius: 0; background: blue; }
.tombol{ color: #fff; background: #232323; border: none; padding: 10px; }  menambah dan menghapus class dengan jquery 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. 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:
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.
Tags: cara menggunakan class addClass, cara menggunakan class removeClass, contoh addClass jquery, contoh classtoggle() pada jquery, contoh penggunaan removeClass jquery, menambah class dengan jquery, menambah dan menghapus class, menghapus class dengan jquery, pengertian addclass jquery, pengertian classToggle(), pengertian removeclass pada jquery, tutorial jquery berkualitas, tutorial jquery bertahap untuk pemula, tutorial jquery jelas, tutorial manipulasi class dengan jquery Tutorial JQuery Dasar
Tutorial JQuery Lanjutan
Tutorial JQuery Ajax
Produk
Tutorial Terbaru
Toko KamiSOCIALMalas Ngoding TUTORIAL MENARIK LAINNYAMembuat 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 ... Diki Alfarabi Hadi 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 ... Diki Alfarabi Hadi 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 ... Diki Alfarabi Hadi
|
Cara menggunakan remove button in html
Pos Terkait
Copyright © 2024 kemunculan Inc.
