jQuery: Definisi, Fitur, Penggunaan jQuery dalam Pengembangan Website

Berikut adalah artikel berisi definisi, fitur, dan penerapan jQuery dalam desain dan pengembangan website. Tulisan ini dialihbahasakan oleh Eka Y Saputra dari berbagai sumber.

Definisi jQuery

jQuery adalah library JavaScript multiplatform yang dirancang untuk memudahkan penyusunan client-side script pada file HTML.

Digunakan oleh 60 persen dari 10000 situs web paling banyak dikunjungi di dunia, jQuery adalah library JavaScript yang paling populer saat ini. jQuery merupakan sebuah perangkat lunak bebas sumber terbuka yang berada di bawah lisensi MIT.

Sintaks jQuery dirancang sedemikian rupa untuk memudahkan pengembang website dalam menavigasi dokumen, menyeleksi elemen-elemen DOM, menerapkan animasi, mengaplikasikan events, serta membangun aplikasi AJAX.

jQuery juga memampukan developer menciptakan berbagai plugin berbasis library JavaScript. Dengan plugin-plugin tersebut, pengembang situs web mampu menyusun sejumlah abstraksi untuk interaksi dan animasi sederhana, juga beberapa efek yang cukup kompleks dan berbagai widget yang dapat dikonfigurasikan.

Karakter library JavaScript yang modular mendukung pengembangan laman web dinamis dengan berbagai fitur dan aplikasi berbasis web (web app).

Fitur-fitur inti jQuery – meliputi penyeleksian, traversal, dan manipulasi elemen-elemen DOM – dimampukan oleh sebuah selector engine (dinamai Sizzle mulai versi 1.3), telah mewujudkan suatu gaya pemrograman baru yang memadukan antara algoritma dan struktur data DOM. Gaya ini telah mempengaruhi arsitektur dari framework JavaScript lainnya seperti YUI v3 dan Dojo, dan di kemudian menstimulasi pengembangan Selectors API standar.

Microsoft dan Nokia membundel jQuery pada platform mereka. Microsoft memasukkannya dalam Visual Studio untuk digunakan dalam framework ASP.NET AJAX dan ASP.NET MVC, sedangkan Nokia mengintegrasikannya dalam platform pengembangan widget Web Run-Time. jQuery juga mulai dipakai pada MediaWiki sejak versi 1.16.

Situs resmi jQuery beralamat di jquery.com. Pengembangannya dikelola oleh jQuery Foundation yang berada di jquery.org. Library ini bisa diunduh di laman jquery.com/download, atau diterapkan melalui sejumlah CDN termasuk Google jQuery CDN.


Membedah jQuery

jQuery, pada intinya, adalah sebuah library yang berfungsi untuk memanipulasi DOM. DOM merupakan representasi struktural dari seluruh elemen pada sebuah laman web.

Keberadaan jQuery menjadikan kerja pencarian, penyeleksian, dan manipulasi elemen-elemen DOM menjadi simpel dan mudah. Sebagai contoh, jQuery bisa dipergunakan untuk menemukan sebuah elemen dalam dokumen yang memiliki properti tertentu (misalnya: elemen dengan tag `h1`), kemudian mengubah satu atau beberapa atributnya (misalnya: warna, visibilitas), atau menjadikan elemen tersebut responsif terhadap suatu event (misalnya: klik mouse).

Selain penyeleksian dan manipulasi DOM dasar, jQuery menyajikan sebuah paradigma baru pada penanganan event oleh JavaScript. Penugasan event dan pendefinisian fungsi event callback dapat dilakukan dengan satu langkah dalam satu lokasi di dalam kode.

jQuery juga dikembangkan untuk mendayagunakan berbagai fungsionalitas JavaScript yang paling sering dipakai (misalnya: fade in atau fade out ketika menentukan visibilitas elemen, juga bermacam animasi yang dimunculkan dengan memanipulasi properti-properti CSS).

