Example analysis of DOM event synthesis usage in JQuery_jquery

The example in this article describes the usage of DOM event synthesis in JQuery. Share it with everyone for your reference. The specific analysis is as follows:

jQuery has two synthetic events - the hover() method and the toggle() method. Similar to the ready() method mentioned earlier, the hover() method and the toggle() method are both jQuery's custom methods.

hover() method

The syntax structure of the hover() method is:
hover(enter,leave);

hover() method is used to simulate cursor hover events. When the cursor moves over the element, the specified first function (enter) will be triggered; when the cursor moves out of the element, the specified second function (leave) will be triggered.

The code is:

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

The effect after running the code is the same as the effect after running the following code. When the cursor slides over the "Title" link, the corresponding "Content" will be displayed; when the cursor slides out of the "Title" link, the corresponding "Content" will be hidden.

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

Note:

1. There are pseudo-class selectors in CSS, such as ":hover", which will change the appearance of the element when the user's cursor hovers over it. In most conforming browsers, pseudo-class selectors can be used on any element. However, in IE 6, pseudo-class selectors can only be used for hyperlink elements. For other elements, you can use jQuery's hover() method.

2. The hover() method accurately replaces bind("mouseenter") and bind("mouseleave") in jQuery, rather than replacing bind("mouseover") and bind("mouseout"). Therefore, when you need to trigger the second function of the hover() method, you need to use trigger("mouseleave") instead of trigger("mouseout").

toggle() method

The grammatical structure of the toggle() method is:
toggle(fnl, fn2, ...fnN);

The toggle() method is used to simulate continuous mouse click events. The first time you click an element, the specified first function (fn1) is triggered; when the same element is clicked again, the specified second function (fh2) is triggered; if there are more functions, they are triggered in sequence until the end one. Each subsequent click repeats the call to these functions in turn.

In the previous example of enhancing the effect, the following jQuery code was used:

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

By using the toggle() method, not only the same effect is achieved, but the code is also simplified.

toggle() method has another role in jQuery: switching the visible state of an element. If the element is visible, it will be hidden after clicking to toggle it; if the element is hidden, it will be visible after clicking to toggle it. Therefore, the above code can also be written as the following jQuery code:

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

In order to have a better user experience, it is now necessary to not only display the "content" but also highlight the "title" after the user clicks the "Title" link. The code is:

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

After running the code, if the "Content" is displayed, the "Title" will be highlighted: if the "Content" is hidden, the "News Title" will not be highlighted.

I hope this article will be helpful to everyone’s jQuery programming.