#JQuery - #JQuery Dasar

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

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part 11 : Menambah dan Menghapus Class dengan JQuery</title>

</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>

</body>

$(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

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.

$('#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.

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.