Belajar jQuery Part 7 : Memanipuasi Class Dengan jQuery
MENAMBAH DAN MENGHAPUS CLASS DENGAN JQUERY
Pengertian
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();
PENGERTIAN ADDCLASS()
addClass() adalah fungsi JQuery untuk mempermudah penggunanya dalam memanipluasi class html khususnya menambah class.
PENGERTIAN ADDCLASS()
removeClass() adalah untuk menghapus class HTML yang diinginkan.
Berikut adalah contoh penggunaan manipulasi class dengan JQuery.
Script Dibawah ini :
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()
Pengertian
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();
PENGERTIAN ADDCLASS()
addClass() adalah fungsi JQuery untuk mempermudah penggunanya dalam memanipluasi class html khususnya menambah class.
PENGERTIAN ADDCLASS()
removeClass() adalah untuk menghapus class HTML yang diinginkan.
Berikut adalah contoh penggunaan manipulasi class dengan JQuery.
Script Dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar JQuery Part 6 : Menambahkan CSS Di JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
body{
font-family: raleway;
}
a {
color: green;
}
a:hover{
color: blue;
}
h1{
text-align: center;
}
.kotak{
width: 300px;
height: auto;
background: green;
padding: 30px;
color: #fff;
margin-bottom: 15px;
}
button{
color: black;
background: lime;
border: 1px solid green;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
cursor: pointer;
}
button:hover{
color: white;
background: green;
border: 1px solid lime;
}
.lingkaran{
border-radius: 4%;
width: 200px;
height: 200px;
background: lime;
padding: 30px;
color: #fff;
margin-top: 20px;
}
.biru{
border-radius: 20%;
background: lightblue;
}`
</style>
</head>
<body>
<h1>Belajar menambahkan Css di jQuery<br>
<a href="http://www.bimablctelkom.com">Bima Blc Telkom</a></h1>
<center>
<button id="tambah">Tambahkan Class</button>
<button id="hapus">Hapus Class</button>
<div class="lingkaran"></div>
<p class="pesan"></p>
</center>
</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>
</html>
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()
No comments