Bagaimana Menambahkan Acara ke Objek jQuery untuk Pemrograman HTML5 dan CSS3 - dummies

JQuery library menambahkan kemampuan lain yang sangat kuat untuk JavaScript. Hal ini memungkinkan pemrogram HTML5 dan CSS3 untuk dengan mudah melampirkan acara ke objek jQuery manapun. Lihatlah hover. html

Bila Anda memindahkan kursor ke item daftar, sebuah perbatasan akan muncul di sekitar item. Ini bukan efek yang sulit untuk dicapai dalam CSS biasa tapi itu lebih mudah lagi di jQuery.

Cara menambahkan acara hover

Lihatlah kode untuk melihat tampilannya:

hover. html $ (init); fungsi init () {$ ("li"). hover (border, noBorder);} // akhiri fungsi init border () {$ (this). css ("border", "1px solid black");} function noBorder () {$ (this). css ("border", "0px none black");}

Demo Hover

alpha
beta
gamma
delta

HTML tidak bisa lebih sederhana. Ini hanyalah daftar tak beraturan. JavaScript tidak jauh lebih kompleks. Ini terdiri dari tiga fungsi satu baris:

• init () dipanggil saat dokumen sudah siap. Itu membuat objek jQuery dari semua item daftar dan melengkapi acara tersebut kepada mereka. Fungsi hover () menerima dua parameter:

  • Yang pertama adalah fungsi yang dipanggil saat kursor melayang di atas objek.

  • Yang kedua adalah fungsi yang dipanggil saat kursor meninggalkan objek.

• border () menarik perbatasan di sekitar elemen saat ini. Pengenal $ (this) digunakan untuk menentukan objek saat ini.

• noborder () adalah fungsi yang sangat mirip dengan fungsi border () , namun menghilangkan batas dari objek saat ini.

Dalam contoh ini, tiga fungsi berbeda digunakan. Banyak programmer jQuery lebih suka menggunakan fungsi anonim (kadang-kadang disebut lambda ) untuk melampirkan keseluruhan fungsionalitas dalam satu baris panjang:

$ ("li"). (css ("border", "0px none black");}) css ("border", "1px solid black");}, function () {$ (this) css ("border", "0px none black");});

Perhatikan bahwa ini masih secara teknis merupakan satu baris kode. Alih-alih merujuk dua fungsi yang telah dibuat, Anda dapat segera membangun fungsinya di tempat yang dibutuhkan. Setiap definisi fungsi adalah parameter ke metode hover ().

Jika Anda seorang ilmuwan komputer, Anda mungkin berpendapat bahwa ini bukan contoh sempurna fungsi lambda, dan Anda akan benar. Yang penting adalah memperhatikan bahwa beberapa gagasan pemrograman fungsional (seperti fungsi lambda) merayap menjadi pemrograman AJAX mainstream, dan itu adalah pengembangan yang menarik.

Mengubah kelas dengan cepat

jQuery mendukung fitur indah lainnya.Anda dapat menentukan gaya CSS dan kemudian menambahkan atau menghapus gaya itu dari elemen secara dinamis.

Kode menunjukkan betapa mudahnya fitur semacam ini ditambahkan:

kelas. html berbatasan {border: 1px solid black;} $ (init); fungsi init () {$ ("li"). klik (toggleBorder);} // akhiri fungsi init toggleBorder () {$ (this). tokenggleClass ("bordered");}

Demo Kelas

alpha
beta
gamma
delta

Berikut adalah cara membuat program ini:

1. Mulailah dengan halaman HTML dasar.

   Semua hal menarik terjadi di CSS dan JavaScript, sehingga isi halaman sebenarnya tidak begitu penting.

2. Buat kelas yang ingin Anda tambahkan dan hapus.

   Anda dapat membuat kelas CSS yang disebut dengan cukup menarik batas di sekitar elemen. Tentu saja, Anda bisa membuat kelas CSS yang jauh lebih canggih dengan segala jenis format jika Anda mau.

3. Hubungkan metode init ().

   Saat Anda mulai melihat, sebagian besar aplikasi jQuery memerlukan semacam inisialisasi. Anda bisa memanggil fungsi pertama. init ()

4. Panggil fungsi toggleBorder () setiap kali pengguna mengklik item daftar.

   Metode init () hanya menyiapkan sebuah event handler. Setiap kali item daftar menerima acara klik (artinya, klik) fungsi toggleBorder () harus diaktifkan. Fungsi toggleBorder (), dengan baik, matikan perbatasan.

   jQuery memiliki beberapa metode untuk memanipulasi kelas elemen:

   • addClass () memberikan kelas ke elemen.

   • removeClass () menghapus definisi kelas dari sebuah elemen.

   • toggleClass () mengalihkan kelas (menambahkannya jika saat ini tidak terpasang atau menghapusnya sebaliknya).