Langkah – langkah Menampilkan dan Menyembunyikan DIV dengan Menggunakan jQuery
1.
Pengertian jQuery
jQuery adalah sebuah library Javascript
yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event,
animasi, efek dan memproses interaksi ajax. jQuery dirancang sedemikian rupa
supaya membuat program menggunakan Javascript menjadi relatif sangat mudah.
Sesuai slogan nya, write less, do more. Menulis kode lebih sedikit, tetapi
melakukan pekerjaan lebih banyak.
jQuery ukuran nya cukup kecil, sehingga
tidak memperlambat proses loading halaman web yang kita buat. jQuery juga
kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa berjalan
di semua browser – cross browser.
jQuery diluncurkan pada Januari 2006 oleh John
Resig. jQuery adalah library Javascript yang paling populer saat ini. Karena
kecanggihan nya, jQuery dipakai oleh perusahaan besar seperti Google. Dell,
CBS, digg, Netflix, Bank of America, Mozilla, Drupal, dsb.
jQuery adalah library Javascript yang gratis
dan open source. Oleh karena nya kita bisa menggunakan jQuery dengan bebas
untuk keperluan pengembangan website kita. Tanpa library seperti jQuery,
menerapkan Javascript mungkin akan lebih sulit, terutama untuk pemula yang baru
belajar Javascript. Plugin tambahan seperti JQuery UI (user interface) semakin
memudahkan kita mengembangkan website yang cantik dan interaktif. Selain itu
tersedia plugin-plugin lain yang makin memperkaya kemampuan jQuery..
Berikut ini Adalah Fungsi JQuery :
·
Mengakses
bagian halaman tertentu dengan mudah
·
Mengubah
tampilan bagian halaman tertentu
·
Mengubah isi
dari halaman
·
Menambah
animasi tanpa harus memakai flash yang lebih berat
·
Melalukan load
data/halaman tanpa merefresh seluruh halaman6.
·
Menyederhanakan/mempersingkat penulisan
sintaks javascript biasa
2.
Menampilkan dan Menyembunyikan DIV
a.
Souerce Code
HTML
<html>
<head>
<title>jQuery
Menampilkan/Menyembunyikan Element DIV - jaranguda.com</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script
type='text/javascript'>
$(window).load(function(){
$("#showhide").css("display","none");
$('#clickme').change(function(){
if (this.checked) {
$('#showhide').fadeIn('slow');
}
else {
$('#showhide').fadeOut('slow');
}
});
});
</script>
</head>
<body>
<input
type="checkbox" name="clickme"
id="clickme">ClickMe
<div id="showhide">
disini ditampilkan
</div>
</body>
</html>
|
b.
Source Code Javascript
<script type='text/javascript'>
$(window).load(function(){
$("#showhide").css("display","none");
$('#clickme').change(function(){
if (this.checked) {
$('#showhide').fadeIn('slow');
}
else {
$('#showhide').fadeOut('slow');
}
});
});
</script>
|
c.
Gabung kedua
Source Code kedalam Satu file HTML
<html>
<head>
<script
type='text/javascript'>
$(window).load(function(){
$("#showhide").css("display","none");
$('#clickme').change(function(){
if (this.checked) {
$('#showhide').fadeIn('slow');
}
else {
$('#showhide').fadeOut('slow');
}
});
});
</script>
<title>Menampilkan dan Menyembunyikan DIV dengan
Menggunakan jQuery - gibutladimba.blogspot.com</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script
type='text/javascript'>
$(window).load(function(){
$("#showhide").css("display","none");
$('#clickme').change(function(){
if (this.checked) {
$('#showhide').fadeIn('slow');
}
else {
$('#showhide').fadeOut('slow');
}
});
});
</script>
</head>
<body>
<input
type="checkbox" name="clickme"
id="clickme">Klik Disini
<div id="showhide">
disini ditampilkan
</div>
</body>
</html>
|
Download Source Code Disini
.png)
.png)
.png)
.jpg)
.png)
