Contoh Penggunaan Kode Jquery

Contoh Kode JQuery
AW - Contoh Penggunaan Kode Jquery - Nah Kali ini saya akan membuat sebuah HTML yang berisi JQuery. Pengertian JQuery adalah sebuah framework berbasiskan Javascript. JQuery sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript. Jika anda belum puas tentang definisi JQuery silahkan untuk membaca artikel saya sebelumnya tentang Pengertian JQuery. Hal yang menarik dari JQuery adalah penekanan interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh Jhon Resig. JQuery memiliki slogan “Write less, do more” yang artinya kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak. 

Logika dari program di atas adalah kita masuk ke dalah html. Kita menggunakan jquery yang embeded artinya adalah tertempel pada html tersebut. Tags <html> dan <head> seperti penjelasan sebelumnya. Lalu, kita masuk ke dalam script javascript nya. Dengan codingan <script type="text/javascript" src="jquery.js"></script>.  Di dalam tags script adalah untuk membuat animasi untuk bias menghilang setengah menghilang dan ada.

Lalu, kita masuk ke script $("document").ready(function(). Tand $ adalah sebagai tanda kita akan memasuki script dari JQuery. Ini berarti kita akan membuat sebuah function untuk document dan ditulis dalam bahasa jQuery.
$(".fadeout").click(function(){ $("#kotak").fadeOut("slow") Kita masuk le dalam function fadeout. Yang artinya jika kita klik fadeout maka kotak akan muncul dengan lambat.  });$(".fadein").click(function(){ $("#kotak").fadeIn("slow") Lalu, jika kita klik fadein maka kotak akan menghilang.});$(".fadeto3").click(function(){
$("#kotak").fadeTo("slow",0.3); Dan terakhir jika kita klik fadeto3 maka kotak akan tampil setengah atau seperti berbayang.

            Setelah itu, kita keluar dari scrip jQuery, dan selanjutnya kita masuk kedalam script css
<style type="text/css">
#kotak{
            width:250px;
            height:180px;
            background:yellow;
            border:2px solid black;}
</style>
            Perintah di atas adalah perintah untuk membuat function kotak yang akan dipanggil dalam file html ataupun jQuery dengan #kotak. Dengan lebar 250 px dan panjang 180 px dan kotak berwarna kuning serta garis tepi berwarna hitam solid.
            Dan yang terakhir adalah untuk file html nya yaitu program utama dari web ini. Perintah yang kita masukkan adalah sebagai berikut
<title>Efek Fade In, Fade Out, dan Fade To</title>
 </head>
 <body>
 <div id="kotak"></div><br>
  <button class="fadeout">Fade Out</button>
  <button class="fadein">Fade In</button>
  <button class="fadeto3">Fade To 0.3</button>
 </body>
</html>

            Judul yang kita berikan adalah Efek Fade In, Fade Out, dan Fade To. Lalu, pada body kita akan membuat div kotak yang akan di panggil di file css dan jQuery nya. Disini, kita akan membuat 3 button yaitu Fade Out yang jika di klick maka akan memanggil fungsi fadeout pada script jQuery di atas. Jika kita klik button Fade In, maka akan memanggil fungsi fadein di jQuery begitupun untuk fade To 0.3 akan memanggil fungsi fadeto3 dengan aksi di dalamnya. 

0 komentar: