Panduan Dasar untuk JQuery untuk Programmer Javascript

Iklan

JQuery adalah salah satu perpustakaan JavaScript paling populer di planet ini (apa itu JavaScript Apa itu JavaScript, Dan Bisakah Internet Ada Tanpa Itu?JavaScript adalah salah satu dari banyak hal yang diterima begitu saja. Semua orang menggunakannya. Baca lebih banyak ). Pada saat awal, JavaScript (akan disebut sebagai JS dari sini masuk) berada di tempat yang sangat berbeda. 14 Januari 2006 adalah hari ketika jQuery diumumkan pada BarCampNYC. JS masih kurang - browser semua mendukung bagian itu, tetapi banyak peretasan dan penyelesaian harus diimplementasikan untuk kepatuhan.

JQuery datang dan mengubah segalanya. JQuery membuatnya sangat mudah untuk menulis kode yang sesuai dengan browser. Anda dapat membuat animasi halaman web tanpa memiliki gelar dalam ilmu komputer - hore! Sepuluh tahun berlalu, apakah jQuery masih raja, dan jika Anda belum pernah menggunakannya sebelumnya, apa yang dapat Anda lakukan dengannya?

Selain meningkatkan keterampilan JavaScript Anda, Anda mungkin ingin membaca beberapa

Tutorial HTML dan CSS Pelajari HTML dan CSS dengan Tutorial Langkah demi Langkah IniIngin tahu tentang HTML, CSS, dan JavaScript? Jika Anda berpikir bahwa Anda memiliki keahlian untuk mempelajari cara membuat situs web dari awal - berikut adalah beberapa tutorial langkah demi langkah yang patut dicoba. Baca lebih banyak pertama jika Anda tidak terbiasa dengan mereka.

Kita punya memperkenalkan jQuery Menjadikan Web Interaktif: Pengantar Untuk jQueryjQuery adalah perpustakaan skrip sisi klien yang digunakan hampir setiap situs web modern - menjadikan situs web interaktif. Ini bukan satu-satunya perpustakaan Javascript, tetapi itu adalah perpustakaan yang paling maju, paling didukung, dan paling banyak digunakan ... Baca lebih banyak sebelumnya, jadi panduan ini untuk JQuery akan fokus pada pengkodean sebenarnya.

Mulai

Anda mungkin terbiasa dengan cara JS memilih id dari Model Objek Dokumen (DOM):

document.getElementById ('foo');

Yah JQuery mengambil satu langkah lebih jauh. Anda tidak perlu memanggil metode yang berbeda untuk memilih kelas, id, atau beberapa elemen. Begini cara Anda memilih id:

$ ('# bar');

Mudah bukan? Sintaksnya persis sama untuk memilih hampir semua elemen DOM. Begini cara Anda memilih kelas:

$ ('. baz');

Anda juga bisa berkreasi untuk kekuatan nyata. Ini memilih semua td elemen di dalam a meja kecuali yang pertama.

$ ('table td'). not (': first');

Perhatikan bagaimana nama pemilih cocok dengan hampir persis rekan CSS mereka. Anda dapat menetapkan objek reguler Variabel JS:

var xyzzy = $ ('# parent .child');

Atau Anda dapat menggunakan variabel jQuery:

var $ xyzzy = $ ('# parent .child');

Tanda dolar hanya digunakan untuk menandakan bahwa variabel ini adalah objek jQuery, sesuatu yang sangat membantu pada proyek yang kompleks.

Anda dapat memilih induk suatu elemen:

$ ('child'). parent ();

Atau saudara kandung:

$ ('child'). siblings ();

Anda perlu menjalankan kode Anda setelah browser siap. Inilah cara Anda melakukannya:

$ (dokumen) .ready (function () {console.log ('ready!'); });

Lebih banyak kekuatan

Sekarang setelah Anda mengetahui dasar-dasarnya, mari beralih ke beberapa hal yang lebih rumit. Diberikan tabel html:

Membuat
Model
Warna


Mengarungi
Pengawal
Hitam


Mini
Cooper
Merah


Mengarungi
Cortina
putih

Katakanlah Anda ingin membuat setiap baris lain warna berbeda (dikenal sebagai Garis-garis Zebra). Sekarang Anda dapat menggunakan CSS untuk ini:

#cars tr: nth-child (datar) {background-color: red; }

Inilah yang bisa dicapai dengan jQuery:

$ ('tr: even'). addClass ('even');

Ini akan mencapai hal yang sama, asalkan bahkan adalah kelas yang didefinisikan dalam CSS. Perhatikan bagaimana pemberhentian penuh sebelum nama kelas tidak diperlukan. Ini adalah biasanya hanya diperlukan untuk pemilih utama. Idealnya, Anda akan menggunakan CSS untuk memulai ini, meskipun itu bukan masalah besar.

