jquery

JQuery - JavaScript gelombang baru

Rapat saat ini diadakan di platform matrix.org.

Risalah rapat dapat ditemukan di rapat.jquery.org.

Versi terbaru jQuery tersedia di https://jquery.com/download/.

Dukungan Versi

Versi	Cabang	Status
4.x	utama	Beta
3.x	3.x-stabil	Aktif
2.x	2.x-stabil	Tidak aktif
1.x	1.x-stabil	Tidak aktif

Setelah final 4.0.0 dirilis, cabang 3.x akan terus menerima pembaruan untuk waktu yang terbatas. Cabang 2.x dan 1.x tidak lagi didukung.

Dukungan komersial untuk versi tidak aktif tersedia dari Herodevs.

Pelajari lebih lanjut tentang dukungan versi kami.

Panduan Kontribusi

Dalam semangat pengembangan perangkat lunak open source, JQuery selalu mendorong kontribusi kode komunitas. Untuk membantu Anda memulai dan sebelum Anda melompat ke kode menulis, pastikan untuk membaca pedoman kontribusi penting ini secara menyeluruh:

1. Terlibat
2. Panduan Gaya Inti
3. Menulis kode untuk proyek jQuery

Referensi masalah/PR

Masalah/PR GitHub biasanya dirujuk melalui gh-NUMBER , di mana NUMBER adalah ID numerik dari masalah/PR. Anda dapat menemukan masalah/PR di bawah https://github.com/jquery/jquery/issues/NUMBER .

JQuery telah menggunakan pelacak bug yang berbeda - berdasarkan TRAC - di masa lalu, tersedia di bawah bugs.jquery.com. Ini sedang disimpan dalam mode baca saja sehingga merujuk pada diskusi sebelumnya adalah mungkin. Ketika sumber jQuery merujuk salah satu masalah itu, ia menggunakan pola trac-NUMBER , di mana NUMBER adalah ID numerik dari masalah ini. Anda dapat menemukan masalah seperti itu di bawah https://bugs.jquery.com/ticket/NUMBER .

Lingkungan untuk menggunakan jQuery

• Dukungan Browser
• JQuery juga mendukung node, ekstensi browser, dan lingkungan non-browser lainnya.

Apa yang Anda butuhkan untuk membangun jQuery Anda sendiri

Untuk membangun jQuery, Anda harus memiliki node.js/npm dan git 1.7 atau lebih baru. Versi sebelumnya mungkin berhasil, tetapi tidak didukung.

Untuk Windows, Anda harus mengunduh dan menginstal git dan node.js.

Pengguna MacOS harus menginstal Homebrew. Setelah homebrew diinstal, jalankan brew install git untuk menginstal git, dan brew install node untuk menginstal node.js.

Pengguna Linux/BSD harus menggunakan manajer paket yang sesuai untuk menginstal git dan node.js, atau membangun dari sumber jika Anda berayun seperti itu. Easy-Peasy.

Cara membangun jQuery Anda sendiri

Pertama, klon repo git jQuery.

Kemudian, masukkan direktori jQuery, instal dependensi, dan jalankan skrip build:

 cd jquery
npm install
npm run build

Versi jQuery yang dibangun akan ditempatkan di dist/ Direktori, bersama dengan salinan yang diminifikasi dan file peta terkait.

Bangun semua file rilis jQuery

Untuk membangun semua varian jQuery, jalankan perintah berikut:

npm run build:all

Ini akan menciptakan semua varian yang termasuk dalam rilis, termasuk jquery.js , jquery.slim.js , jquery.module.js , dan jquery.slim.module.js di sepanjang file dan sumber yang terkait.

jquery.module.js dan jquery.slim.module.js adalah modul ecmascript yang mengekspor jQuery dan $ sebagai ekspor bernama ditempatkan di dist-module/ direktori daripada dist/ Directory.

Membangun jQuery khusus

Skrip build dapat digunakan untuk membuat versi kustom dari jQuery yang hanya mencakup modul yang Anda butuhkan.

