How do I understand jquery (4) and switch the event hover & toggle

Author: Tian xiangbing's blog address: Yun

 

Author: Tian xiangbing blog address: http://www.cnblogs.com/tianxiangbing

I used two articles to explain how to use jquery to query and find the dom node. Now I have to use two articles to explain jquery's event-driven, this point has been clearly stated in the previous article, including the use of click events most commonly used in js, such as other events, which are handled in a similar way as click events. For example, when a form event is submit, $ ("form") is written "). submit (/* fuc */), and keydown for Keyboard Events, $ ("div "). keydown (/* fuc */); and mouveover of the mouse (triggered when the mouse is moved into the object). Therefore, this section does not need to describe these common events again, in this section, we will talk about switching hover | toggle of events.

Click here for the case and source code.

Let's take a look at the descriptions of hover (over/* function */, out/* function */) in the API:

A method that imitates a hover event (move the mouse over an object and remove it. This is a custom method that provides a "Keep in it" status for frequently used tasks.

Its human language statement is that when the mouse moves into an object, it will trigger a method. When the mouse moves out, it will trigger another method. To put it bluntly, it is the combination of onmouseover and onmouseout, that is, two events are bound to a node at the same time.

Well, we use it to describe its usage. For example, in the previous section, there is a table-type data on the page, because the data volume is large, perhaps we need to deepen the background color of the row when moving the mouse, so that we can focus more on it. When moving the mouse over this line, we need to restore the background color. The Code is as follows:

Js:

$ (". List tr"). hover (function (){

Certificate (this).css ("backgroundColor", "blue ");

}, Function (){

Certificate (this).css ("backgroundColor", "# fff ");

});

This is easy to understand, right? But the problem is that if the original table has a background color, it will convert the original background color to white. Suppose we still make the color of the odd and even rows different.

$ (". List tr: even" ).css ("backgroundColor", "# ddddee ");

$ (". List tr: odd" ).css ("backgroundColor", "#999 ");

So how can I move the color to the original color? We can use the class in css to create a class. brTR

Then, change the JS file:

$ (". List tr"). hover (function (){

$ (This). addClass ("brTR ");

}, Function (){

$ (This). removeClass ("brTR ");

});

As a result, you try again and find that it still does not work. Why? Because you used css () to change the color of the parity line, this setting is style, because the weight of the style is greater than that of the class, the browser will give priority to the style, so the color change just now has to be changed as follows:

Css:

Tr. brTR {background-color: blue ;}

. Odd {background-color: #999 ;}

. Even {background-color: # ddddee ;}

 

JS:

$ (". List tr: even"). addClass ("event ");

$ (". List tr: odd"). addClass ("odd ");

Here I changed brTR to tr. brTR, so as to increase the weight of this class, otherwise its weight and. odd is the same, while. odd is behind, so it will only be displayed. odd or. even background. in CSS weight, the general situation is style> ID> class> div. If it is of the same level, the more detailed the weight is, the more relevant information can be consulted if you are interested.

We found that this writing method is much easier, but it still seems a bit repetitive, because in the migration and removal events, the same class is added and deleted. Does jquery have a simpler method, the answer is yes. There is also a toggleClass in jquery, which is based on the switching style between the two States. It is used to remove the class and add it if it is not. Therefore, the code above can be further simplified:

$ (". List tr"). hover (function (){

$ (This). toggleClass ("brTR ");

});

We even omitted the second function. Only this line can be done. Move the mouse to the color-changing effect. When the second parameter out/* function */is omitted, by default, it will continue to call the first parameter when it is out, So toggleClass is also useful.

I want to view the data of multiple rows to facilitate the comparison. I want them to maintain different background colors, such as red for the first level, green for the second level, and yellow for the third level. Well, we need to introduce toggle for the next jquery switching event. It indicates that the parameter function is called in sequence every time you click it. Therefore, this function is simple. You can do this:

$ (". List tr"). toggle (function (){

Certificate (this).css ("backgroundColor", "red ");

}, Function (){

Certificate (this).css ("backgroundColor", "green ");

}, Function (){

((This).css ("backgroundColor", "yellow ");

});

In this way, you can complete switching between multiple States. toggle performs the click event, which is to execute multiple clicks in sequence. Because it can switch the click event, we can use it to do the most common click Display hiding function. For example, we have an advertisement floating bar. If you want to close it after clicking it, and then click "Restore" again, what should you do? Consider 30 seconds.

Okay, 30 seconds later. Please refer to the following code snippet:

Html:

Close

 

Js:

$ (". Ad a. close"). toggle (function (){

$ (". Ad img"). hide ();

Certificate (this).html ("Restore ");

}, Function () {$ (". ad img" ).show({{}(this}.html ("close ");});

Well, today we are here. You can try these two switching methods, such as common navigation menus and simulated check boxes. If you have any questions, please read this article again. Or join my Q group 70210212 for discussion.

Click here for the case and source code.