JQuery juga dapat menyembunyikan atau menghapus baris:

$ ('# fordCortina'). hide (); $ ('# fordCortina'). hapus ();

Anda tidak perlu menyembunyikan elemen sebelum menghapusnya.

Fungsi

Fungsi JQuery sama seperti JS. Mereka menggunakan kurung kurawal dan dapat menerima argumen. Di mana itu menjadi sangat menarik adalah melalui callback. Panggilan balik dapat diterapkan ke hampir semua fungsi jQuery. Mereka menentukan sepotong kode untuk dijalankan setelah tindakan inti selesai. Ini memberikan fungsionalitas yang sangat besar. Jika tidak ada, dan Anda menulis kode Anda mengharapkannya berjalan secara linier, JS akan terus mengeksekusi baris kode berikutnya sambil menunggu yang sebelumnya. Callback memastikan kode hanya berjalan setelah tugas asli selesai. Ini sebuah contoh:

$ ('table'). hide (function () {alert ('MUO rules!'); });

Diperingatkan - kode ini menjalankan peringatan untuk setiap elemen. Jika pemilih Anda adalah sesuatu di halaman lebih dari sekali, Anda akan mendapatkan banyak peringatan.

Anda dapat menggunakan panggilan balik dengan argumen lain:

$ ('tr: even'). addClass ('even', function () {console.log ('Hello'); });

Perhatikan bagaimana ada titik koma setelah kawat gigi penutup. Ini biasanya tidak diperlukan untuk fungsi JS, namun kode ini masih dianggap satu baris (karena panggilan baliknya ada di dalam tanda kurung).

Animasi

JQuery membuatnya sangat mudah untuk menghidupkan laman web. Anda dapat memudar elemen masuk atau keluar:

$ ('. fade1'). fadeIn ('slow'); $ ('# fade2'). fadeOut (500);

Anda dapat menentukan tiga kecepatan (lambat, sedang, cepat) atau angka yang mewakili kecepatan dalam milidetik (1000 ms = 1 detik). Anda bisa bernyawa hampir elemen CSS apa pun. Ini menghidupkan lebar pemilih dari lebar saat ini ke 250px.

$ ('foo'). animate ({width: '250px'});

Tidak mungkin menganimasikan warna. Anda dapat menggunakan panggilan balik dengan animasi juga:

$ ('bar'). animate ({height: '250px'}, function () {$ ('bar'). animate ({width: '50px'} });

Loop

Loop benar-benar bersinar di jQuery. Setiap() digunakan untuk beralih pada setiap elemen dari tipe yang diberikan:

$ ('li'). masing-masing (function () {console.log ($ (this)); });

Anda juga dapat menggunakan indeks:

$ ('li'). masing-masing (fungsi (i) {console.log (i + '-' + $ (ini)); });

Ini akan mencetak 0, kemudian 1 dan seterusnya.

Anda juga bisa menggunakan setiap() untuk beralih lebih dari array, seperti di JS:

var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (mobil, fungsi (i, value) {console.log (value); });

Perhatikan argumen tambahan yang disebut nilai - ini adalah nilai elemen array.

Perlu dicatat setiap() bisa terkadang lebih lambat dari loop vanilla JS. Ini karena overhead pemrosesan tambahan yang dilakukan jQuery. Untuk sebagian besar waktu, ini bukan masalah. Jika Anda khawatir tentang kinerja, atau bekerja dengan kumpulan data besar, pertimbangkan untuk membandingkan kode Anda jsPerf pertama.

AJAX

JavaScript dan XML asinkron atau AJAX sangat mudah dengan jQuery. AJAX memberdayakan sejumlah besar Internet, dan itu adalah sesuatu yang telah kami bahas bagian 5 jQuery Tutorial (Bagian 5): AJAX Them All!Ketika kita mendekati akhir dari seri tutorial mini jQuery kami, sudah saatnya kita melihat lebih dalam pada salah satu fitur jQuery yang paling sering digunakan. AJAX memungkinkan situs web untuk berkomunikasi dengan ... Baca lebih banyak dari kami tutorial jQuery jQuery Tutorial - Memulai: Dasar-Dasar & PenyeleksiMinggu lalu, saya berbicara tentang betapa pentingnya jQuery bagi pengembang web modern dan mengapa itu mengagumkan. Minggu ini, saya pikir sudah saatnya kita membuat tangan kita kotor dengan beberapa kode dan belajar bagaimana ... Baca lebih banyak . Ini memberikan cara untuk memuat sebagian halaman web - tidak ada alasan untuk memuat ulang seluruh halaman saat Anda hanya ingin memperbarui skor sepakbola, misalnya. jQuery memiliki beberapa metode AJAX, yang paling mudah beban():

$ ('# baz'). load ('some / url / page.html');

Ini melakukan panggilan AJAX ke halaman yang ditentukan (some / url / page.html) dan mendorong data ke pemilih. Sederhana!

Anda bisa tampil HTTP DAPATKAN permintaan:

$ .get ('some / url', function (result) {console.log (result); });

Anda juga dapat mengirim data menggunakan POS:

$ .post ('some / other / url', {'make': 'Ford', 'model': 'Cortina'});

Sangat mudah untuk mengirimkan data formulir:

$ .post ('url', $ ('form'). serialize (), fungsi (hasil) {console.log (hasil); }

Itu membuat cerita bersambung () fungsi mendapatkan semua data formulir dan menyiapkannya untuk transmisi.

Janji

Janji digunakan untuk eksekusi yang ditangguhkan. Mereka bisa sulit dipelajari, namun jQuery membuatnya sedikit tidak merepotkan. ECMAScript 6 memperkenalkan janji-janji asli ke JS, namun, dukungan browser paling lemah. Untuk saat ini, janji jQuery jauh lebih baik di dukungan lintas browser.

Sebuah janji hampir persis seperti kedengarannya. Kode akan membuat janji untuk kembali pada tahap selanjutnya ketika sudah selesai. Mesin JavaScript Anda akan beralih ke menjalankan beberapa kode lainnya. Begitu janji menyelesaikan (kembali), beberapa bagian kode lain dapat dijalankan. Janji bisa dianggap sebagai panggilan balik seperti. Itu dokumentasi jQuery menjelaskan secara lebih rinci.

Ini sebuah contoh:

// dfd == ditangguhkan. var dfd = $ .Deferred (); function doThing () {$ .get ('some / slow / url', function () {dfd.resolve (); }); return dfd.promise (); } $ .when (doThing ()). then (function () {console.log ('YAY, it is finished'); });

Perhatikan bagaimana janji itu dibuat (dfd.promise ()), dan itu diselesaikan hanya ketika panggilan AJAX selesai. Anda bisa menggunakan variabel untuk melacak beberapa panggilan AJAX, dan hanya menyelesaikan tugas lain setelah semuanya dilakukan.

Tips Kinerja

Kunci untuk menekan kinerja browser Anda adalah membatasi akses ke DOM. Banyak dari tips ini bisa berlaku untuk JS juga, dan Anda mungkin ingin membuat profil kode Anda untuk melihat apakah itu terlalu lambat. Di zaman mesin JavaScript berkinerja tinggi saat ini, kemacetan kecil dalam kode sering kali tidak diperhatikan. Meskipun demikian, masih ada baiknya Anda mencoba menulis kode dengan kinerja tercepat yang Anda bisa.

Alih-alih mencari DOM untuk setiap tindakan:

$ ('foo'). css ('warna latar belakang', 'merah'); $ ('foo'). css ('color', 'green'); $ ('foo'). css ('lebar', '100px');

Simpan objek dalam variabel:

$ bar = $ ('foo'); $ bar.css ('warna latar belakang', 'merah'); $ bar.css ('warna', 'hijau'); $ bar.css ('width', '100px');

Optimalkan loop Anda. Diberi vanila untuk loop:

var cars = ['Mini', 'Ford', 'Jaguar']; untuk (int i = 0; saya 

Meskipun secara inheren tidak buruk, loop ini dapat dibuat lebih cepat. Untuk setiap iterasi, loop harus menghitung nilai array mobil (panjang mobil). Jika Anda menyimpan ini di variabel lain, kinerja dapat diperoleh, terutama jika Anda bekerja dengan kumpulan data besar:

untuk (int i = 0, j = cars.length; saya 

Sekarang panjang array mobil disimpan j. Ini tidak lagi harus dihitung dalam setiap iterasi. Jika Anda menggunakan setiap(), Anda tidak perlu melakukan ini, meskipun vanilla JS yang dioptimalkan dengan benar dapat mengungguli jQuery. Di mana jQuery benar-benar bersinar adalah melalui kecepatan pengembangan dan debugging. Jika Anda tidak mengerjakan data besar, jQuery biasanya lebih cepat.

Anda sekarang harus tahu dasar-dasar yang cukup untuk menjadi ninja jQuery!

Apakah Anda menggunakan jQuery secara teratur? Sudahkah Anda berhenti menggunakannya karena alasan apa pun? Sampaikan pendapat Anda di komentar di bawah!