tRikSonic
Tema

Fungsi jQuery show (), Belajar jquery

Terakhir diperbarui : 23 Mei 2018 - 15.59

Tutorial jquery show()

Fungsi show() pada jQuery - jquery show() digunakan untuk menampilkan element yang tersembunyi dengan metode interaktif yang dilakukan oleh user, baik itu dengan metode klik fungsi, mouse fungsi, tombol fungsi pada komputer dll.
jQuery

Syntax:

$(selector).show(speed,callback);

Contoh penerapan jquery show()

Contoh 1 :
$(function(){
   $(".show").click(function(){
     $("#demo").show();
   });
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
#demo {
   background: #ffbccb;
   padding: 15px;
   border: 1px solid gainsboro;
   border-radius: 4px;
   margin: 10px 0px;
}
</style>
</head>
<body>

<button class="show">show</button>

<div id='demo' style="display:none;">
Tekan tombol Run untuk menyegarkan editor
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function(){
   $(".show").click(function(){
     $("#demo").show();
   });
});
</script>

</body>
</html>
Contoh 2 :
$(function(){
   $(".show").click(function(){
     $("#demo").show("slow");
   });
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
#demo {
   background: #ffbccb;
   padding: 15px;
   border: 1px solid gainsboro;
   border-radius: 4px;
   margin: 10px 0px;
}
</style>
</head>
<body>

<button class="show">show</button>

<div id='demo' style="display:none;">
Tekan tombol Run untuk menyegarkan editor
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function(){
   $(".show").click(function(){
     $("#demo").show("slow");
   });
});
</script>

</body>
</html>
Contoh 3 :
$(function(){
   $(".show").click(function(){
     $("#demo").show(2000);
   });
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
#demo {
   background: #ffbccb;
   padding: 15px;
   border: 1px solid gainsboro;
   border-radius: 4px;
   margin: 10px 0px;
}
</style>
</head>
<body>

<button class="show">show</button>

<div id='demo' style="display:none;">
Tekan tombol Run untuk menyegarkan editor
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function(){
   $(".show").click(function(){
     $("#demo").show(2000);
   });
});
</script>

</body>
</html>
Contoh 4 :
$(function(){
   $(".show").click(function(){
     $("#demo").show("slow",jsAlert);
   });
});

function jsAlert(){
   alert ("Hai saya Alert");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
#demo {
   background: #ffbccb;
   padding: 15px;
   border: 1px solid gainsboro;
   border-radius: 4px;
   margin: 10px 0px;
}
</style>
</head>
<body>

<button class="show">show</button>

<div id='demo' style="display:none;">
Tekan tombol Run untuk menyegarkan editor
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function(){
   $(".show").click(function(){
     $("#demo").show("slow",jsAlert);
   });
});

function jsAlert(){
   alert ("Hai saya Alert");
}
</script>

</body>
</html>
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.