Ringkasan pembelajaran jQuery jQuery events_jquery

Pertama, mari kita lihat contoh yang berguna untuk mendalami pengetahuan terdahulu kita, beberapa daripadanya telah muncul sebelum ini.

Salin kod Kod adalah seperti berikut:

c2927140466346f8989b95bca6593c33
d82bd149459a4dd1bb52ee39fe3968f8

jQuery(document).ready(function() {
  jQuery("#btnHide").click(function() {
    jQuery("#imgGoogle").hide("1000");
  });
});

Apabila anda mengklik Sembunyikan Imej, imej logo Google akan disembunyikan dalam satu saat. Di sini kita menggunakan kaedah hide() Sudah tentu, kita tidak perlu menentukan masa Jika kita ingin memaparkan gambar, kita harus menggunakan kaedah show() bukan?

Sekarang mari kita mulakan dengan kandungan utama artikel ini: acara. Anda mungkin perasan bahawa acara telah digunakan di banyak tempat di atas. Antaranya, document.ready ialah acara Apabila dokumen sudah siap, ia memberitahu jQuery bahawa acara itu boleh dilaksanakan pergerakan tetikus, klik, keluar fokus kotak teks, dan lain-lain.

Dulu, kita sering melihat:

Salin kod Kod adalah seperti berikut:

0b1fe440a79a3ebd94ceebc3183478eaDi Beijing16b28748ea4df4d9c2150843fecfba68

Cara penulisan ini. Mulai sekarang, semua orang harus meninggalkan cara penulisan ini. Realisasikan pemisahan kod js dan html, supaya halaman itu lebih bersih dan lebih cekap. Kaedah penulisan semasa akan menjadi:

jQuery("#divRent").click(function() {
  alert("租房贵");
});

Memandangkan ini adalah ringkasan, saya akan menggunakan contoh untuk merekodkan sebanyak mungkin kaedah acara seperti tiga artikel pertama, supaya semua orang boleh merujuknya apabila diperlukan.

Berikut ialah apa yang saya temui semasa belajar saya:

1. satu() acara, mengikat acara untuk dilaksanakan sekali

Salin kod Kod adalah seperti berikut:

220dad31e9953ce1caefcfa84705a250Orang ramai berada di Beijing16b28748ea4df4d9c2150843fecfba68

Salin kod Kod adalah seperti berikut:

jQuery("#divRent").one("klik", fungsi() {
alert("sewa mahal");
});

Perkara di atas terikat pada acara klik dan tiada gesaan akan muncul apabila diklik untuk kali kedua.

2. fokus() dan kabur() acara

Salin kod Kod adalah seperti berikut:

d98f0c487087b05cd3d419ae72cd7696

Salin kod Kod adalah seperti berikut:

jQuery("#tTest").fokus(fungsi() {
jQuery(this).css("latar belakang", "kuning"); }).kabur(fungsi() {
jQuery(this).css("latar belakang", "putih"); });

Contoh ini menggunakan kaedah tulisan berantai, saya percaya ia tidak sukar untuk difahami. Jika anda tidak biasa dengan gaya css operasi jQuery, anda boleh membaca ringkasan kedua. Dalam contoh ini, apabila fokus adalah pada kotak teks, warna latar belakang berubah kepada kuning, dan kemudian bertukar kembali kepada putih apabila ia keluar. Tujuan ini adalah untuk meningkatkan pengalaman pengguna, saya secara peribadi merasakan.

3 acara keydown() dan keyup()

Salin kod Kod adalah seperti berikut:

4b2764a3c367b627d6153bdf397b9c24 98f415770703c711e9c2bd3c6f6867da8c1ecd4bb896b2264e0711597d40766c

Salin kod Kod adalah seperti berikut: jQuery("#tTest").keyup(function() {

jQuery("#lResult").html(jQuery(this).val());

});

Apabila kekunci muncul (rasanya sukar untuk dinyatakan di sini^_^), kandungan dalam kotak teks akan dipaparkan dalam label. Untuk bahagian tentang atribut elemen pengendalian, anda boleh membaca ringkasan ketiga.

4. serah() acara

Salin kod Kod adalah seperti berikut:

21450525e974e9be578136fc32da3f7c
a9aafc0e48dc1e40a299f1198237c1bc 976559bbc6f1fbf8c3657ed3cc58e825 1265af6dee180289cdd7fb3022456895 f5a47148e367a6035fd7a2faa965022e

Salin kod Kod adalah seperti berikut: jQuery("#form1").submit(function() {

Jika (jQuery.trim(jQuery("#text").val()).panjang == 0) {

         kembali palsu; }
});



Seperti yang anda lihat, contoh ini menggunakan kawalan pelayan. Ia pada asasnya perkara yang sama, akhirnya penyerahan borang berlaku. Apabila butang diklik, borang diserahkan. Jika kandungan kotak teks kosong, kembalikan palsu dan jangan serahkan sebaliknya, serahkan. Aplikasi sedemikian boleh dilihat di mana-mana dalam pembangunan web.

5 acara tuding()

Salin kod

Kod adalah seperti berikut: 7f0eda05e93e41d7a8baaa89a79f95f9tuding saya16b28748ea4df4d9c2150843fecfba68

Salin kod

Kod adalah seperti berikut: jQuery("#divHover").hover(function() { jQuery(this).css("latar belakang", "kuning"); }, fungsi() {

jQuery(ini).css("latar belakang", "merah");

});



Apabila tetikus bergerak ke atas div, warna latar belakang div bertukar kepada kuning dan apabila tetikus bergerak keluar, warna latar belakang bertukar kepada merah.

Peristiwa di atas agak biasa dan biasa digunakan. Sudah tentu, artikel ini meringkaskan hanya sebahagian kecil Jika anda menghadapi masalah semasa pembelajaran, anda perlu menggunakan dokumentasi jQuery untuk merujuknya.