jQuery

Belajar jQuery Part 5 : Memahami Chaining Function

Halo salam jumpa kembali di pertemuan yang ke-5 di sesi belajar jQuery. Pada pertemuanini saya akan mengulas tentang Chaining Function pada jQuery.

Chaining Function adalah metode mengubungkan methode atau action jQuery pada sebuah element atau dengan sebuah statement. Jadi kita bisa menjalankan banyak method atau event secara sekaligus.

Untuk sesi ini kita akan belajar membuat sebuah tombol, mengapa disetiap pertemuan belajar jQuery kita selalu membuat tombol? Karena metode ini cukup mudah untuk dipahami, selebihnya bisa kamu kembangankan sesuai dengan keinginan.

Baca: Callback function jQuery

Disini saya menulis satu contoh Chaining Fuction. Silahkan tulis kode program dibawah ini di text editor masing – masing.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery Part 5 : Chaining Function Pada JQuery</title>	
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Chaining Function Pada JQuery | www.irvannurfazri.com</h1>	
	<button id="tombol">KLIK</button>
	<div class="box"></div>	
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$('#tombol').click(function(){
			$('.box').fadeIn(800).slideUp(900).slideDown(300);
		});		
	});
</script>
</html>

style.css

body{
	font-family: sans-serif;
}

h1{
	text-align: center;
}

.box{
	height: 300px;
	width:300px;
	background: blue;
	display: none;
}

#tombol{
	padding:10px;
	color: #fff;
	background: #34495E;
	border: none;
}

hasilnya…

Chaining Function di jQuery - #IRVANGEN
Chaining Function di jQuery – #IRVANGEN

Perhatikan syntax dibawah ini.

$(document).ready(function(){
	$('#tombol').click(function(){
		$('.box').fadeIn(800).slideUp(900).slideDown(300);
	});		
});

Kode program diatas kita telah memberikan event click pada sebuah tomboh, dan kemudian kita memberi efek fadeIn()slideUp() dan slideDown() sekaligus pada element box. Nah kita sudah membuat membuat satu contoh dari Chaining Function, selanjutnya teman – teman bisa kreasikan sesuai dengan keinginan kalian.

Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini, tentang Belajar Chaining Function pada 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.

Income Terms

  • function pada jquery
  • membuat method pada jquery
  • penjelasan mengenai action pada jquery
  • buat function jquery
  • cara membuat dua action pada jquery
  • cara membuat function jquery
  • fugsi function pada jquery
  • membuat function di jquery
  • tombol reload div dengan jquery
Written by Irvan Nurfazri
No one can bring you true happiness except Allah. Founder Hobigame.id Instagram : ig.com/irvan_gen Profile

Leave a Reply

Your email address will not be published. Required fields are marked *