Seperti yang telah kita bicarakan, jQuery boleh dianggap sebagai perpustakaan "pilih dan lakukan". Kami sudah banyak membincangkan tentang memilih, jadi sekarang mari kita bincangkan beberapa perkara. Ingat bahawa corak pada dasarnya kelihatan seperti ini:
// Select something! $(".something") // Do something! .hide();Daripada bekerja dengan contoh yang lebih teoritis, kita beralih ke sesuatu yang nyata-dunia-y. Kami menjumpai Pen ini oleh Drew Barontini dan menempelkannya.
Lihat Borang Kad Kredit Pen oleh Chris Coyier (@chriscoyier) di CodePen
Sebagai contoh, kami menyembunyikan borang kad kredit secara lalai. Kemudian kami membuat pautan yang boleh anda klik untuk meluncur ke atas dan meluncurkan borang kad kredit ke bawah. Kami memilih pautan, kemudian buat slideToggle pada borang. Pilih dan buat!
Kami belum banyak bercakap mengenai acara, tetapi itu adalah sebahagian besar dari jQuery. Acara adalah seperti klik tetikus, penekanan kekunci, tatal, dan lain-lain. Bahagian "lakukan" dari "pilih dan lakukan" sering berlaku selepas suatu peristiwa. Jangan risau, kami akan banyak membincangkan peristiwa sebelum siri ini selesai. Buat masa ini, ketahui bahawa on () adalah kaedah terbaik / standard untuk mengikat acara di jQuery. Ikatan, yang bermaksud "menonton acara ini pada elemen ini atau set elemen."
Pelan asas:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));Dalam contoh kita, pautan secara harfiah adalah pautan.
togol
Cara pautan hash berfungsi secara lalai di mana-mana penyemak imbas ialah tetingkap akan menatal ke bawah ke elemen dengan ID yang sepadan dengan pautan hash. Kadang-kadang itu bagus. Saya suka bagaimana ia mewujudkan hubungan semantik antara pautan itu dan elemen itu. Oleh itu, tanpa JavaScript, pautan pada dasarnya tetap masuk akal (terutamanya jika anda menyebutnya sesuatu yang pintar).
Tetapi kadang-kadang, tingkah laku melompat hubungan hash adalah sesuatu yang menyedihkan. Kita boleh menghalangnya dalam JavaScript menggunakan preventDefault. Seperti ini:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Kami akan bercakap lebih banyak mengenai perkara itu.
Sudah tentu, dokumentasi jQuery sendiri adalah sumber yang hebat untuk semua aspek "lakukan" jQuery (kaedah).
Saya rasa pemahaman yang sangat asas mengenai "pilih dan lakukan" ini dan peristiwa benar-benar membuka dunia pemahaman dalam JavaScript. Saya tahu ia berlaku untuk saya. Pada akhir screencast ini, kita melihat rancangan CSS-Tricks terkini dan melihat di mana JavaScript digunakan dengan jelas untuk bertindak balas terhadap beberapa peristiwa klik dan mengubah UI. Perkara yang sangat serupa dengan apa yang kami lakukan dalam demo sebelumnya. Contohnya, menetapkan kelas aktif pada perkara yang anda klik, seperti ini:
Lihat Pen d6f7161a5931397b4f24195a315d52f3 oleh Chris Coyier (@chriscoyier) di CodePen