Apa Itu jQuery? Pengertian jQuery dan Contohnya untuk Pemula

Kalau Anda sering coding menggunakan JavaScript, jQuery adalah salah satu materi yang wajib dipelajari beserta cara menggunakannya. Dengan jQuery, alur kerja Anda akan menjadi lebih efisien, dan proses coding juga tentunya akan menjadi lebih cepat.

Di artikel ini, selain menjelaskan apa itu jQuery, kami juga akan membahas penggunaannya di lingkungan web development, serta manfaat dan fitur-fitur utamanya. Selain itu, ada beberapa tutorial singkat dari kami tentang cara menggunakan jQuery agar Anda bisa memahami cara kerjanya.

Mari mulai, jangan lupa untuk menyimak sampai selesai dan mencoba semuanya ya!

Download Istilah-Istilah Web Development untuk Pemula

Apa Itu JavaScript Library? Bagaimana Penggunaannya?

Satu library JavaScript terdiri dari beberapa file JavaScript yang memiliki berbagai fungsi. Sejumlah JS library, misalnya React, memiliki fungsi khusus, baik pada sisi klien maupun server.

Bisa dibilang, library jQuery adalah JS library yang paling populer di pasaran saat ini. Library ini mudah dimodifikasi dan digunakan, serta memiliki komunitas yang besar dengan banyak sekali materi pembelajaran, tutorial, dan dokumentasi lainnya.

Lebih kerennya lagi, jQuery kompatibel dengan library JavaScript lainnya, juga memiliki banyak plugin untuk membantu menyesuaikan fungsinya dengan kebutuhan Anda. Sayangnya, jQuery tidak bisa berjalan dengan bahasa pemrograman lain.

Kelebihan dan Kekurangan jQuery

Kalau Anda masih menimbang-nimbang apakah ‘worth it’ untuk mempelajari jQuery, sebaiknya ketahui dulu kelebihan dan kekurangan penggunaan JS library ini untuk web development.

Kelebihan jQuery

Salah satu kelebihan jQuery adalah event handling atau penanganan event. Pembuatan event seperti fungsi mouse click (klik mouse) dan form submission (pengiriman form) hanya memerlukan beberapa baris kode. Dengan begitu, kode HTML bisa tetap bersih dan bebas dari event handler.

Selain itu, mudah untuk memodifikasi elemen HTML berkat fitur DOM (Document Object Model) manipulation yang dimilikinya. Antarmuka web browser yang user-friendly memungkinkan Anda menambah, mengedit, dan menghapus elemen web menggunakan berbagai event method.

Metode AJAX secara khusus membuat jQuery sangat sesuai untuk mengembangkan website responsif menggunakan fungsi AJAX. Fitur ini meningkatkan pengalaman pengguna dengan menyederhanakan operasi permintaan HTTP tanpa harus reload halaman web.

Terlebih lagi, jQuery dilengkapi dengan banyak efek animasi. jQuery bahkan memungkinkan Anda membuat animasi kustom yang terdiri dari properti CSS pilihan Anda.

jQuery juga menyertakan dukungan lintas browser sehingga kompatibel dengan web browser yang populer saat ini. Library ini juga berfungsi dengan syntax CSS3 selector dan XML Path language.

Perlu diketahui bahwa script jQuery akan lebih mudah ditambahkan ke website melalui Content Delivery Network (CDN). Dengan begitu, Anda tak perlu mendownload dan menyimpan file library tersebut dalam folder website.

Kekurangan jQuery

Meskipun ringan, library jQuery sangatlah besar. Karena base kodenya terus berkembang, perlu waktu yang tidak sebentar untuk membuka file JS, yang juga akan memperberat kinerja komputer user.

jQuery juga sedikit mempersulit proses pembelajaran dan penggunaan JavaScript karena abstraksinya. Meskipun mampu menyederhanakan pembuatan event bagi pemula, tugas-tugas rumit seperti manipulasi DOM akan membutuhkan pemahaman JavaScript yang lebih mendalam demi mendapatkan hasil yang diinginkan.

Fitur-Fitur Penting jQuery

Kalau Anda ingin mempelajari jQuery beserta kegunaannya untuk Anda, simak lebih dulu beberapa contoh fungsi mendasar berikut ini.

1. Fungsi hide()

Fungsi hide() menyembunyikan elemen HTML agar tidak lagi memengaruhi halaman HTML. Fungsi ini berperan sebagai metode animasi apabila dipasangkan dengan parameter ‘duration’ dan ‘easing’, serta fungsi callback.

