jQuery

Belajar jQuery Part 9 : Manipulasi Class

Halo salam jumpa kembali di pertemuan yang ke-9 di sesi belajar jQuery. Pada pertemuan ini saya akan mengulas tentang Cara Menambah dan Menghapus Class dengan jQuery.

Manipulasi Class dapat kita gunakan untuk menambah atau menghapus class tertentu dari sebuah element dengan jQuery, misalkan saya ingin menambahkan class ke dalam element tanpa mengubah syntax HTMLnya, maka solusinya adalah menggunakan fungsi jQuery ini, nama fungsinya addClass(). Atau menghapus class dengan fungsi removeClass().

Mari kita mengenal fungsi addClass() dan removeClass lebih jauh.

addClass() adalah sebuah fungsi yang disediakan oleh jQuery. Fungsi ini mempermudah kita dalam hal memanipulasi khususnya untuk menambahkan class html pada element.

removeClass() adalah sebuah fungsi jQuery untuk mempermudah kita dalam mengahapus class yang diinginkan dari element tertentu.

Baca: Tutorial Menghapus Element dengan jQuery

Pada sesi kali ini kita akan membuat sebuah contoh ketetapan dalam sebuah class, class tersebut akan kita beri dengan nama merah. Kita akan membuat 2 tombol yang berisi fungsi addClass() dan removeClass(). Oke langsung saja kita praktikkan, seperti biasa siapkan text editor teman – teman.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Belajar jQuery Part 9 : Menambah dan Menghapus Class</title>	
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>add and remove class Function jQuery by www.irvannurfazri.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

body{
	font-family: sans-serif;
}

h1{
	text-align: center;
}

.lingkaran{
	border-radius: 100%;
	width: 200px;
	height: 200px;
	background: red;
	padding: 30px;
	color: #fff;
	margin-top:  20px;
}

.biru{
	border-radius: 0;
	background: blue;
}

.tombol{
	color: #fff;
	background: #232323;
	border: none;
	padding: 10px;
}

Hasilnya..

Menambahkan Class dengan Fungsi addClass() jQuery - #IRVANGEN
Menambahkan Class dengan Fungsi addClass() jQuery – #IRVANGEN
Menghapus Class dengan Fungsi removeClass() jQuery - #IRVANGEN
Menghapus Class dengan Fungsi removeClass() jQuery – #IRVANGEN

Class biru sudah kita setting dengan css untuk membuat kotak biru, sehingga jika tombol “Tambahkan class” diklik maka class biru akan ditambahkan ke class lingkaran.

$('#tambah').click(function(){
	$('.lingkaran').addClass('biru');
	$('.pesan').text('class biru di tambahkan');
});	

$('#hapus').click(function(){
	$('.lingkaran').removeClass('biru');
	$('.pesan').text('class biru di hapus');
});

Sebaliknya, jika tombol “Hapus class” diklik maka class biru pada lingkaran akan dihapus.


Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini, tentang Cara Menambah dan Menghapus Class Dengan jQuery. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Terimakasih.

Written by Irvan Nurfazri
No one can bring you true happiness except Allah. Founder Hobigame.net Instagram : ig.com/irvan_gen Profile

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *