Contoh analisis penggunaan sintesis acara DOM dalam JQuery_jquery

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

jQuery mempunyai dua peristiwa sintetik - kaedah hover() dan kaedah toggle() Sama seperti kaedah ready() yang dinyatakan sebelum ini, kaedah hover() dan kaedah toggle() adalah kaedah tersuai jQuery.

kaedah tuding()

Struktur sintaks kaedah hover() ialah:
tuding(masuk,keluar);

Kaedah

legar() digunakan untuk mensimulasikan peristiwa led kursor. Apabila kursor bergerak ke atas elemen, fungsi pertama yang ditentukan (enter) akan dicetuskan; apabila kursor bergerak keluar dari elemen, fungsi kedua yang ditentukan (cuti) akan dicetuskan.

Kodnya ialah:

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

Kesan selepas menjalankan kod adalah sama seperti kesan selepas menjalankan kod berikut. Apabila kursor meluncur ke atas pautan "Tajuk", "Kandungan" yang sepadan akan dipaparkan apabila kursor meluncur keluar daripada pautan "Tajuk", "Kandungan" yang sepadan akan disembunyikan.

$(function(){ 
 $("#panel h5.head").mouseover(function(){ 
  $(this).next("div.content").show(); 
 }); 
 $("#panel h5.head").mouseover(function(){ 
  $(this).next("div.content").hide(); 
 }) 
});

Nota:

1. Terdapat pemilih kelas pseudo dalam CSS, seperti ":hover", yang akan mengubah penampilan elemen apabila kursor pengguna melayang di atasnya. Dalam kebanyakan pelayar yang mematuhi, pemilih kelas pseudo boleh digunakan pada mana-mana elemen. Walau bagaimanapun, dalam IE 6, pemilih kelas pseudo hanya boleh digunakan untuk elemen hiperpautan. Untuk elemen lain, anda boleh menggunakan kaedah hover() jQuery.

2. Kaedah hover() tepat menggantikan bind("mouseenter") dan bind("mouseleave") dalam jQuery, bukannya menggantikan bind("mouseover") dan bind("mouseout"). Oleh itu, apabila anda perlu mencetuskan fungsi kedua kaedah hover(), anda perlu menggunakan trigger("mouseave") dan bukannya trigger("mouseout").

kaedah togol()

Struktur tatabahasa kaedah toggle() ialah:
togol(fnl, fn2, ...fnN);

Kaedah togol() digunakan untuk mensimulasikan peristiwa klik tetikus berterusan. Pada kali pertama anda mengklik elemen, fungsi pertama yang ditentukan (fn1) dicetuskan; satu. Setiap klik seterusnya mengulangi panggilan ke fungsi ini secara bergilir-gilir.

Dalam contoh sebelumnya untuk meningkatkan kesan, kod jQuery berikut telah digunakan:

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

Dengan menggunakan kaedah toggle(), bukan sahaja kesan yang sama dicapai, tetapi kod juga dipermudahkan.

Kaedah

toggle() mempunyai peranan lain dalam jQuery: menukar keadaan elemen yang boleh dilihat. Jika elemen itu kelihatan, ia akan disembunyikan selepas mengklik untuk menogolnya; jika elemen itu tersembunyi, ia akan kelihatan selepas mengklik untuk menogolnya. Oleh itu, kod di atas juga boleh ditulis sebagai kod jQuery berikut:

$(function(){ 
 $("#panel h5.head").toggle(function(){ 
  $(this).next().toggle(); 
 },function(){ 
  $(this).next().toggle(); 
 }) 
})

Untuk mendapatkan pengalaman pengguna yang lebih baik, kini perlu bukan sahaja memaparkan "kandungan" tetapi juga menyerlahkan "tajuk" selepas pengguna mengklik pautan "Tajuk". Kodnya ialah:

$(function(){ 
 $("#panel h5.head").toggle(function(){ 
   $(this).addClass("highlight"); 
  $(this).next().show(); 
 },function(){ 
  $(this).removeClass("highlight"); 
   $(this).next().hide(); 
 }); 
})

Selepas menjalankan kod, jika "Kandungan" dipaparkan, "Tajuk" akan diserlahkan: jika "Kandungan" disembunyikan, "Tajuk Berita" tidak akan diserlahkan.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.