Beispielanalyse der Verwendung der DOM-Ereignissynthese in JQuery_jquery

Das Beispiel in diesem Artikel beschreibt die Verwendung der DOM-Ereignissynthese in JQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

jQuery verfügt über zwei synthetische Ereignisse – die hover()-Methode und die toggle()-Methode. Ähnlich wie die zuvor erwähnte ready()-Methode sind sowohl die hover()-Methode als auch die toggle()-Methode benutzerdefinierte Methoden von jQuery.

hover()-Methode

Die Syntaxstruktur der hover()-Methode ist:
schweben (betreten, verlassen);

Die

hover()-Methode wird verwendet, um Cursor-Hover-Ereignisse zu simulieren. Wenn sich der Cursor über das Element bewegt, wird die angegebene erste Funktion (Eingabe) ausgelöst; wenn sich der Cursor aus dem Element herausbewegt, wird die angegebene zweite Funktion (Verlassen) ausgelöst.

Der Code lautet:

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

Der Effekt nach dem Ausführen des Codes ist derselbe wie der Effekt nach dem Ausführen des folgenden Codes. Wenn der Cursor über den Link „Titel“ gleitet, wird der entsprechende „Inhalt“ angezeigt. Wenn der Cursor über den Link „Titel“ gleitet, wird der entsprechende „Inhalt“ ausgeblendet.

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

Hinweis:

1. Es gibt Pseudoklassenselektoren in CSS, wie zum Beispiel „:hover“, die das Erscheinungsbild des Elements ändern, wenn der Benutzer mit der Maus darüber fährt. In den meisten konformen Browsern können Pseudoklassenselektoren für jedes Element verwendet werden. In IE 6 können Pseudoklassenselektoren jedoch nur für Hyperlink-Elemente verwendet werden. Für andere Elemente können Sie die hover()-Methode von jQuery verwenden.

2. Die hover()-Methode ersetzt bind("mouseenter") und bind("mouseleave") in jQuery genau, anstatt bind("mouseover") und bind("mouseout"). Wenn Sie daher die zweite Funktion der hover()-Methode auslösen müssen, müssen Sie Trigger("mouseleave") anstelle von Trigger("mouseout") verwenden.

toggle()-Methode

Die grammatikalische Struktur der toggle()-Methode ist:
toggle(fnl, fn2, ...fnN);

Die toggle()-Methode wird verwendet, um kontinuierliche Mausklickereignisse zu simulieren. Wenn Sie zum ersten Mal auf ein Element klicken, wird die angegebene erste Funktion (fn1) ausgelöst. Wenn Sie erneut auf dasselbe Element klicken, wird die angegebene zweite Funktion (fh2) ausgelöst. Wenn weitere Funktionen vorhanden sind, werden diese nacheinander bis zum Ende ausgelöst eins. Jeder weitere Klick wiederholt den Aufruf dieser Funktionen.

Im vorherigen Beispiel zur Verstärkung des Effekts wurde der folgende jQuery-Code verwendet:

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

Durch die Verwendung der toggle()-Methode wird nicht nur der gleiche Effekt erzielt, sondern auch der Code vereinfacht.

Die Methode

toggle() hat in jQuery noch eine weitere Rolle: das Umschalten des sichtbaren Zustands eines Elements. Wenn das Element sichtbar ist, wird es nach dem Klicken zum Umschalten ausgeblendet. Wenn das Element ausgeblendet ist, wird es nach dem Klicken zum Umschalten sichtbar. Daher kann der obige Code auch als folgender jQuery-Code geschrieben werden:

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

Um ein besseres Benutzererlebnis zu haben, ist es nun notwendig, nicht nur den „Inhalt“ anzuzeigen, sondern auch den „Titel“ hervorzuheben, nachdem der Benutzer auf den Link „Titel“ geklickt hat. Der Code lautet:

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

Wenn nach dem Ausführen des Codes der „Inhalt“ angezeigt wird, wird der „Titel“ hervorgehoben: Wenn der „Inhalt“ ausgeblendet ist, wird der „Nachrichtentitel“ nicht hervorgehoben.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.