JQuery implements click and mouse event sensing, jquery mouse Induction

JQuery implements click and mouse event sensing, jquery mouse Induction

1. dynamically alternate click events

Previously we talked about toggleClass (). For click events, jQuery also provides a dynamically alternate toggle () method. This method accepts two parameters, both of which are listener functions, used in the click event.

Example: Dynamic Interaction of click events.

Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("# Ddd"). toggle (
Function (oEvent ){
Certificate (oevent.target).css ("opacity", "0.5 ");
},
Function (oEvent ){
Certificate (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.

Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("# Ddd"). hover (
Function (oEvent ){
// The first function is equivalent to a mouseover event listener.
Certificate (oevent.target).css ("opacity", "0.5 ");
},
Function (oEvent ){
// The second function is equivalent to a mouseover event listener.
Certificate (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

Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("# Ddd"). click (function (){
$ ("# Eee"). toggle ();
});
});
</Script>
<Div id = "ddd"> 11 </div>
<Div id = "eee"> 122 </div>

2.css attributes

Copy codeThe Code is as follows:
<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 is here. Do you have a new understanding of jQuery mouse events? I hope my friends will like it.