Pengenalan kepada peristiwa biasa bind, hover, togol dan contoh lain dalam jquery_jquery

1.$(dokumen).ready()

$(document).ready() ialah cara biasa dalam jQuery untuk bertindak balas kepada acara onload terbina dalam JavaScript dan melaksanakan tugas. Ia mempunyai kesan yang sama dengan onload. Tetapi terdapat beberapa perbezaan:

Apabila dokumen dimuat turun sepenuhnya ke dalam penyemak imbas, peristiwa window.onload dicetuskan. Pengendali acara yang didaftarkan menggunakan $(document).ready() akan menjalankan kod selepas html dimuat turun dan dihuraikan ke dalam pepohon Dom, tetapi ini tidak bermakna semua fail yang berkaitan telah dimuat turun.

Secara amnya hanya terdapat satu pengendali acara onload dalam halaman, dan ia hanya boleh menyimpan rujukan kepada satu fungsi pada satu masa manakala $(document).ready() boleh mempunyai berbilang.

Secara umumnya $(document).ready() adalah lebih baik daripada menggunakan pengendali acara onload. Walau bagaimanapun, jika fail yang berkaitan belum dimuatkan, akan terdapat masalah dengan memanggil atribut seperti ketinggian dan lebar imej, jadi anda perlu memilih kaedah yang sesuai pada masa yang berbeza.

$(document).ready() mempunyai tiga cara penulisan, iaitu:

$(document).ready(function(){ 

//thisis the coding... 

});


$().ready(function(){ 

//thisis the coding... 

});


$(function(){ 

//thisis the coding... 

});

2. Pengikatan acara

Tatabahasa

$(selector).bind(acara,data,fungsi)

Parameter dan perihalan:

acara: diperlukan. Menentukan satu atau lebih acara untuk ditambahkan pada elemen. Berbilang acara dipisahkan oleh ruang. Mesti acara yang sah.

data pilihan. Menentukan data tambahan untuk dihantar ke fungsi.

fungsi diperlukan. Menentukan fungsi untuk dijalankan apabila peristiwa berlaku.

Yang sepadan ialah unbind(): buang acara

Cth: $(‘#idchoose’).unbind(“klik”,Nama_Fungsi)

Acara pengikatan singkatan: Biasanya lebih suka singkatan

$("#dividelement").bind("click",function(){//do something})改写为：

$("#dividelement").click(function(){//do something }

jQuery mengikat peristiwa kepada elemen dengan menggunakan kaedah .bind() dan menyahikat elemen menggunakan kaedah .unbind(). Selain itu, kaedah .bind() boleh melakukan berbilang pengikatan. Jika tiada pengikatan, ia selamat apabila menyahjilid.

Banyak kali peristiwa hanya perlu dicetuskan sekali, dan kemudian ia mesti dilepaskan serta-merta Mengikut pendekatan tradisional, kita mungkin mengikat acara itu dahulu, dan kemudian melepaskannya selepas acara itu dilaksanakan. jQuery memberikan kami kaedah ringkas.satu untuk menyelesaikan penulisan kod yang membosankan dalam senario di atas Contohnya adalah seperti berikut:

$(document).ready(function(){

$('#swotcjer').one('click',toggleStyleSwitcher);

});

Dengan cara ini, kelebihan menggunakan bind to bind event ialah anda boleh menentukan acara tersuai dan mengikat berbilang acara pada satu masa.

3. Acara sintetik

Apabila merakam acara, selalunya perlu untuk menangkap operasi pengguna gabungan dan bertindak balas dengan berbilang fungsi peristiwa ini dipanggil peristiwa komposit.

Kaedah .ready() yang disediakan oleh jQuery ialah salah satu kaedah acara yang paling biasa digunakan Selain itu, terdapat dua fungsi yang digunakan untuk pemprosesan interaktif:

.legar(masuk,keluar) Kaedah yang mensimulasikan peristiwa tuding (tetikus bergerak keluar-masuk objek). Ini ialah kaedah tersuai yang menyediakan keadaan "simpan di dalamnya" untuk tugasan yang kerap digunakan.

$(function(){

$("#panelh5.head").hover(function(){

$(this).next().show();

},function(){

$(this).next().hide(); 

})

})

.toggle(fn1,fn2,..fnN) Togol fungsi untuk dipanggil setiap kali ia diklik. Digunakan untuk mensimulasikan peristiwa klik tetikus berterusan. Contoh:

$(function(){

$("#panelh5.head").toggle(function(){

$(this).addClass("highlight");

$(this).next().show();

},function(){

$(this).removeClass("highlight");

$(this).next().hide();

});

})

4. Objek acara dan acara menggelegak

Objek acara: Menggunakan objek acara dalam program adalah sangat mudah Anda hanya perlu menambah parameter pada fungsi, cth:

$(“element”).click(function(event){

//event:事件对象

})

Apabila elemen "elemen" diklik, objek acara dicipta. Objek ini hanya boleh diakses oleh pengendali acara. Apabila fungsi pengendalian acara menyelesaikan pelaksanaan, objek acara dimusnahkan.

Tangkapan Acara: Strategi yang membolehkan berbilang elemen bertindak balas kepada acara. Semasa proses penangkapan acara, acara itu mula-mula diserahkan kepada elemen paling luar, dan kemudian kepada elemen yang lebih khusus. (badan->div->span)

Peristiwa menggelegak: Satu lagi strategi yang bertentangan dipanggil menggelegak masa Apabila sesuatu peristiwa berlaku, ia akan dihantar kepada elemen yang paling khusus terlebih dahulu Selepas elemen ini mendapat peluang untuk bertindak balas, acara itu akan menggelegak kepada elemen yang lebih umum. Acara menggelegak kadangkala boleh mempunyai kesan sampingan, yang membawa kepada tingkah laku yang tidak dijangka. (span->div->body)

Tiga cara untuk mengelakkan peristiwa daripada menggelegak

Acara boleh ditamatkan sebelum tindakan lalai dimulakan dengan memanggil kaedah .preventDefault().

Panggil event.stopPropagation() untuk menghentikan penyebaran acara

jQuery menyediakan kaedah .stopPropagation(), yang boleh menghalang acara menggelegak sepenuhnya.

5 Gunakan atribut event.tatget untuk menjelaskan objek acara

Acara dalam pengendali acara menyimpan objek acara. Atribut event.tatget menyimpan elemen sasaran tempat peristiwa itu berlaku. Atribut ini ditentukan dalam DOMAPI, tetapi tidak dilaksanakan oleh semua penyemak imbas. jQuery membuat sambungan yang diperlukan untuk objek acara ini supaya sifat ini boleh digunakan dalam mana-mana pelayar. Melalui .target, anda boleh menentukan elemen dalam DOM yang mula-mula menerima acara tersebut. Selain itu, kami tahu bahawa ini merujuk kepada elemen DOM yang mengendalikan acara tersebut.

Gunakan atribut event.tatget untuk mengosongkan objek acara dan mengelakkan acara daripada menggelegak Kodnya adalah seperti berikut:

$(document).ready(function(){ 

$('switcher').click(function(event){

if(event.target== this) 

{

$('switcher.button').toggleClass('hidden'); 

}

};)

});

Untuk atribut objek acara lain, sila rujuk pengenalan pada w3c.