Materi Mata Kuliah

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 10 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

Pengenalan jQuery

jQuery adalah library JavaScript yang dirancang untuk mempermudah penulisan kode JavaScript, terutama dalam hal:

  • Manipulasi DOM
  • Event handling
  • Efek dan animasi

Dengan jQuery, penulisan kode menjadi lebih singkat, cepat, dan mudah dipahami dibandingkan JavaScript murni (vanilla JavaScript).


1. Pengertian jQuery

jQuery adalah kumpulan fungsi JavaScript siap pakai yang membantu developer melakukan berbagai tugas tanpa harus menulis kode panjang.

👉 Motto jQuery:
"Write Less, Do More"


2. Fungsi jQuery dalam Website

Beberapa fungsi utama jQuery:

  • Mempermudah manipulasi HTML & CSS
  • Menangani event dengan mudah
  • Membuat animasi sederhana
  • Mendukung berbagai browser

3. Cara Menggunakan jQuery (CDN)

Cara paling mudah menggunakan jQuery adalah melalui CDN.

Contoh:

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

👉 Letakkan sebelum tag </body> atau di <head>.


4. Struktur Dasar jQuery

 
$(document).ready(function() {
// kode jQuery
});
 

👉 Artinya:

  • Jalankan kode setelah halaman selesai dimuat

Versi singkat:

 
$(function() {
// kode jQuery
});
 

5. Selector jQuery

Selector digunakan untuk memilih elemen HTML.

Selector Fungsi
$("p") Semua paragraf
$("#id") Berdasarkan ID
$(".class") Berdasarkan class

Contoh:

 
$("#judul").text("Judul Baru");
 

6. Perbandingan JavaScript vs jQuery


JavaScript (Vanilla JS)

 
document.getElementById("judul").innerHTML = "Hello";
 

jQuery

 
$("#judul").html("Hello");
 

👉 jQuery lebih singkat dan mudah dibaca.


7. Contoh Program Sederhana jQuery

 
<!DOCTYPE html>
<html>
<head>
<title>Belajar jQuery</title>

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

<h1 id="judul">Judul Lama</h1>
<button id="btn">Klik Saya</button>

<script>
$(document).ready(function() {
$("#btn").click(function() {
$("#judul").text("Judul Baru dengan jQuery");
});
});
</script>

</body>
</html>
 

8. Kelebihan jQuery

  • Sintaks lebih sederhana
  • Lebih cepat dalam penulisan kode
  • Kompatibel dengan banyak browser
  • Banyak plugin tersedia

9. Kekurangan jQuery

  • Kurang relevan untuk framework modern (React, Vue)
  • Menambah ukuran file
  • Tidak selalu diperlukan untuk project kecil

Kesimpulan

jQuery adalah library JavaScript yang mempermudah penulisan kode dalam manipulasi DOM, event handling, dan animasi. Dengan sintaks yang lebih sederhana dibandingkan JavaScript murni, jQuery sangat cocok untuk pemula dalam memahami konsep interaksi pada website. Namun, penggunaannya perlu disesuaikan dengan kebutuhan karena saat ini banyak framework modern yang mulai menggantikan perannya.


Report Error