jQuery interactive help methods
1. hover(over, out)
The hover function mainly solves the problems of mouseover and mouseout functions in original javascript. Look at the following example:
There are two divs (red area), each with a div (yellow area) nested inside. The HTML code is as follows:
<div class="outer" id="outer1"> Outer 1 <div class="inner" id="inner1">Inner 1</div> </div> <div class="outer" id="outer2"> Outer 2 <div class="inner" id="inner2">Inner 2</div> </div> <div id="console"> </div>
is bound as follows Event:
<script type="text/javascript">
function report(event) {
$('#console').append('<div>'+event.type+'</div>');
}
$(function(){
$('#outer1')
.bind('mouseover',report)
.bind('mouseout',report);
$('#outer2').hover(report,report);
});
</script>
Outer1 we used mouseover and mouseout events. When the mouse moves from the red area to the yellow area of Outer1, you will find that although it is moving inside outer1, mouseout is triggered. Event:
Many times we don’t want the result shown above, but we want the event not to be triggered only when the mouse moves inside Outer1. Outer2 uses the Hover() function to achieve this This effect:
Note that the event name here is called "mouseenter" when entering, and "mouseleave" when leaving, instead of using the "mouseover" and "mouseleave" events.
Experienced developers will immediately think of this problem that they often encounter when making pop-up menus: the mouseout event is set for the pop-up menu to automatically close, but when the mouse moves within the pop-up menu, the mouseout event is often triggered inexplicably to close the menu. . The hover() function helped us solve this problem very well.
2. toggle( fn, fn2, fn3,fn4,... )
The toggle function can add a click event binding function to the object, but set the function to be called sequentially after each click.
If a matching element is clicked, the first specified function is triggered. When the same element is clicked again, the specified second function is triggered. If there are more functions, it is triggered again until the last one. Each subsequent click repeats the call to these functions in turn.
You can use unbind("click") to delete.
The following example demonstrates how to use the toggle function:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>
<title>toggle example</title>
<link rel="stylesheet" type="text/css" href="css/hover.css">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function()
{
$("li").toggle( function()
{
$(this).css({ "list-style-type": "disc", "color": "blue" });
}, function()
{
$(this).css({ "list-style-type": "square", "color": "red" });
}, function()
{
$(this).css({ "list-style-type": "none", "color": "" });
}
);
}) </script></head><body>
<ul>
<li style="cursor:pointer">click me</li>
</ul>
</body>
</html>
The result is that the list symbol and text color change every time "click me" is clicked.
