JQuery Part 11 : Manipulasi Class Dengan JQuery
MENAMBAH DAN MENGHAPUS CLASS DENGAN JQUERY
Pada tutorial JQuery Dasa ini akan dibahas tentang cara memanipulasi class atau 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 menambah class,yaitu bisa menggunakan fungsi addClass(). dan untuk menghapus class dapat menggunakan fungsi removeClass()
addClass() adalah fungsi JQuery untuk mempermudah penggunanya dalam memanipluasi class html khususnya menambah class. sementara removeClass() adalah untuk menghapus class HTML yang diinginkan. Berikut adalah contoh penggunaan manipulasi class dengan JQuery.
Pada contoh ini kita akan membuat ketetapan dalam sebuah class sebut saja class tersebut biru. Dan kita membuat sebuah tombol yang berfungsi untuk addClass dan removeClass. Jadi disini ketika tombol addClass maka class biru ditambahkan pada element lingkaran. Dan jika tombol removeClass ditambahkan maka class biru akan dihapus dan kembali ke class semula.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar JQuery Part 11 : Memanipulasi 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 Function JQuery<br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
<button id="tambah">Tambahkan Class</button>
<button id="hapus">Hapus Class</button>
<div class="lingkaran"></div>
<p class="pesan"></p>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('.lingkaran').addClass('biru');
$('.pesan').text('Class Biru di Tambahkan')
});
$('#hapus').click(function(){
$('.lingkaran').removeClass('biru');
$('.pesan').text('Class Biru di Hapus');
});
});
</script>
style.css
body{
font-family: raleway;
}
h1{
text-align: center;
}
.kotak{
width: 300px;
height: auto;
background: crimson;
padding: 30px;
color: #fff;
margin-bottom: 15px;
}
button{
color: crimson;
background: transparent;
border: 1px solid crimson;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
button:hover{
color: white;
background: crimson;
border: 1px solid crimson
}
.lingkaran{
border-radius: 100%;
width: 200px;
height: 200px;
background: hotpink;
padding: 30px;
color: #fff;
margin-top: 20px;
}
.biru{
border-radius: 20%;
background: lightblue;
}
Pada saat tombol tambahkan class maka class biru ditambahkan. Seperti berikut
Jadi ketika tombol tambahkan class diklik maka akan muncul class biru yang sudah saya setting dengan CSS yaitu berwarna biru dan memiliki border-radius
$('button').click(function(){Sebaliknya jika Hapus Class diklik maka class biru akan dihapus dan kembali seperti semula yaitu lingkaran berwarna pink.
$('.lingkaran').addClass('biru');
$('.pesan').text('Class Biru di Tambahkan')
});
$('#hapus').click(function(){
$('.lingkaran').removeClass('biru');
$('.pesan').text('Class Biru di Hapus');
});
KESIMPULAN
Jadi untuk memanipulasi class kita dapat menggunakan JQuery dan kita dapat dengan mudah menambah dan menghapus class seperti pada contoh diatas. Dan untuk menambahkan class dengan JQuery kita menggunakan fungsi addClass() dan untuk menghapus class menggunakan fungsi removeClass()
Tidak ada komentar :
Posting Komentar