Examples of DOM Event merging in JQuery _ jquery-js tutorial

This article mainly introduces the usage of DOM Event merging in JQuery, and analyzes the skills related to event merging using the hover () method and toggle () method in the form of examples, for more information about DOM Event merging in JQuery, see the following example. Share it with you for your reference. The specific analysis is as follows:

JQuery has two merging events: the hover () method and the toggle () method, similar to the ready () method, hover () method, and toggle () method () all methods belong to the jQuery custom method.

Hover () method

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

The hover () method is used to simulate a cursor hover event. When the cursor moves to an element, the specified 1st functions (enter) are triggered. When the cursor moves out of this element, the specified 2nd functions (leave) are triggered ).

Code:

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

The effect of running the code is the same as that of 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("p.content").show();  });  $("#panel h5.head").mouseover(function(){   $(this).next("p.content").hide();  }) });

Note:

1. the CSS contains a pseudo-class selector, for example, ": hover". When you hover your cursor over an element, it will change the appearance of the element. In most compliant browsers, pseudo-class delimiters can be used for any element. However, in IE 6 browser, the pseudo-class selector 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, instead of bind ("mouseover") and bind ("mouseout "). Therefore, to trigger the 2nd functions of the hover () method, trigger ("mouseleave") instead of trigger ("mouseout") is required ").

Toggle () method

The syntax structure of the toggle () method is as follows:
Toggle (fnl, fn2,... fnN );

The toggle () method is used to simulate consecutive Mouse clicking events. When an element is clicked 1st, the specified 1st functions (fn1) are triggered. When the same element is clicked again, the specified 2nd functions (fh2) are triggered. If more functions exist, it is triggered sequentially until the last one. The subsequent call to these functions is repeated at each click.

The following jQuery code is used in the previous example to enhance the effect:

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

The toggle () method not only achieves the same effect, but also simplifies the code.

The toggle () method has another role in jQuery: Switching the visible state of an element. If the element is visible, click switch to hide it. If the element is hidden, click switch to hide 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();  }) })

To provide a better user experience, you need to click the "title" link to not only display "content", but also highlight "title ". Code:

$(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 is highlighted. if the content is hidden, the news title is not highlighted ".

I hope this article will help you with jQuery programming.