jQuery implements click and mouse sensing events

jQuery implements click and mouse sensing events. Students who are not familiar with jQuery events may not understand jQuery very well. Students who have click and mouse sensing events can collect it and take a look!

1. Implement dynamic alternation of click events

We talked about toggleClass() before. For click events, jQuery also provides The dynamic alternating toggle() method is introduced. This method accepts two parameters. Both parameters are listening functions and are used alternately in the click event.

Example: Dynamic interaction of click events.

<script type="text/javascript">
            $(function() {
                $("#ddd").toggle(
                    function(oEvent) {
                        $(oEvent.target).css("opacity", "0.5");
                    },
                    function(oEvent) {
                        $(oEvent.target).css("opacity", "1.0");
                    }
                );
            });
        </script>
        <div id="ddd">11</div>

2. Implement mouse sensing

You can use:hoverpseudo-class in css to implement style revision, Implement separate css styles. After the introduction of jQuery, almost all elements can use hover() to sense the mouse. And can create more complex effects. Its essence is the merger of mouseover and mouseout events.
hover(over,out) method accepts two parameters, both of which are functions. The first one is triggered when the mouse moves over the element, and the second one is triggered when the mouse moves out of the element.

<script type="text/javascript">
            $(function() {
                $("#ddd").hover(
                    function(oEvent) {
                        //第一个函数相当于mouseover事件监听
                        $(oEvent.target).css("opacity", "0.5");
                    },
                    function(oEvent) {
                        //第二个函数相当于mouseover事件监听
                        $(oEvent.target).css("opacity", "1.0");
                    }
                );
            });
        </script>
        <div id="ddd">11</div>

Compared with the first example, toggle() is just replaced by hover().

Under the guidance of wenzi0_0, write a few small examples about toggle()

1. Conventional applications

<script type="text/javascript">
            $(function() {
                $("#ddd").click(function(){
                $("#eee").toggle();    
                });
            });
        </script>
        <div id="ddd">11</div>
        <div id="eee">122</div>

2.css attributes

<script type="text/javascript">
            $(function(){
                $("#eee").toggle(function() {
                        $("#ddd").css("background-color", "green");
                    },
                    function() {
                        $("#ddd").css("background-color", "red");
                    },
                    function() {
                        $("#ddd").css("background-color", "yellow");
                    }
                );
            });
        </script>
        <div id="ddd">11</div>
        <div id="eee">122</div>

This article ends here first. Are students familiar with jQuery? I have a new understanding of mouse events

Related recommendations:

mouseout and mouseover in jQuery events When there are child elements

##jquery event hover , mouseenter, mouseleave only trigger animation once

The difference between jQuery events mouseover, mouseout and hover

The above is the detailed content of jQuery implements click and mouse sensing events. For more information, please follow other related articles on the PHP Chinese website!