Cara Tambah Peristiwa ke jQuery Objects untuk Pemrograman HTML5 dan CSS3 - dummies

Perpustakaan jQuery menambah keupayaan yang sangat kuat ke JavaScript. Ia membolehkan pemrogram HTML5 dan CSS3 untuk dengan mudah melampirkan peristiwa kepada mana-mana objek jQuery. Lihatlah hover. html.

Apabila anda menggerakkan kursor anda ke atas sebarang item senarai, sempadan muncul di sekeliling item. Ini bukan satu kesan yang sukar untuk dicapai dalam CSS biasa tetapi ia lebih mudah dalam jQuery.

Bagaimana untuk menambah acara hover

Lihat kod untuk melihat cara kerjanya:

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

Hover Demo

alpha
beta
gamma
delta

HTML tidak boleh lebih mudah. Ia hanya senarai yang tidak teratur. JavaScript tidak begitu kompleks. Ia terdiri daripada tiga fungsi satu garisan:

• init () dipanggil apabila dokumen sudah siap. Ia menjadikan objek jQuery semua item senarai dan melekatkan peristiwa kepada mereka. Fungsi hover () mewakili dua parameter:

  • Yang pertama adalah fungsi yang dipanggil apabila kursor beralih ke objek.

  • Yang kedua adalah fungsi yang akan dipanggil apabila kursor meninggalkan objek tersebut.

• sempadan () menarik sempadan di sekeliling elemen semasa. Pengecam $ (ini) digunakan untuk menentukan objek semasa.

• noborder () adalah fungsi yang hampir sama dengan fungsi sempadan () , tetapi ia menghilangkan sempadan dari objek semasa.

Dalam contoh ini, tiga fungsi yang berbeza digunakan. Ramai pengaturcara jQuery lebih suka menggunakan fungsi tanpa nama (kadangkala dipanggil lambda fungsi) untuk menyertakan fungsi keseluruhan dalam satu baris panjang:

$ ("li"). css ("border", "0px none black");});

Perhatikan bahawa ini masih secara tekal satu baris kod. Daripada merujuk kepada dua fungsi yang telah dibuat, anda boleh membina fungsi dengan segera di mana ia diperlukan. Setiap definisi fungsi adalah parameter kepada kaedah hover ().

Jika anda seorang saintis komputer, anda mungkin berpendapat bahawa ini bukan satu contoh sempurna tentang fungsi lambda, dan anda akan betul. Yang penting adalah untuk melihat bahawa beberapa idea pengaturcaraan fungsional (seperti fungsi lambda) merayap ke dalam pengaturcaraan AJAX arus perdana, dan itulah perkembangan yang menarik.

Menukar kelas dengan cepat

jQuery menyokong satu lagi ciri yang menarik.Anda boleh menentukan gaya CSS dan kemudian menambah atau mengalih keluar gaya tersebut dari unsur secara dinamik.

Kod menunjukkan betapa mudah jenis ciri ini untuk ditambahkan:

kelas. html. bordered {border: 1px solid black;} $ (init); fungsi init () {$ ("li"). klik (toggleBorder);} // akhir fungsi fungsi toggleBorder () {$ (ini). toggleClass ("bordered");}

Demo Kelas

alpha
beta
gamma
delta

Berikut adalah cara membuat program ini:

1. Semua perkara yang menarik berlaku dalam CSS dan JavaScript, jadi kandungan sebenar halaman tidak begitu kritikal.

2. Buat kelas yang anda mahu tambah dan alih keluar.

   Anda boleh membina kelas CSS memanggil yang hanya menarik sempadan di sekeliling elemen. Sudah tentu, anda boleh membuat kelas CSS yang lebih canggih dengan semua jenis pemformatan jika anda lebih suka.

3. Pautan satu init () kaedah.

   Seperti yang anda mula lihat, kebanyakan aplikasi jQuery memerlukan semakan inisialisasi. Anda boleh memanggil fungsi pertama. init ()

4. Panggil fungsi toggleBorder () apabila pengguna mengklik item senarai.

   Cara init () kaedah hanya menyediakan pengendali acara. Apabila item senarai menerima acara klik (iaitu, ia diklik) fungsi toggleBorder () perlu diaktifkan. Fungsi toggleBorder () berfungsi dengan baik, menukar sempadan.

   jQuery mempunyai beberapa kaedah untuk memanipulasi kelas elemen:

   • addClass () memberikan kelas kepada elemen.

   • removeClass () membuang takrif kelas dari elemen.

   • toggleClass () menukar kelas (menambahnya jika ia tidak dilampirkan atau menghapusnya sebaliknya).