Exemple d'analyse de l'utilisation de la synthèse d'événements DOM dans JQuery_jquery

L'exemple de cet article décrit l'utilisation de la synthèse d'événements DOM dans JQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

jQuery a deux événements synthétiques : la méthode hover() et la méthode toggle(). Semblables à la méthode ready() mentionnée précédemment, la méthode hover() et la méthode toggle() sont toutes deux des méthodes personnalisées de jQuery.

Méthode hover()

La structure syntaxique de la méthode hover() est :
survoler (entrer, partir);

La méthode hover() est utilisée pour simuler les événements de survol du curseur. Lorsque le curseur se déplace sur l'élément, la première fonction spécifiée (entrer) sera déclenchée ; lorsque le curseur quitte l'élément, la deuxième fonction spécifiée (quitter) sera déclenchée.

Le code est :

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

L'effet après l'exécution du code est le même que l'effet après l'exécution du code suivant. Lorsque le curseur glisse sur le lien « Titre », le « Contenu » correspondant sera affiché ; lorsque le curseur glisse hors du lien « Titre », le « Contenu » correspondant sera masqué.

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

Remarque :

1. Il existe des sélecteurs de pseudo-classes en CSS, tels que ":hover", qui changeront l'apparence de l'élément lorsque le curseur de l'utilisateur le survolera. Dans la plupart des navigateurs conformes, les sélecteurs de pseudo-classe peuvent être utilisés sur n'importe quel élément. Cependant, dans IE 6, les sélecteurs de pseudo-classe ne peuvent être utilisés que pour les éléments de lien hypertexte. Pour les autres éléments, vous pouvez utiliser la méthode hover() de jQuery.

2. La méthode hover() remplace avec précision bind("mouseenter") et bind("mouseleave") dans jQuery, plutôt que de remplacer bind("mouseover") et bind("mouseout"). Par conséquent, lorsque vous devez déclencher la deuxième fonction de la méthode hover(), vous devez utiliser trigger("mouseleave") au lieu de trigger("mouseout").

Méthode toggle()

La structure grammaticale de la méthode toggle() est :
basculer(fnl, fn2, ...fnN);

La méthode toggle() est utilisée pour simuler des événements de clic de souris continus. La première fois que vous cliquez sur un élément, la première fonction spécifiée (fn1) est déclenchée ; lorsque le même élément est à nouveau cliqué, la deuxième fonction spécifiée (fh2) est déclenchée s'il y a plus de fonctions, elles sont déclenchées en séquence jusqu'à la fin ; un. Chaque clic suivant répète l'appel à ces fonctions à tour de rôle.

Dans l'exemple précédent d'amélioration de l'effet, le code jQuery suivant a été utilisé :

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

En utilisant la méthode toggle(), non seulement le même effet est obtenu, mais le code est également simplifié.

La méthode

toggle() a un autre rôle dans jQuery : changer l'état visible d'un élément. Si l'élément est visible, il sera masqué après avoir cliqué pour l'activer ; si l'élément est masqué, il sera visible après avoir cliqué pour l'activer. Par conséquent, le code ci-dessus peut également être écrit comme le code jQuery suivant :

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

Afin d'avoir une meilleure expérience utilisateur, il est désormais nécessaire non seulement d'afficher le "contenu" mais également de mettre en avant le "titre" après que l'utilisateur clique sur le lien "Titre". Le code est :

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

Après avoir exécuté le code, si le « Contenu » est affiché, le « Titre » sera mis en surbrillance : si le « Contenu » est masqué, le « Titre de l'actualité » ne sera pas mis en surbrillance.

J'espère que cet article sera utile à la programmation jQuery de chacun.