Download jQuery
Untuk memulai, unduh salinan jQuery terlebih dahulu dan sertakan dalam dokumen kalian. Ada dua versi jQuery yang tersedia untuk diunduh – compressed dan uncompressed.
File yang tidak dikompres paling cocok untuk development atau debugging; sementara itu, file yang diperkecil dan dikompres direkomendasikan untuk memproduksi karena dapat menghemat bandwidth dan meningkatkan kinerja karena ukuran filenya yang kecil.
Kalian dapat mengunduh jQuery dari sini: https://jquery.com/download/
Setelah mengunduh file jQuery, kalian dapat melihat file ekstensi .js, karena jQuery hanyalah JavaScript Library, oleh karena itu kalian dapat memasukkan file jQuery dalam dokumen HTML kalian dengan elemen <script> seperti halnya kalian memasukkan file JavaScript normal.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple HTML Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Selalu sertakan file jQuery di depan custom script kalian; jika tidak, API jQuery tidak akan tersedia ketika kode jQuery kalian mencoba mengaksesnya.
Including jQuery from CDN
Alternativenya, kalian dapat memasukkan jQuery dalam dokumen kalian melalui tautan CDN (Content Delivery Network) yang tersedia secara bebas, jika kalian tidak ingin mengunduh dan menjadi tuan rumah jQuery sendiri.
CDNs memberikan keuntungan dengan mengurangi waktu loading, karena hosting jQuery di beberapa server yang tersebar di seluruh dunia dan ketika user meminta file, maka akan diambil dari server yang terdekat dengan user tersebut.
Ini juga memberikan keuntungan bahwa jika pengunjung mengunjungi halaman web Kalian mereka telah otomatis mengunduh salinan jQuery dari CDN yang sama saat mengunjungi situs lain, dan hal tersebut tidak harus diunduh ulang karena sudah ada di cache browser.
jQuery CDN disediakan oleh MaxCDN
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
Kalian juga dapat memasukkan jQuery melalui Google dan Microsoft CDN.
Membuat Halaman Web yang Didukung jQuery Pertama Kalian
Sejauh ini kalian telah memahami tujuan jQuery library serta cara memasukkan-nya dalam dokumen kalian, sekarang saatnya kita mulai penggunaan jQuery.
Di bagian ini, kita akan melakukan operasi jQuery sederhana dengan mengubah warna teks judul dari warna hitam default menjadi merah.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First jQuery Powered Web Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").css("color", "#0088ff");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Pada contoh di atas kita telah melakukan operasi jQuery sederhana dengan mengubah warna judul headlinenya yaitu elemen <h1> menggunakan metode elemen selector jQuery dan css() ketika dokumen-nya siap yang dikenal sebagai ready event dokumen.