Keuntungan dari pemanfaatan jQuery antara lain:

  • Memisahkan JavaScript dan HTML → Tanpa menggunakan atribut-atribut HTML untuk memanggil fungsi Javascript dalam penanganan event, jQuery bisa dipergunakan untuk menangani event dengan script JS saja.
  • Singkat dan Jelas → jQuery mengutamakan penulisan kode yang singkat dan jelas melalui berbagi fitur seperti fungsi-fungsi yang dapat dirangkaikan (chain-able) dan nama-nama fungsi yang pendek.
  • Mengatasi masalah kompatibilitas antar-browser → JavaScript engine pada berbagai browser memiliki perbedaan satu sama lain, sehingga script yang berjalan pada suatu browser bisa gagal pada browser lainnya. jQuery mengatasi segala inkonsistensi antar-browser tersebut dan menyajikan antarmuka yang konsisten bekerja pada semua browser.
  • Ekstensibel → jQuery menjadikan pengembangan framework sangat simpel. Berbagai event, elemen, dan metode baru dapat dengan mudah ditambahkan dan digunakan ulang sebagai plugin.

 

Fitur-fitur jQuery

jQuery memiliki fitur-fitur sebagai berikut:

  • Penyeleksian elemen-elemen DOM menggunakan selector engine Sizzle. Sizzle merupakan perangkat lunak multiplatform sumber terbuka yang berawal sebagai proyek sampingan jQuery.
  • Manipulasi DOM berdasarkan selektor CSS yang memanfaatkan nama-nama dan atribut elemen, misalnya id dan class, sebagai kriteria seleksi simpul-simpul DOM.
  • Events
  • Efek dan animasi
  • AJAX
  • Obyek-obyek deferred and promose untuk mengontrol pemrosesan asinkron
  • Penguraian JSON
  • Ekstensibilitas melalui plugin
  • Sejumlah utilitas, misalnya: informasi agen pengguna (user agent), deteksi fitur perangkat
  • Metode-metode kompatibilitas yang tersedia secara bawaan pada browser-browser modern, namun membutuhkan pencadangan pada browser yang lebih tua, misalnya `inArray()` dan `each`
  • Dukungan multi-browser

 

Browser yang Didukung jQuery

Baik versi 1.x maupun 2.x dari jQuery, keduanya mendukung “current-1 versions” (artinya versi stable terkini dari sebuah browser dan satu versi yang mendahuluinya) untuk Firefox, Google Chrome, Safari, dan Opera.

Versi 1.x juga mendukung IE 6 atau diatasnya. Sedangkan versi 2.x tidak lagi mendukung Internet Explorer 6 sampai 8 (yang mewakili kurang dari 28% dari seluruh browser yang digunakan) dan hanya mendukung IE 9 dan selanjutnya.


Penggunaan jQuery

Menautkan library

Library jQuery adalah sebuah file JavaScript yang memuat seluruh fungsi-fungsi umum DOM, event, efek, dan Ajax.  File ini bisa ditautkan dalam sebuah laman web ke salinan pada server lokal atau pada salinan yang disajikan melalui server publik (CDN) antara lain:

Untuk menautkan file jQuery pada server lokal, gunakan kode berikut:

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

Untuk menggunakan CDN, sisipkan kode berikut:

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
Gaya Penggunaan

jQuery memiliki dua gaya penggunaan:

  • Via fungsi $ → adalah factory method untuk obyek jQuery. Fungsi-fungsi semacam ini, kerap disebut sebagai commands (perintah), dapat dirangkaikan (chainable) sebab masing-masing menyajikan obyek.
  • Via fungsi $.-prefiks → fungsi-fungsi utilitas yang tidak dijalankan secara langsung pada obyek.

Pada penggunaan tipikal, akses dan manipulasi atas simpul-simpul DOM diawali dengan pemanggilan fungsi $ menggunakan string selektor CSS. Metode ini menghasilkan sebuah obyek jQuery yang merujuk pada elemen-elemen HTML yang sesuai.

Sebagai contoh, $(“div.namaclass”) akan menghasilkan obyek dengan tipe “div” dan class “namaclass”. Simpul ini dapat dimanipulasi dengan menyambungkan satu atau beberapa fungsi jQuery di belakangnya.

Mode No-Conflict

jQuery juga memuat mode .noConflict() yang melepaskan kontrol dari $. Fitur ini sangat berguna jika jQuery digunakan bersama dengan library lainnya yang juga memakai penanda $.

Pada mode no-conflict, kita bisa menggunakan jQuery sebagai pengganti dari $ tanpa kehilangan fungsionalitasnya.

(bersambung)

There are 6 comments

Tuliskan pendapatmu

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *