Cara Memakai JQuery - Judulnya kok aneh ya? Hehe, ga nemu kata yang cocok sih, yaudahlah pake kata include aja gapapa kan . Untuk menggunakan jQuery dalam sebuah halaman web, library JQuery perlu dimuat terlebih dahulu dalam dokumen HTML kita, untuk memberikan akses ke fungsi-fungsi jQuery. Jika library tidak dimuat saat halaman loading pertama kali, script yang menggunakan sintaks jQuery kemungkinan tidak akan berjalan. Untungnya, untuk proses loading jQuery sangat sederhana, dan ada beberapa pilihan cara yang tersedia untuk melakukannya. cara memasukkan jquery ke html, cara download jquery,
Cara Memakai jQuery Yang Sudah didownload
Opsi pertama untuk mengincludekan jQuery dalam sebuah halam web adalah dengan cara menyimpan hasil download jQuery dalam file yang kita gunakan. Adapun struktur dan cara memasukkannya sama seperti file JavaScript lainnya:
<script src="js/jquery-1.4.2.min.js"></script>
Remote Hosted jQuery
Pilihan kedua adalah untuk menggunakan salinan jQuery yang disimpan di hosting Google Code. Kelebihan cara ini adalah pengunjung web kita akan memakai salinan jQuery yang paling baru yang di cache dari web lain dengan versi yang sama. Hal ini dapat dengan signifikan mengurangi waktu load bagi pengguna situs kita. Caranya seperti cara pertama, hanya saja src di arahkan ke server Google Code seperti berikut ini:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Menggunakan Google AJAX API Libraries
Google Code juga menawarkan pilihan untuk versi jQuery yag diberi nama AJAX API Libraries (lihat http://code.google.com/apis/ajaxlibs). Menurut definisi dari website resmi Google, “The AJAX Libraries API is a content distribution network and loading architecture for the most popular, open source JavaScript libraries.”
Menggunakan AJAX API Libraries untuk sumber kode jQuery sangat sederhana dan mudah, dan inilah metode yang akan digunakan pada tutorial di blog ini. Untuk menggunakan jQuery dari AJAX API Libraries , gunakan potongan perintah berikut :
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
Menyiapkan File Untuk Pengujian File jQuery
Sekarang seluruh lingkungan pengujian Anda sudah diatur, jika belum baca dulu postingan ini. Buat folder baru dalam folder htdocs XAMPP Anda, lalu beri nama folder tersebut sesuai keinginan Anda, dalam tutorial ini saya menamakannya ‘latihan’. Didalam folder latihan tersebut, buatlah sebuah file html dengan nama index.html. Gunakan text editor favorit Anda, lalu isikan file berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Testing jQuery</title>
</head>
<body>
<p>Hello World!</p>
<p>Another paragraph, but this one has a class.</p>
<p><span>This is a span inside a paragraph.</span></p>
<p id="bar">Paragraph with an id.
<span>And this sentence is in a span.</span>
</p>
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
</script>
</body>
</html>
Perhatikan: Loading script JavaScript diletakkan sebelum tag body penutup (</ body>) dilakukan untuk menjaga script dari kemungkinan memblokir elemen halaman lainnya, seperti foto, gambar, dll. Hal ini juga mencegah JavaScript menjalankan fungsinya sebelum semua elemen sepenuhnya dimuat pada halaman. Hal tersebut yang dapat mengakibatkan perilaku yang tidak diharapkan atau kesalahan pada JavaScript kita.
Simpan dan buka halaman http://localhost/latihan/ pada Firefox (lihat gambar).
Hello World! yang melegenda
Selamat berkreasi dengan library javaScript terpopuler saat ini, jQuery
Judul: Cara Memakai JQuery Dalam Halaman Web
Rating: 100% based on 9998 ratings. 9 user reviews.
Ditulis Oleh resrsr
Terimakasih atas kunjungan beserta kesediaan Anda membaca artikel ini. Kritik dan Saran dapat Anda sampaikan melalui Kotak komentar dibawah ini.
Rating: 100% based on 9998 ratings. 9 user reviews.
Ditulis Oleh resrsr
Terimakasih atas kunjungan beserta kesediaan Anda membaca artikel ini. Kritik dan Saran dapat Anda sampaikan melalui Kotak komentar dibawah ini.
{ 0 comments... read them below or add one }
Post a Comment
Silahkan tinggalkan komentar :)