√ Menghilangkan Photo Dengan jQuery

Menghilangkan Photo Dengan jQuery

Kamis, 01 November 2012

Hari ini mulai belajar web kembali, ya itung - itung mengingat satu persatu tentang pemrograman web yang sudah lupa Dan untuk kali ini saya coba belajar menghilangkan sebuah photo di browser menggunakan jQuery. Karena kita akan menggunakan jQuery sebaiknya download terlebih dahulu file jQuery yang kita butuhkan di situs jQuery dan pilih versi development. Selanjutnya siapkan juga sebuah photo yang akan menjadi objek untuk kita hilangkan. Setelah kedua file tersebut ada yaitu jQuery dan photo maka saatnya menulis coding yang ada dibawah ini :

<html>
   <head>

    

   <title>Latihan jQuery</title>

    

   <script type="text/javascript" src="jquery-1.8.2.js">

    

   </script>

    

   <script type="text/javascript" >

        

   $(document).ready(function(){

            

   $(".hilang").click(function(){

            

   $("#foto").hide("slow");

        

   });

        

   $(".tampil").click(function(){

            

   $("#foto").show("fast");

            

   });

        

   });                        

    

   </script>



   </head>

    

   <body>

        

      <button class="hilang">Hilangkan Photo</button>

        

      <button class="tampil">Tampilkan Photo</button>

        

      <p><img id="foto" src="megitristisan.jpg"></p>

    

   </body>

</html>

Cara kerja jQuery pada kode diatas adalah sebagai berikut :
Pertama jQuery akan memastikan semua elemen yang diinginkan sudah tampil semua di halaman web, fungsi yang di pakai adalah :

$(document).ready(function(){
    //baris kode jQuery akan dieksekusi bila semua elemen sudah ditampilkan
}

Kedua setelah semua elemen ditampilkan maka selanjutnya adalah memilih elemen berdasarkan class atau id yang telah ditetapkan. Dalam hal ini, jQuery menggunakan fungsi selector.

$(".hilang")
$("#foto")
$(".tampil")

Ketiga atau yang terakhir adalah memberikan aksi / operasi terhadap elemen yang sudah dipilih. Contohnya klik dan hide.

$(".tampil").click(function(){
    $("#foto").show("fast");
    });

Referensi : Buku Bikin Website Super Keren Dengan PHP & JQuery