UNESA
d4mi@unesa.ac.id

jQuery: Pengertian, Fungsi, dan Penerapannya dalam Pengembangan Web

jQuery: Pengertian, Fungsi, dan Penerapannya dalam Pengembangan Web

- kategori Pengetahuan 277 Views

jQuery merupakan salah satu library JavaScript paling populer yang mempermudah proses manipulasi elemen HTML, penanganan event, animasi, dan interaksi AJAX. Meskipun framework modern seperti React, Vue, dan Angular sudah banyak digunakan, jQuery tetap relevan karena ukurannya kecil, mudah dipelajari, dan cocok untuk proyek sederhana hingga menengah.


Apa Itu jQuery?

jQuery adalah library JavaScript yang dirancang untuk menyederhanakan penulisan kode JavaScript terutama yang berkaitan dengan manipulasi Document Object Model (DOM). jQuery menggunakan sintaks yang ringkas, efisien, dan mudah dibaca sehingga mempercepat proses pengembangan web.

jQuery pertama kali dirilis oleh John Resig pada tahun 2006 dan secara cepat menjadi salah satu library paling banyak digunakan di dunia.


Keunggulan jQuery

Sintaks yang Sederhana

Dengan jQuery, developer dapat menulis kode yang lebih singkat untuk melakukan tugas kompleks.

Kompatibilitas dengan Semua Browser

jQuery mengatasi perbedaan perilaku JavaScript antar browser (cross-browser issues).

Banyak Plugin

Tersedia ribuan plugin yang memperluas fungsi jQuery, mulai dari slider, galeri, efek animasi, hingga form validation.

Mendukung AJAX dengan Mudah

jQuery mempermudah proses mengirim data ke server tanpa memuat ulang halaman.


Fungsi Utama jQuery

Manipulasi DOM

Memudahkan menambah, menghapus, dan mengubah elemen HTML.

Penanganan Event

Seperti klik, hover, scroll, dan input form.

Efek dan Animasi

jQuery dapat membuat animasi sederhana seperti fade, slide, dan custom animation.

AJAX

Untuk membuat website lebih dinamis dan interaktif tanpa reload halaman.


Contoh Dasar Penggunaan jQuery

1. Menyembunyikan Elemen

$("#box").hide();

2. Event Klik

$("#btn").click(function(){
  alert("Tombol ditekan!");
});

3. Mengubah Konten

$("#text").text("Halo dari jQuery!");

4. AJAX Sederhana

$.ajax({
  url: "data.json",
  method: "GET",
  success: function(response){
    console.log(response);
  }
});


Cara Menggunakan jQuery

Menggunakan CDN

Tambahkan kode berikut di dalam <head>:

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

Menggunakan File Lokal

Download jQuery dari jquery.com, lalu panggil menggunakan:

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

Kapan Harus Menggunakan jQuery?

jQuery cocok untuk kondisi berikut:

  • Proyek sederhana yang membutuhkan manipulasi DOM cepat

  • Form validation dan AJAX ringan

  • Web tradisional yang tidak memerlukan framework modern

  • Proyek yang sudah lama menggunakan jQuery (legacy code)

Untuk aplikasi besar, lebih baik menggunakan framework modern.

Scroll to Top