Modul apa pun dapat dikecualikan kecuali untuk core . Saat tidak termasuk selector , itu tidak dihapus tetapi diganti dengan pembungkus kecil di sekitar querySelectorAll asli (lihat di bawah untuk informasi lebih lanjut).

Bangun Bantuan Script

Untuk melihat daftar lengkap opsi yang tersedia untuk skrip build, jalankan yang berikut:

npm run build -- --help

Modul

Untuk mengecualikan modul, lewati jalurnya relatif ke folder src (tanpa ekstensi .js ) ke opsi --exclude . Saat menggunakan opsi --include , termasuk default dijatuhkan dan build dibuat dengan hanya modul -modul tersebut.

Beberapa contoh modul yang dapat dikecualikan atau disertakan adalah:

• AJAX : Semua fungsionalitas AJAX: $.ajax() , $.get() , $.post() , $.ajaxSetup() , .load() , Transports, dan Ajax Event Shortands seperti .ajaxStart() .

• AJAX/XHR : Hanya Transportasi AJAX XMLHTTPREQUEST.

• AJAX/SCRIPT : The <script> AJAX Transport saja; digunakan untuk mengambil skrip.

• AJAX/JSONP : Hanya JSONP AJAX Transport; Tergantung pada transportasi Ajax/skrip.

• CSS : metode .css() . Juga menghilangkan semua modul tergantung pada CSS (termasuk efek , dimensi , dan offset ).

• css/showhide : non-animasi .show() , .hide() dan .toggle() ; dapat dikecualikan jika Anda menggunakan kelas atau panggilan eksplisit .css() untuk mengatur properti display . Juga menghilangkan modul efek .

• Tercerahkan : Metode yang didokumentasikan sebagai sudah usang tetapi belum dihapus.

• Dimensi : Metode .width() dan .height() , termasuk variasi inner- dan outer- .

• Efek : Metode .animate() dan steno seperti .slideUp() atau .hide("slow") .

• Acara : Metode .on() dan .off() dan semua fungsionalitas peristiwa.

• Event/Trigger : metode .trigger() dan .triggerHandler() .

• Offset : .offset() , .position() , .offsetParent() , .scrollLeft() , dan .scrollTop() metode.

• Bungkus : .wrap() , .wrapAll() , .wrapInner() , dan .unwrap() metode.

• Core/Ready : Kecualikan modul siap jika Anda menempatkan skrip Anda di ujung tubuh. Setiap panggilan balik siap yang diikat dengan jQuery() hanya akan dipanggil segera. Namun, jQuery(document).ready() tidak akan menjadi fungsi dan .on("ready", ...) atau serupa tidak akan dipicu.

• Ditangguhkan : Kecualikan jQuery.Deferred. Ini juga tidak termasuk semua modul yang mengandalkan ditangguhkan, termasuk AJAX , Efek , dan Antrian , tetapi menggantikan Core/Ready dengan Core/Ready-No-Deferred .

• Ekspor/Global : Kecualikan lampiran variabel jQuery global ($ dan jQuery) ke jendela.

• Ekspor/AMD : Kecualikan definisi AMD.

• Pemilih : Mesin Pemilih JQuery lengkap. Ketika modul ini dikecualikan, ia diganti dengan mesin pemilih yang belum ditunjukkan berdasarkan metode querySelectorAll browser yang tidak mendukung ekstensi pemilih jQuery atau peningkatan semantik. Lihat file selector-native.js untuk detailnya.

CATATAN : Tidak termasuk modul selector lengkap juga akan mengecualikan semua ekstensi pemilih jQuery (seperti effects/animatedSelector dan css/hiddenVisibleSelectors ).

Nama AMD

Anda dapat mengatur nama modul untuk definisi AMD jQuery. Secara default, diatur ke "jQuery", yang bermain baik dengan plugin dan perpustakaan pihak ketiga, tetapi mungkin ada kasus di mana Anda ingin mengubahnya. Lewati ke parameter --amd :

npm run build -- --amd= " custom-name "

