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:

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:

Di Beijing

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:

Orang ramai berada di Beijing

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:

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:

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:

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:

tuding saya

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.