JQuery implements the code (recommended) to show the drop-down box when the cursor passes through the shopping cart. jquery drop-down box

JQuery implements the code (recommended) to show the drop-down box when the cursor passes through the shopping cart. jquery drop-down box

I have been studying the web Front-end for some time and recently learned the jQuery library. I am deeply impressed by the powerful functions of writing the drop-down box of the shopping cart and will share my understanding with you, you are welcome to give me some advice. If you don't talk nonsense, start with the question:

　Shopping Cart html:

<! -- Shopping cart start --> <div class = "shopping" id = "shopping-box"> <a href = "" id = "shoptext"> <I class = "iconfont"> shopping Cart (0) </a> <! -- Start in the drop-down box of the shopping cart --> <div class = "shop" id = "shop-content"> there are no items in the shopping cart. Please buy them now! </Div> <! -- End of the shopping cart drop-down box --> </div> <! -- Shopping cart end -->

When I first learned how to write native js:

// Startvar shoppingBoxNode = document in the drop-down box of the shopping cart. getElementById ("shopping-box"); var shopContentNode = document. getElementById ("shop-content"); var shoptext = document. getElementById ("shoptext"); shoppingBoxNode. onmouseenter = function () {shoptext. style. background = "# fff"; shoptext. style. color = "# ff6700"; shopContentNode. style. display = "block"; console. log ("over") ;}; shoppingBoxNode. onmouseleave = function () {shoptext. style. background = ""; shoptext. style. color = ""; shopContentNode. style. display = ""; console. log ("out") ;}; // end of the shopping cart drop-down box

It is very troublesome and hard to understand. We will use jQuery to write it below:

// Var interval1; $ ("# shopping-box" values ({"color": "# ff6700", "background": "# fff "}); $ (this ). children (). last (). stop (true, true ). slideDown ();}). mouseleave (function () {var self = $ (this); interval1 = setTimeout (function () {self. children (). first (). removeAttr ("style"); }, 700); $ (this ). children (). last (). delay( 200 ). slideUp ();});

This seems to be a lot of neat, relatively reduced the amount of code, the event here using the application chain writing, in addition, the compatibility of jQuery methods has basically been solved in it, which actually reduces the front-end workload a lot, when using native, the compatible debugging header is almost cracked (everyone knows ...), The delay and stop animation stop in jQuery are used for processing (two very useful functions). problems occur when the mouse moves too fast.

The event writing method can also be replaced by the following method (on can also be replaced by bind ):

// Var interval1; $ ("# shopping-box"). on ({mouseenter: function () {}, mouseleave: function (){}});

The above is a small series of jQuery Implementation of the mouse through the shopping cart drop-down box, I hope to help you, if you have any questions, please leave a message, the small series will reply to you in a timely manner. Thank you very much for your support for the help House website!