1. Menambahkan jQuery ke Halaman Web Anda
Ada beberapa cara untuk mulai menggunakan jQuery di situs web Anda, diantaranya:
- Download perpustakaan jQuery dari jQuery.com
- Sertakan jQuery dari CDN, seperti Google
JQuery- Show and Hidden Text
2. Downloading jQuery
Tersedia dua versi jQuery yang bisa didownload:
- Versi produksi - ini digunakan untuk situs live, karena telah dirampingkan dan dikompres
- Versi pengembangan - ini digunakan untuk tujuan pengembangan dan pengujian (uncompressed and readable code)
- Kedua versi di atas dapat Anda download di jQuery.com.
jQuery library adalah file JavaScript tunggal, dan Anda bisa mereferensikannya dengan tag < script > HTML5 (sebagai catatan bahwa tag <script> harus berada di dalam elemen <head>)
<head>
<script src="jquery-1.11.3.min.js"></script>
</head>
Tips: Tempatkan file jQuery yang telah didownload ke dalam direktori yang sama, seperti halaman di mana Anda ingin menggunakannya.
3. jQuery CDN
Jika Anda tidak ingin men-download dan meng-host jQuery sendiri, Anda dapat memasukkannya dari CDN (Content Delivery Network).
Untuk jQuery dari Google atau Microsoft, silakan gunakan pilihan berikut ini:
Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
Microsoft CDN:
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
</head>
Salah satu keuntungan besar dari menggunakan host jQuery Google ataupun Microsoft adalah:
Banyak pengguna sudah mendownload jQuery Google ataupun Microsoft ketika mereka mengunjungi situs lain. Akibatnya, secara otomatis jQuery akan dimuat melalui cache saat mereka mengunjungi situs Anda, sehingga waktu loading menjadi lebih cepat. Disamping itu juga, kebanyakan CDN akan memastikan bahwa sekali pengguna meminta file tersebut, maka akan dilayani dari server yang terdekat dengan mereka, sehingga menjadikan waktu loading juga lebih cepat.
Contoh Project
<html>
<!-- bundet.com -->
<head>
<title>Belajar JQuery</title>
<script type="text/javascript" src="jquery-1.3.min.js"></script>
<script type="text/javascript">
$(document).ready (function() {
$('a.show').click (function() {
$('p.jquery').show("fast");
});
$('a.hide').click (function() {
$('p.jquery').hide("fast");
});
});
$(document).ready (function() {
$(".tombol1").click (function() {
$("#callback").show (1000,tampilkanAlert);
});
});
function tampilkanAlert () {
alert ("Sekarang Paragraph Telah Muncul");
}
</script>
</head>
<body>
<h1>Hello JQuery</h1>
<p><a href="#" class="show">show</a>
<a href="#" class="hide">hide</a></p>
<p class="jquery" style="display:none">Semboyan JQuery adalah "Write Less Do More"
dengan kata lain, kesederhanaan penulisan code, tetapi menghasilkan tampilan lebih.
</p>
<p id="callback" style="display:none">Ini adalah paragraph tersembunyi.</p>
<button class="tombol1">show</button>
</body>
</html>
Hasilnya:
https://youtu.be/9EWDKw4I2vg
