Penjelasan terperinci tentang penggunaan mengikat acara DOM dalam JQuery_jquery

Contoh dalam artikel ini menerangkan penggunaan pengikatan peristiwa DOM dalam JQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Selepas dokumen dimuatkan, jika anda bercadang untuk mengikat peristiwa kepada elemen untuk menyelesaikan operasi tertentu, anda boleh menggunakan kaedah bind() untuk mengikat peristiwa tertentu kepada unsur yang sepadan Format panggilan kaedah bind() ialah:

ikat( taip [, data] , fn);

Kaedah bind() mempunyai 3 parameter, yang diterangkan di bawah.

Parameter pertama ialah jenis acara, termasuk: kabur, fokus, muatkan, ubah saiz, tatal, bongkar muat, klik, dblclick, turun tetikus, naik tetikus, alih tetikus, alih tetikus, keluar tetikus, masukkan tetikus, biarkan tetikus, tukar, pilih, serah, kekunci , tekan kekunci, kekunci, ralat, dsb., sudah tentu, nama itu juga boleh disesuaikan.
Parameter kedua ialah parameter pilihan dan merupakan objek data tambahan yang dihantar kepada objek peristiwa sebagai nilai sifat peristiwa.data.
Parameter ketiga ialah fungsi pemprosesan terikat dengan meter.

Anda boleh mendapati bahawa jenis mengikat acara dalam jQuery mempunyai kurang "hidup" daripada jenis mengikat acara JavaScript biasa. Contohnya, acara klik tetikus sepadan dengan acara klik dalam jQuer, dan fungsi onclick() dalam JavaScript.

Mengikut keperluan, anda perlu melengkapkan langkah berikut.

1. Tunggu DOM dimuatkan.
2. Cari elemen di mana "tajuk" terletak dan ikat acara klik.
3. Cari elemen "kandungan" dan paparkan elemen "kandungan".

$(function(){
 $("#panel h5.head").bind("click",function(){
   var $content = $(this).next();
   if($content.is(":visible")){
      $content.hide();
    }else{
      $content.show();
    }
  })
})

Seperti kaedah ready(), kaedah bind() juga boleh dipanggil beberapa kali.

Terdapat kata kunci ini dalam kod jQuery di atas, yang mempunyai fungsi yang sama seperti dalam JavaScript Ini merujuk kepada elemen DOM yang membawa kelakuan yang sepadan. Untuk membolehkan elemen DOM ini menggunakan kaedah dalam jQuery, anda boleh menggunakan $(this) untuk menukarnya kepada objek jQuery.

Untuk menentukan sama ada elemen dipaparkan, anda boleh menggunakan kaedah is() dalam jQuery. Dalam kod, didapati bahawa $(this).next("div.content") digunakan beberapa kali, jadi pembolehubah tempatan boleh ditakrifkan untuknya: $content.

Dalam contoh di atas, jenis acara terikat pada elemen ialah klik Apabila pengguna mengklik, peristiwa terikat akan dicetuskan, dan kemudian kod fungsi acara akan dilaksanakan. Sekarang tukar jenis acara kepada alih tetikus dan keluar tetikus, iaitu, apabila kursor meluncur ke atas, acara itu dicetuskan. Langkah-langkah berikut diperlukan.

1. Tunggu DOM dimuatkan.
2. Cari elemen di mana "tajuk" terletak dan ikat acara alih tetikus.
3. Cari elemen "Kandungan" dan paparkan "Kandungan".
4. Cari elemen di mana "tajuk" terletak dan ikat acara keluar tetikus.
5. Cari elemen "Kandungan" dan sembunyikan "Kandungan".

Selepas kod dijalankan, apabila kursor meluncur ke atas pautan "Tajuk", "Kandungan" yang sepadan akan dipaparkan. Apabila kursor meluncur keluar daripada pautan "tajuk", "kandungan" yang sepadan disembunyikan.

Kod adalah seperti berikut:

$(function(){ 
 $("#panel h5.head").bind("mouseover",function(){ 
  $(this).next().show(); 
 }); 
  $("#panel h5.head").bind("mouseout",function(){ 
   $(this).next().hide(); 
 }) 
})

Dalam contoh di atas, kaedah bind() digunakan untuk mengikat acara klik, acara alih tetikus dan acara keluar tetikus masing-masing Kaedah pengikatan adalah sama. Selain itu, kaedah bind0 juga boleh mengikat semua acara JavaScript lain.

Peristiwa seperti klik, alih tetikus dan keluar tetikus sering digunakan dalam program jQuery juga menyediakan satu set kaedah singkatan untuk ini. Kaedah singkatan adalah serupa dengan kaedah bind() dan mencapai kesan yang sama Satu-satunya perbezaan ialah ia boleh mengurangkan jumlah kod.

Sebagai contoh, jika anda menulis semula contoh di atas untuk menggunakan singkatan untuk mengikat acara, kodnya adalah seperti berikut:

$(function(){
 $("#panel2 h5.head").mouseover(function(){
   $(this).next().show();
  });
  $("#panel2 h5.head").mouseout(function(){
    $(this).next().hide();
  })
})

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.