jQuery Adalah? Pengertian, Fungsi dan Contohnya

Last Updated on December 20, 2021 by

Bagi orang-orang yang sudah terbiasa membuat website profesional, pasti sudah tidak asing lagi dengan penggunaan jQuery. Lantas, bagaimana dengan Anda? Apakah Anda sudah familiar dengan penggunaan jQuery?

Sebagai pemula, wajar apabila Anda tidak terlalu paham. Oleh karena itu, kami berkenan untuk menjelaskannya secara detail dan terperinci. jQuery adalah library JavaScript yang didesain untuk menyederhanakan client side scripting, membantu Anda untuk membuat website lebih cepat.

Berbekal dengan jQuery, Anda dapat menambahkan animasi, membuat efek handling dan lain sebagainya. Penggunaannya bukan hanya dapat membuat situs website Anda menjadi lebih profesional, tetapi juga mampu membuat tampilan desain web Anda menjadi lebih menarik.

Website profesional, responsive dan memiliki tampilan yang menarik, tentu akan membuat para pengunjung merasa nyaman dan betah berlama-lama dalam mengakses situs web yang Anda buat. Untuk itu, penting juga bagi Anda untuk mengenal dan mempelajari jQuery.

Pengertian JQuery Adalah?

Apa itu jQuery? Sebagaimana yang telah dijelaskan sebelumnya, bahwa jQuery adalah library JavaScript yang cukup handal, praktis dan memiliki fitur-fitur yang lengkap. JQuery biasa digunakan untuk pemrosesan di HTML, mulai dari melakukan perubahan manipulasi dokumen, membuat animasi, membuat event handling dan dapat melakukan Ajax dengan lebih sederhana.Penggunaan jQuery telah didukung dengan API, sehingga dapat bekerja dan dapat digunakan pada berbagai macam jenis browser.

Dengan menerapkan kombinasi versatility dan extensibility, telah banyak para programmer yang menggunakan bahasa pemrograman JavaScript dengan banyak perubahan berkat adanya pemakaian jQuery ini. Hal tersebut merupakan salah satu bukti nyata, bahwa jQuery merupakan salah satu library yang populer pada penggunaan JavaScript.

Fungsi dan Kegunaan JQuery

Singkatnya, fungsi dan kegunaan jQuery adalah sebagai library JavaScript yang dapat membantu penggunanya dalam mengatur interaksi antara JavaScript dengan HTML yang berjalan di sisi klien. Berikut ini adalah fungsi dan kegunaan jQuery yang lebih spesifik.

Untuk Memisahkan JavaScript dan HTML

Meskipun tanpa menggunakan atribut-atribut HTML dan untuk menggunakan fungsi Javascript dalam menangani event, Anda bisa langsung menggunakan jQuery untuk menangani event dengan menggunakan script JS.

Mempermudah Penulisan Kode

Salah satu kegunaan dari jQuery, adalah mengutamakan penulisan kode yang lebih singkat dan jelas, yakni melalui berbagai fitur yang dapat digunakan untuk merangkaikan kode dan untuk membuat nama-nama fungsi menjadi lebih pendek.

Mampu Mengatasi Masalah Kompatibilitas Antar Browser

JavaScript engine dalam berbagai browser mempunyai perbedaan satu sama lain, sehingga script yang dijalankan pada suatu browser kemungkinan bisa gagal dijalankan pada browser lainnya. Namun kehadiran dari jQuery mampu mengatasi berbagai inkonsistensi antara browser dengan baik, karena jQuery mampu menyajikan interface secara konsisten dan dapat bekerja pada semua jenis browser.

Memiliki Kemampuan Extensible

jQuery mampu menjadikan pengembangan framework menjadi lebih simple, yakni dalam berbagai elemen, event hingga metode baru yang dapat ditambahkan dan dipakai ulang sebagai plugin.

Fitur-Fitur Pada JQuery

JQuery memiliki beberapa fitur unggulan. Yang mana, fitur-fitur yang dimiliki oleh jQuery adalah sebagai berikut.

• Fitur yang dapat digunakan untuk memanipulasi HTML/DO
• Fitur yang dapat digunakan untuk memanipulasi CSS
• Fitur yang dapat digunakan untuk HTML Event Methods
• Fitur yang dapat digunakan untuk membuat Efek dan Animasi
• Fitur yang dapat digunakan untuk membuat AJAX
• Fitur yang dapat digunakan untuk membuat CSS3 Compliant
• Fitur yang dapat digunakan untuk membuat Cross-Browser

