Pengantar dan Penggunaan jQuery pada Website ~ Nickizoner

Pengantar dan Penggunaan jQuery pada Website

Posted by Nicki Hermanto Putro On Saturday 2 March 2013 2 komentar
Pengantar dan Penggunaan jQuery pada Website - jQuery pertama  kali dibuat oleh John Resig pada tahun 2005 dan pertama kali dirilis  pada tanggal 14 Januari  2006. jQuery merupakan sebuah framework dari Javascript dan cara baru dalam menuliskan kode Javascript. 
jQuery akan mempercepat dan meringkaskan library Javascript sehingga 
dengan menggunakan jQuery kita dapat mempercepat perpindahan dokumen 
HTML, 
penanganan event (event handling), pembuatan animasi didalam web 
sehingga web kita tampak seperti flash, 
dan juga interaksi AJAX untuk pengembangan web yang modern dan cepat.

jQuery mempunyai lisensi dibawah GNU artinya 
jQuery merupakan aplikasi yang Open Source dan bebas di publikasikan 
oleh siapapun. Ukurannya juga cukup kecil yaitu sebesar 56 KB (compressed)
 
sehingga menggunakan jQuery menjadi jauh lebih cepat dan mudah daripada 
menggunakan framework yang lain atau menggunakan Javascript 
Konvensional.

Bagaimana Cara Membuatnya ?!
Pertama anda harus menyertakan framework jQuery di file HTML anda silahkan download framework jQuery di sini  jQuery Latest.

Sementara anda menunggu file di download, Saya terangkan salah satu 
fungsi di jQuery untuk mempermudah penggunaan ajax adalah fungsi load(), fungsi load sendiri memiliki tiga parameter yaitu load(url, params, callback).
url (string), merupakan URL dari file html yang akan di load
params (object), merupakan pilihan optional yang digunakan untuk mengirim Data ke server
callback (function), merupakan pilihan optional  tentang Fungsi yang akan dijalankan ketika data berhasil di load 

Untuk mengimplementasikan fungsi load tersebut, langsung saja praktek dan buat tag HTML seperti dibawah:

<html>

<head>

<title>Fungsi Memuat JQuery</title>

</head>

<body>

    <div>

        <p><a href="fileyangdipanggil.php" class="link"> Klik Di sini </a

        <p><img id="loadingimg" src="../images/loader.gif" style="display:none"><p>

    </div>

    <div id="HasilJQ"></div>

</body>

</html>

Apabila anda sudah mendownload framework sekarang mari kita hubungkan file jQuery dengan file HTML.

<html>

<head>

<title>Fungsi Memuat JQuery</title>

<script type="text/javascript" src="NamaFileJquery.js">

</script>

<script type="text/javascript">

$(document).ready(function() {

    $("a.link").click(function() {

        var url = $(this).attr("href");

        $("#loadingimg").fadeIn();

        $('#HasilJQ').load(url, function (){ 

            $('#loadingimg').fadeOut(); 

        });

    return false;

    });

});

</script>

</head>

<body>

    <div>

        <p><a href="fileyangdipanggil.php" class="link"> Klik Disini </a

        <p><img id="loadingimg" src="../images/loader.gif" style="display:none"><p>

    </div>

    <div id="HasilJQ"></div>

</body>

</html>

Cuku sript itu yang digunakan untuk memanggil halaman tanpa 
merefresh content, sangat simple berkat jQuery. dibawah ini akan saya 
bahas satu persatu bagaimana cara kerja fungsi diatas

sebelum memulai membuat fungsi dalam jQuery maka kita harus terlebih dahulu membuat code sebagai berikut

$(document).ready(function() {

    //tuliskan fungsi disini

    $("a.link").click(function() {

        var url = $(this).attr("href");

        $("#loadingimg").fadeIn();

        $('#HasilJQ').load(url, function (){ 

            $('#loadingimg').fadeOut(); 

        });

    return false;

    });

});

$(document).ready(function() berarti kita akan memulai script jQuery dan });
 berarti mengakhiri script jQuery, jQuery kemudian akan membaca element 
html dan attribut yang diberikan, selanjutnya jQuery akan mengeksekusi 
setiap element dan atrribut bila kita memasukan element dan atribut 
tersebut kedalam fungsi yang kita buat

("a.link").click(function(); berarti kita memerintahkan 
jQuery untuk mengeksekusi element a dengan nama atribut class "link" 
(

var url = $(this).attr("href"); berarti kita 
mendefinisikan variable url dimana nilai variable didapatkan dari 
attribut a.link yaitu href (  )

$("#loadingimg").fadeIn(); berarti kita  memerintahkan jQuery untuk mengeksekusi element dengan nama attribut id "loadingimg" .fadeIn(); berarti memunculkan sedangkan .fadeOut(); sebaliknya. 

('#HasilJQ').load(url);  berarti kita  memerintahkan 
jQuery untuk mengeksekusi element dengan nama attribut id "HasilJQ" 
dimana div dengan id tersebut akan dimanipulasi untuk menampilkan data 
URL yang telah kita definisikan variabelnya terlebih dahulu

return false; akhiri setiap fungsi dengan return false hal ini untuk mencegah data di refresh oleh browser pada saat element di eksekusi

OK ini merupakan awal dan pengantar jQuery, semoga bermanfaat. Untuk lebih lanjut tentang jQuery silahkan buka situs resminya http://www.jQuery.com

Sumber:

http://www.w3function.com/blog/index.php?p=det&idn=32     diakses hari Sabtu, 2 Maret 2013, 06:41 WIB.