Bab 2: Cara Menggunakan jQuery (CDN & Lokal)

Bab 2: Cara Menggunakan jQuery (CDN & Lokal)

Setelah memahami pengenalan jQuery pada bab sebelumnya, langkah selanjutnya adalah mempelajari cara menggunakan jQuery di dalam website. Agar jQuery dapat dijalankan, kita harus menambahkannya ke dalam file HTML.

Pada Bab 2: Cara Menggunakan jQuery, kita akan membahas dua metode utama, yaitu menggunakan jQuery CDN dan jQuery lokal, lengkap dengan contoh penerapannya.

Persiapan Sebelum Menggunakan jQuery

Sebelum memulai, pastikan Anda memiliki:

  • File HTML
  • Text editor (VS Code, Sublime Text, Notepad++)
  • Browser modern (Chrome, Firefox, Edge)

Cara Menggunakan jQuery dengan CDN

Apa Itu jQuery CDN?

CDN (Content Delivery Network) adalah server online yang menyediakan file jQuery sehingga kita tidak perlu menyimpannya di server sendiri. Metode ini adalah cara paling mudah dan cepat menggunakan jQuery.

Kelebihan Menggunakan CDN

  • Tidak perlu download file jQuery
  • Loading lebih cepat
  • Hemat ruang penyimpanan server

Contoh Penggunaan jQuery CDN

Tambahkan kode berikut sebelum tag penutup </body>:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Struktur HTML lengkap:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Belajar jQuery</title>
</head>
<body>

<h1 id="judul">Belajar jQuery</h1>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $("#judul").css("color", "blue");
</script>

</body>
</html>

Jika teks berubah warna, berarti jQuery berhasil digunakan.

Cara Menggunakan jQuery Secara Lokal

Apa Itu jQuery Lokal?

jQuery lokal berarti kita mengunduh file jQuery dan menyimpannya langsung di folder project.

Kelebihan jQuery Lokal

  • Bisa digunakan tanpa koneksi internet
  • Lebih stabil untuk project offline
  • Kontrol penuh terhadap file

Langkah-langkah Menggunakan jQuery Lokal

  1. Download jQuery dari website resmi
  2. Simpan file jquery.min.js ke folder project
  3. Hubungkan ke HTML menggunakan tag <script>

Contoh Struktur Folder

project-jquery/
│
├── index.html
└── js/
    └── jquery.min.js

Contoh Kode HTML jQuery Lokal

<script src="js/jquery.min.js"></script>

Gunakan script jQuery seperti biasa setelahnya.

Perbedaan jQuery CDN dan Lokal

PerbandinganCDNLokal
Koneksi InternetDiperlukanTidak
KecepatanLebih cepatTergantung server
KeamananCDN terpercayaKontrol sendiri
KemudahanSangat mudahPerlu download

Penempatan Script jQuery yang Benar

Agar jQuery berjalan dengan baik:

  • Letakkan file jQuery sebelum script jQuery buatan sendiri
  • Disarankan di bagian akhir body

Contoh urutan yang benar:

<script src="jquery.min.js"></script>
<script src="script.js"></script>

Kesalahan Umum Saat Menggunakan jQuery

Beberapa kesalahan yang sering terjadi:

  • ❌ Memanggil jQuery sebelum file dimuat
  • ❌ Salah path file jQuery lokal
  • ❌ Tidak menunggu dokumen siap

Gunakan $(document).ready() untuk menghindari error:

$(document).ready(function(){
  console.log("jQuery siap digunakan");
});

Kesimpulan

Pada Bab 2: Cara Menggunakan jQuery (CDN & Lokal), kita telah mempelajari dua cara utama untuk menjalankan jQuery di website. Untuk pemula, penggunaan CDN sangat disarankan karena lebih praktis. Namun, jQuery lokal cocok untuk project offline atau kebutuhan khusus.

Pada bab berikutnya, kita akan membahas selector jQuery sebagai dasar manipulasi elemen HTML.

Related Posts