Selain itu, keunggulan utama dari penggunaan jQuery merupakan bagian dari kesederhanaannya. Sebab, untuk menerapkan penggunaan jQuery, Anda hanya membutuhkan sedikit pengetahuan mengenai jenis bahasa pemrograman yang dapat digunakan untuk membuat berbagai macam animasi-animasi yang menarik.

Di sisi lain, jQuery adalah jenis library yang sangat fleksibel, karena pengguna dapat langsung menambahkan plugin ketika menggunakannya. Jadi ketika Anda belum mengetahui bagaimana cara untuk mengatur sebuah baris kode menggunakan CSS, maka Anda bisa melakukannya menggunakan jQuery.

Melalui jQuery dan didukung kerjasama sebuah tim yang solid membuat proses pengembangan menjadi lebih cepat dan efektif, yang mana proses ini dapat menghemat biaya di dalam proses pengembangan.

Kelebihan dan Kekurangan jQuery

Dari sekian banyak jenis open source yang ada, jQuery merupakan jenis yang memiliki banyak dukungan, karena memiliki banyak kelebihan, yakni.

1)    Dapat berinteraksi dengan baik dalam semua macam tipe bahasa pemrograman lain.

2)    Mampu mendukung berbagai macam jenis plugin.

3)    Mampu digunakan untuk menciptakan sebuah animasi dasar dengan sangat mudah.

Meskipun memiliki banyak keunggulan, jQuery juga mempunyai beberapa kekurangan, yang diantaranya adalah.

1)    Sudah banyak tersedia versi jQuery, sehingga beberapa versi lama sudah tidak begitu kompatibel.

2)    jQuery adalah  menyediakan fitur fitur lightweight interface, yang kemungkinan dapat menimbulkan permasalahan untuk web Anda.

Terkait dari beberapa kekurangannya, hal tersebut disebabkan karena tidak adanya standarisasi yang mengaturnya. Namun untuk meminimalisir kekurangan yang ada karena permasalahan pada jQuery ini, Anda bisa mengetahui informasi tentang bagaimana tata cara penggunaan beserta contohnya.

Cara Menggunakan jQuery dan Contohnya

Pada dasarnya, jQuery memiliki sebuah motto, yakni “Writer less, do more”. Dalam hal ini, Anda bisa membandingkan dua program sederhana “Hello, World!” pada JavaScript dan dengan menggunakan jQuery.

Dari sini, Anda bisa melihat seperti apa perbedaannya? Dan bagaimana program tersebut ditulis menggunakan JavaScript dan jQuery?

Nah, untuk lebih jelasnya simaklah, di bawah ini.

Javascript

document.getElementById(“demo”).innerHTML = “Hello, World!”;

 jQuery

$(“#demo”).html(“Hello, World!”);

Baris kedua kode di atas merupakan sebuah contoh tentang bagaimana jQuery dapat menghasilkan output yang sama, namun dengan menggunakan baris kode yang lebih sederhana.

Selain kedua contoh tersebut, masih ada beberapa contoh lain yang membuktikan bahwa jQuery dapat digunakan untuk memudahkan aktivitas programming Anda. Berikut adalah beberapa contohnya.

Contoh Penggunaan Kode jQuery untuk Membuat Efek Sliding

$(document).ready(function(){

$(“#flip”).click(function(){

   $(“#panel”).slideDown(“slow”);

 });

});

Contoh Penggunaan Kode jQuery untuk Membuat Fade In dan Fade Out

$(document).ready(function(){

$(“button”).click(function(){

 $(“#div1”).fadeIn();

   $(“#div2”).fadeIn(“slow”);

   $(“#div3”).fadeIn(3000);

});

});

 Contoh Penggunaan Kode jQuery untuk Membuat Efek Hide and Show

$(document).ready(function(){

$(“#hide”).click(function(){

  $(“p”).hide();

});

$(“#show”).click(function(){

  $(“p”).show();

});

});

Contoh Penggunaan Kode jQuery untuk Membuat Efek Animasi

$(document).ready(function(){

 $(“button”).click(function(){

  $(“div”).animate({left: ‘250px’});

});

});

JQuery adalah salah satu jenis library yang cukup populer dan sekaligus dapat mempermudah Anda dalam menggunakan bahasa pemrograman JavaScript. Tak hanya itu saja, karena Anda juga dapat memanfaatkan library ini untuk mempermudah proses pengembangan aplikasi web.

Pasalnya, sintaks yang digunakan lebih sederhana daripada penggunaan JavaScript itu sendiri, sehingga program Anda dapat terlihat lebih sederhana tapi mempunyai fitur yang kompleks.