Atau, untuk mendefinisikan secara anonim, tinggalkan namanya kosong.

npm run build -- --amd

Nama file dan direktori

Nama default untuk file jQuery yang dibangun adalah jquery.js ; itu ditempatkan di bawah dist/ Direktori. Dimungkinkan untuk mengubah nama file menggunakan --filename dan direktori menggunakan --dir . --dir relatif terhadap root proyek.

npm run build -- --slim --filename= " jquery.slim.js " --dir= " /tmp "

Ini akan membuat versi ramping dari jQuery dan menempatkannya di bawah tmp/jquery.slim.js .

Mode ecmascript module (ESM)

Secara default, JQuery menghasilkan file JavaScript skrip reguler. Anda juga dapat menghasilkan modul ecmascript yang mengekspor jQuery sebagai ekspor default menggunakan parameter --esm :

npm run build -- --filename=jquery.module.js --esm

Mode pabrik

Secara default, jQuery tergantung pada window global. Untuk lingkungan yang tidak memilikinya, Anda dapat menghasilkan build pabrik yang memperlihatkan window penerimaan fungsi sebagai parameter yang dapat Anda berikan secara eksternal (lihat README dari paket yang diterbitkan untuk instruksi penggunaan). Anda dapat menghasilkan pabrik seperti itu menggunakan parameter --factory :

npm run build -- --filename=jquery.factory.js --factory

Opsi ini dapat dicampur dengan orang lain seperti --esm atau --slim :

npm run build -- --filename=jquery.factory.slim.module.js --factory --esm --slim --dir= " /dist-module " 

Contoh Bangun Kustom

Buat Build Kustom Menggunakan npm run build , daftar modul yang akan dikecualikan. Tidak termasuk modul tingkat atas juga tidak termasuk direktori modul yang sesuai.

Kecualikan semua fungsi AJAX :

npm run build -- --exclude=ajax

Tidak termasuk CSS menghilangkan modul tergantung pada CSS: Efek , offset , dimensi .

npm run build -- --exclude=css

Kecualikan sekelompok modul ( -e adalah alias untuk --exclude ):

npm run build -- -e ajax/jsonp -e css -e deprecated -e dimensions -e effects -e offset -e wrap

Ada alias khusus untuk menghasilkan build dengan konfigurasi yang sama dengan jQuery Slim Build:

npm run build -- --filename=jquery.slim.js --slim

Atau, untuk membuat build ramping sebagai modul ESM:

npm run build -- --filename=jquery.slim.module.js --slim --esm

Bangunan khusus non-resmi tidak diuji secara teratur. Gunakan mereka dengan risiko Anda sendiri.

Menjalankan Tes Unit

Pastikan Anda memiliki dependensi yang diperlukan:

npm install

Mulailah npm start Auto-Build JQuery saat Anda bekerja:

npm start

Jalankan tes unit dengan server lokal yang mendukung PHP. Pastikan Anda menjalankan situs dari direktori root, bukan direktori "tes". Tidak diperlukan database. Server lokal PHP yang telah dikonfigurasi sebelumnya tersedia untuk Windows dan Mac. Berikut beberapa opsi:

• Windows: Wamp Download
• Mac: Unduh MAMP
• Linux: mengatur lampu
• Mongoose (sebagian besar platform)

Git penting

Karena kode sumber ditangani oleh sistem kontrol versi git, bermanfaat untuk mengetahui beberapa fitur yang digunakan.

Pembersihan

Jika Anda ingin membersihkan direktori kerja Anda kembali ke status hulu, perintah berikut dapat digunakan (ingat semua yang telah Anda kerjakan adalah setelah ini):

git reset --hard upstream/main
git clean -fdx

Rebasing

Untuk cabang fitur/topik, Anda harus selalu menggunakan bendera --rebase untuk git pull , atau jika Anda biasanya menangani banyak cabang sementara "untuk berada dalam permintaan github tarik", jalankan berikut ini untuk mengotomatiskan ini:

git config branch.autosetuprebase local

(Lihat man git-config untuk informasi lebih lanjut)

