Jquery learning notes-jQuery implements click and mouse event sensing, jquery-jquery

Jquery learning notes-jQuery implements click and mouse event sensing, jquery-jquery

For click events, jQuery also provides a dynamically alternating toggle () method. This method accepts two parameters, both of which are listener functions and are used in the click events.

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

In css, you can use the hover pseudo class to implement style revisions to implement separate css styles. After jQuery is introduced, almost all elements can use hover () to sense the mouse. In addition, more complex effects can be created. In essence, it is the combination of mouseover and mouseout events.
The hover (over, out) method can accept two parameters, both of which are functions. The first is triggered by moving the mouse over the element, and the second is triggered when the mouse is removed from the element.

<Script type = "text/javascript"> $ (function () {$ ("# ddd "). hover (function (oEvent) {// The first function is equivalent to listening for a mouseover event (oevent.target).css ("opacity", "0.5") ;}, function (oEvent) {// The second function is equivalent to listening for the mouseover event (oevent.target).css ("opacity", "1.0 ");});}); </script> <div id = "ddd"> 11 </div>

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

 

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

1. Regular 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>

 

It is not easy to write a blog. You are welcome to give comments for encouragement. Sharing is a pleasure! You are welcome to shoot bricks and likes. (JavaScript, ajax, and jQuery articles are constantly updated. Follow me to stay updated)

Other highlights

JQuery tutorial (29)-jQuery plug-in development-Specify parameters for plug-in Methods jQuery tutorial (28)-jQuery plug-in development-jQuery tutorial (27) -jQueryajax-Modify default options jQuery tutorial (26)-ajax-use JSONP to load Remote Data jQuery tutorial (25)-security restrictions on ajax operations