jQuery adalah perpustakaan Javascript yang menyederhanakan pemrograman JavaScript™ dan AJAX (Asynchronous JavaScript + XML, Asynchronous Javascript dan XML). Berbeda dengan perpustakaan Javascript lainnya, jQuery memiliki filosofi tersendiri yang memudahkan Anda menulis kode. Artikel ini akan mengarahkan Anda untuk memahami filosofi jQuery, mendiskusikan fitur dan fungsinya, dan memberikan beberapa contoh ajax dan cara menggunakan plug-in untuk memperluas jQuery.
1. Apa itu jQuery?
jQuery adalah perpustakaan Javascript yang luar biasa. Ia lahir pada tahun 2006 dan dibuat oleh John Resig. Apakah Anda seorang pemula JavaScript tetapi ingin mencoba kompleksitas DOM (Document Object Model) dan Ajax, atau Anda seorang ahli JavaScript tetapi bosan mengulangi skrip DOM dan Ajax yang membosankan, jQuery akan menjadi pilihan terbaik Anda. .
jQuery akan membantu Anda menjaga kode Anda tetap sederhana dan ringkas. Anda tidak lagi harus menulis banyak loop berulang atau skrip panggilan DOM. Dengan menggunakan jQuery, Anda akan dengan cepat menemukan poin-poin penting dan mengekspresikan ide Anda dengan kode paling sedikit.
Filosofi jQuery sebenarnya sangat sederhana: sederhana dan dapat digunakan kembali. Ketika Anda memahami dan menyetujui ide ini, Anda akan mulai menyadari betapa mudah dan menyenangkannya penggunaan jQuery dalam pemrograman Anda!
2. Beberapa Konsep Sederhana
Berikut adalah contoh sederhana untuk menunjukkan bagaimana jQuery mempengaruhi kode yang Anda tulis. Apa yang Anda lakukan sebenarnya sangat sederhana, seperti menambahkan peristiwa respons klik ke semua link di area tertentu pada halaman. Anda dapat menggunakan Javascript umum dan DOM untuk menulisnya. Lihat Listing 1 untuk kodenya:
Listing 1. Skrip DOM tanpa jQuery
var external_links = document.getElementById('external_links');var links = external_links.getElementsByTagName('a');for (var i=0;i < links.length;i++) {var link = links.item(i) ;link.onclick = function() {return konfirmasi('Anda akan mengunjungi: ' + this.href);};} Jika Anda menggunakan jQuery, implementasinya adalah sebagai berikut: Listing 2. Pembuatan skrip DOM dengan jQuery$(' #external_links a').click( function() {return konfirmasi('Anda akan mengunjungi: ' + this.href);}); Dengan jQuery, Anda dapat dengan cepat menemukan poin-poin penting dan hanya mengungkapkan apa yang perlu Anda ungkapkan tanpa bertele-tele. Tidak perlu mengulangi elemen-elemen ini, fungsi click() akan menangani semuanya. Dan Anda tidak perlu menulis terlalu banyak kode untuk memanipulasi DOM. Yang Anda perlukan hanyalah menggunakan beberapa karakter untuk mendefinisikan elemen yang Anda cari. Mari kita lihat cara kerja kode ini, dengan beberapa trik. Pertama, lihat fungsi $()—salah satu fungsi yang paling berguna dan kuat di jQuery. Seringkali, Anda menggunakan fungsi ini untuk memilih elemen dari dokumen. Dalam contoh ini, gunakan fungsi ini untuk meneruskan string For dalam Cascading Sintaks Style Sheets (CSS), jQuery dapat dengan mudah menemukan elemen ini. Jika Anda tahu sedikit tentang pemilih CSS dasar, saya pikir sintaks ini akan terlihat cukup familiar. Di Listing2, # external_links digunakan untuk menemukan elemen dengan id external_links spasi berikut berarti jQuery perlu menemukan semua elemen <a> dalam elemen #external_links. Agak sulit untuk mengungkapkannya dalam bahasa lisan - juga cukup merepotkan untuk menulis dalam skrip DOM, namun dalam CSS, tidak ada yang lebih sederhana. dari ini. Fungsi $() mengembalikan objek jQuery yang berisi semua elemen yang cocok dengan pemilih css. Konsep objek jQuery seperti array, tetapi mungkin berisi banyak objek jQuery berfungsi untuk mengikat respons peristiwa klik ke setiap elemen dalam objek jQuery.
Anda juga dapat meneruskan elemen atau array elemen ke fungsi $(), yang akan menambahkan semua Elemen yang dikemas ke dalam objek jQuery fitur ini ke objek seperti windows. Misalnya, Anda mungkin menggunakan fungsi ini untuk memuat acara, seperti ini:
window.onload = function() {// lakukan hal ini setelah halaman selesai dimuat};
$(window).load(function() {// jalankan ini ketika seluruh halaman telah diunduh}); Seperti yang Anda ketahui, menunggu jendela dimuat sangatlah menyakitkan karena seluruh halaman harus dimuat, termasuk semua yang ada di dalamnya halaman Gambar. Dalam beberapa kasus, Anda perlu memuat gambar terlebih dahulu, tetapi sebagian besar waktu, Anda mungkin hanya perlu melihat markup hypertext (HTML). jQuery memecahkan masalah ini dengan membuat acara yang sangat khusus yang siap di dokumen, yaitu metode penggunaannya adalah sebagai berikut: $(document).ready(function() {// lakukan hal ini ketika HTML sudah siap}); Kode ini membuat objek jQuery dari elemen dokumen, dan kemudian memanggilnya ketika html DOM dokumen siap Contoh ini Anda dapat memanggil fungsi ini berkali-kali.
Dalam pengkodean gaya jQuery yang sebenarnya, ada juga bentuk singkatan dari fungsi ini. Cukup teruskan suatu fungsi ke fungsi $():
$(function() {// jalankan ini setelah HTML selesai diunduh}); Sejauh ini, saya telah menunjukkan kepada Anda tiga cara berbeda untuk menggunakan fungsi $(). Cara keempat, Anda dapat menggunakan String Membuat elemen. Hasilnya adalah objek jQuery yang berisi elemen ini. Listing 3 menunjukkan contoh penambahan paragraf ke halaman:
Listing 3. Membuat dan menambahkan paragraf sederhana
$('<p></p>'). !').css('background', 'kuning').appendTo("body"); Seperti yang Anda lihat dari contoh di atas, fitur lain yang sangat kuat dari jQuery adalah rangkaian metode (metode chaining), setiap kali Anda memanggil a metode pada objek jQuery, metode ini juga akan mengembalikan objek jQuery. Artinya jika Anda perlu memanggil beberapa metode pada objek jQuery, Anda tidak perlu menulis penyeleksi css berulang kali.
$('#message').css('background', ' yellow').html('Hello!').show();3.jQuery membuat Ajax menjadi sangat sederhana. Menggunakan jQuery, Ajax tidak bisa menjadi lebih sederhana memiliki serangkaian fungsi yang dapat membuat hal-hal sederhana menjadi sangat sederhana dan membuat hal-hal rumit menjadi sesederhana mungkin. Penggunaan umum Ajax adalah memuat sepotong kode html ke area tertentu pada halaman elemen dan gunakan fungsi load(). Berikut adalah contoh memperbarui beberapa statistik. $('#stats').load('stats.html'); halaman samping. Seperti yang sudah Anda duga, menggunakan jQuery sangat mudah. Anda dapat memilih untuk menggunakan $.post() atau $.get(), tentu saja, tergantung pada kebutuhan spesifik Anda objek data opsional dan fungsi panggilan balik. Listing 4 adalah contoh sederhana pengiriman data dan penggunaan fungsi panggilan balik:
Listing 4. Mengirim data ke halaman dengan Ajax
$.post('save.cgi', {text: 'my string' ,number: 23}, function() {alert('Data Anda telah disimpan.');}); Jika Anda benar-benar menginginkan kode Ajax yang rumit, gunakan fungsi $.ajax() xml, html, skrip atau json, jQuery akan secara otomatis menyiapkan hasilnya untuk Anda dan fungsi panggilan balik Anda dapat segera menggunakan data tersebut. Anda juga dapat mengatur fungsi panggilan balik sebelumnya, kesalahan, sukses, dan selesai untuk Memberikan petunjuk lebih lanjut kepada pengguna tentang ajax. pengalaman. Selain itu, ada beberapa parameter yang memungkinkan Anda mengatur batas waktu untuk permintaan ajax, atau status "terakhir diubah" suatu halaman. Listing5 menunjukkan contoh mendapatkan dokumen xml dan menggunakan metode yang saya sebutkan di atas contoh beberapa parameter:
Listing 5. Ajax kompleks dibuat sederhana dengan $.ajax()
$.ajax({url: 'document.xml',type: 'GET',dataType: 'xml',timeout: 1000, error: function (){alert('Error memuat dokumen XML');},success: function(xml){// melakukan sesuatu dengan xml}}); Ketika Anda berhasil mendapatkan umpan balik xml, Anda dapat menggunakan jQuery untuk Melintasi dokumen xml seperti yang Anda lakukan dengan html. Ini membuatnya sangat mudah untuk memanipulasi file xml dan mengintegrasikan konten ke dalam halaman. Listing6 memperluas fungsi sukses, sesuai dengan setiap <item> dalam dokumen xml pada halaman Menambahkan item daftar
6 . Bekerja dengan XML menggunakan jQuery
sukses: function(xml){$(xml).find('item').each(function(){var item_text = $(this).text();$('<li><. /li>').html(item_text).appendTo('ol');});}