Menangani konflik gabungan

Jika Anda mendapatkan konflik penggabungan saat bergabung, alih -alih mengedit file yang berkonflik secara manual, Anda dapat menggunakan fitur git mergetool . Meskipun alat default xxdiff terlihat mengerikan/tua, itu agak berguna.

Berikut ini adalah beberapa perintah yang dapat digunakan di sana:

• Ctrl + Alt + M - Automerge sebanyak mungkin
• b - Lompat ke konflik penggabungan selanjutnya
• s - Ubah urutan garis yang berkonflik
• u - Batalkan gabungan
• left mouse button - Tandai blok menjadi pemenang
• middle mouse button - Tandai garis menjadi pemenang
• Ctrl + S - Simpan
• Ctrl + Q - Berhenti

Referensi Qunit

Metode pengujian

 expect ( numAssertions ) ;
stop ( ) ;
start ( ) ;

Catatan : Penambahan argumen Qunit akhirnya untuk berhenti/mulai diabaikan di suite tes ini sehingga start dan stop dapat dilewati sebagai panggilan balik tanpa khawatir tentang parameter mereka.

Pernyataan tes

 ok ( value , [ message ] ) ;
equal ( actual , expected , [ message ] ) ;
notEqual ( actual , expected , [ message ] ) ;
deepEqual ( actual , expected , [ message ] ) ;
notDeepEqual ( actual , expected , [ message ] ) ;
strictEqual ( actual , expected , [ message ] ) ;
notStrictEqual ( actual , expected , [ message ] ) ;
throws ( block , [ expected ] , [ message ] ) ; 

Referensi metode kenyamanan tes suite

Lihat tes/data/testinit.js.

Mengembalikan serangkaian elemen dengan ID yang diberikan

 q ( ... ) ;

Contoh:

 q ( "main" , "foo" , "bar" ) ;

=> [ div # main , span # foo , input # bar ]

Menegaskan bahwa seleksi cocok dengan ID yang diberikan

 t ( testName , selector , [ "array" , "of" , "ids" ] ) ;

Contoh:

 t ( "Check for something" , "//[a]" , [ "foo" , "bar" ] ) ;

Menembak acara DOM asli tanpa melalui jQuery

 fireNative ( node , eventType ) ;

Contoh:

 fireNative ( jQuery ( "#elem" ) [ 0 ] , "click" ) ;

Tambahkan nomor acak ke URL untuk menghentikan caching

 url ( "some/url" ) ;

Contoh:

 url ( "index.html" ) ;

=> "data/index.html?10538358428943"


url ( "mock.php?foo=bar" ) ;

=> "data/mock.php?foo=bar&10538358345554"

Jalankan tes dalam iframe

Beberapa tes mungkin memerlukan dokumen selain perlengkapan uji standar, dan ini dapat dijalankan dalam iframe terpisah. Kode uji dan pernyataan yang sebenarnya tetap ada di file uji utama JQuery; Hanya markup fixture uji minimal dan kode pengaturan yang harus ditempatkan di file iframe.

 testIframe ( testName , fileName ,
  function testCallback (
      assert , jQuery , window , document ,
	  [ additional args ] ) {
	...
  } ) ;

Ini memuat halaman, membangun URL dengan nama file "./data/" + fileName . Halaman iframed menentukan kapan panggilan balik terjadi dalam tes dengan memasukkan skrip "/test/data/iframetest.js" dan panggilan startIframeTest( [ additional args ] ) bila perlu. Seringkali ini akan terjadi setelah salah satu dokumen siap atau window.onload .

testCallback menerima objek assert Qunit yang dibuat oleh testIframe untuk tes ini, diikuti oleh jQuery , window , dan document global dari IFRAME. Jika kode iframe memberikan argumen apa pun untuk startIframeTest , mereka mengikuti argumen document .

Pertanyaan?

Jika Anda memiliki pertanyaan, jangan ragu untuk menanyakan forum inti jQuery yang sedang berkembang atau di #JQuery on Libera.