2. Fungsi show()

Fungsi show() menampilkan elemen HTML. Fungsi ini hanya bisa digunakan pada elemen yang disembunyikan dengan fungsi hide(). Selain itu, fungsi ini menjadi metode animasi kalau diberi parameter, sama seperti hide().

3. Fungsi toggle()

Fungsi toggle() memodifikasi visibilitas elemen HTML berdasarkan properti display CSS-nya menggunakan event klik. Kalau elemen terlihat, fungsi ini akan menyembunyikannya. Begitu pula sebaliknya, elemen akan terlihat apabila sebelumnya disembunyikan.

Web developer sering menggunakan fungsi ini untuk mengubah beberapa animasi menjadi satu urutan.

Kalau diberi parameter, fungsi ini bisa mengikat dua fungsi atau lebih ke elemen tertentu. Anda bisa beralih (toggle) di antara beberapa fungsi dengan mengklik elemen tersebut. Perlu diingat bahwa signature fungsi ini sudah diberhentikan pada jQuery versi 1.8, dan dihapus pada versi 1.9.

4. Fungsi fadeIn()

Fungsi fadeIn() memodifikasi keburaman (opacity) elemen HTML, yang membuatnya muncul secara bertahap di halaman HTML. Pasangkan fungsi ini dengan fungsi ‘speed’ atau ‘callback’ untuk menyesuaikan kecepatan animasinya dan memicu event berikutnya setelah elemen yang cocok ditampilkan sepenuhnya.

5. Fungsi fadeOut()

Fungsi jQuery ini adalah kebalikan fungsi fadeIn(). Sama seperti hide() dan show(), fadeIn() dan fadeOut() menjadi metode animasi kalau diberi parameter.

6. Fungsi fadeToggle()

Fungsi fadeToggle() mirip dengan fungsi toggle(). Fungsi ini memungkinkan user menampilkan atau menyembunyikan elemen tertentu secara bertahap.

7. Fungsi slideUp()

Fungsi slideUp() menyembunyikan elemen dengan animasi meluncur (sliding). Pasangkan dengan parameter ‘duration’ dan ‘easing’ untuk menyesuaikan durasi animasi.

8. Fungsi slideDown()

Fungsi slideDown() menampilkan elemen dengan animasi meluncur. Fungsi ini juga bisa digunakan bersama parameter ‘duration’ dan ‘easing’.

9. Fungsi slideToggle()

Fungsi slideToggle() memungkinkan Anda beralih antara slideUp() dan slideDown() untuk menampilkan atau menyembunyikan elemen.

10. Fungsi animate()

Fungsi ini menganimasikan elemen menggunakan satu atau beberapa properti CSS. Seperti yang sebelumnya, fungsi ini memungkinan Anda menyesuaikan durasi dan mode transisi, serta memulai fungsi berikutnya setelah fungsi ini selesai.

Perlu diingat, fungsi animate() tidak bisa menampilkan elemen tersembunyi seperti slideDown() dan fadeIn().

Contoh jQuery

Contoh berikut ini akan menunjukkan cara menggunakan fungsi slideDown(), slideUp(), dan slideToggle().

$("#flip").click(function(){
  $("#panel").slideDown();
});

Berikut adalah contoh cara menggunakan fungsi hide() dan show().

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

Contoh berikut ini menampilkan blok kode fungsi animate().

$("button").click(function(){
  $("div").animate({
      left: '250px',
      height: '+=150px',
      width: '+=150px'
  });
});

Berikut adalah contoh CSS manipulation.

$("button").click(function(){
  $("h1, h2, p").toggleClass("blue");
});

Kesimpulan

jQuery adalah salah satu library JavaScript yang paling populer di dunia. Library ini menawarkan berbagai manfaat, khususnya bagi para web developer. Oleh karena itu, kalau Anda berprofesi menjadi web developer, penting sekali untuk mempelajari cara menggunakan jQuery.

Library jQuery memungkinkan Anda menulis lebih sedikit kode JavaScript, tapi tetap bisa memanfaatkan fungsionalitasnya secara penuh. Dengan begitu, Anda bisa bekerja secara lebih efisien, dan bisa fokus pada bagian proyek lainnya yang perlu ditangani.

Semoga tutorial ini bisa memberikan sedikit pemahaman tentang apa itu jQuery serta cara memulainya, ya. Kalau Anda memiliki pertanyaan, silakan tinggalkan komentar pada kolom di bawah ini.