Seperti yang telah kita bicarakan, jQuery dapat dianggap sebagai pustaka "pilih dan lakukan". Kita telah membahas sedikit tentang memilih, jadi sekarang mari kita bicara tentang beberapa tindakan. Ingatlah bahwa pola pada dasarnya terlihat seperti ini:
// Select something! $(".something") // Do something! .hide();Alih-alih bekerja dengan lebih banyak contoh teoritis, kami bergerak langsung ke sesuatu yang nyata-y. Kami menemukan Pena ini oleh Drew Barontini dan bercabang.
Lihat Formulir Kartu Kredit Pena oleh Chris Coyier (@chriscoyier) di CodePen
Dalam contoh kami, kami menyembunyikan formulir kartu kredit secara default. Kemudian kami membuat tautan yang bisa Anda klik untuk menggeser ke atas dan geser ke bawah formulir kartu kredit. Kami memilih link tersebut, kemudian melakukan slideToggle pada formulir. Pilih dan lakukan!
Kami belum banyak membicarakan event, tapi itu bagian besar dari jQuery. Peristiwa adalah sesuatu seperti klik mouse, penekanan tombol, scroll, dll. Bagian "lakukan" dari "pilih dan lakukan" sering kali terjadi setelah peristiwa. Jangan khawatir, kita akan berbicara banyak tentang acara sebelum seri ini selesai. Untuk saat ini, ketahuilah bahwa on () adalah cara terbaik / standar untuk mengikat kejadian di jQuery. Bind, yang berarti "perhatikan acara ini di elemen atau kumpulan elemen ini".
Rencana dasar:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));Dalam contoh kami, tautan secara harfiah adalah tautan.
beralih
Cara kerja tautan hash secara default di browser apa pun adalah jendela akan menggulir ke bawah ke elemen dengan ID yang cocok dengan tautan hash itu. Terkadang itu bagus. Saya suka bagaimana ini menciptakan koneksi semantik antara tautan itu dan elemen itu. Jadi tanpa JavaScript, tautan pada dasarnya masih masuk akal (terutama jika Anda memberi judul yang cerdas).
Tapi terkadang, perilaku lompat tautan hash itu mengecewakan. Kita bisa mencegahnya di JavaScript menggunakan preventDefault. Seperti ini:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Kami akan membicarakan lebih banyak tentang itu.
Tentu saja, dokumentasi jQuery sendiri adalah sumber daya yang fantastis untuk semua aspek "lakukan" dari jQuery (metode).
Saya pikir pemahaman yang paling mendasar tentang "pilih dan lakukan" dan acara benar-benar membuka dunia pemahaman dalam JavaScript. Saya tahu itu berhasil untuk saya. Di akhir screencast ini, kita melihat desain Trik CSS saat ini dan melihat di mana JavaScript digunakan dengan jelas untuk bereaksi terhadap beberapa peristiwa klik dan mengubah UI. Hal yang sangat mirip dengan apa yang kami lakukan di demo sebelumnya. Misalnya, menyetel kelas aktif pada hal-hal yang Anda klik, seperti ini:
Lihat Pena d6f7161a5931397b4f24195a315d52f3 oleh Chris Coyier (@chriscoyier) di CodePen