jQuery implementation of the mouse through the shopping cart appears drop down box code of recommendation

I have been studying the front end of web for a while. I recently learned the jQuery library, and I feel that it is powerful. Below, I will communicate my understanding with you by writing the drop-down box of the shopping cart. Welcome all the great gods to point out and correct me. Don't talk too much, get down to business:

Shopping cart html:

<!--  Shopping cart  start -->
<div class="shopping" id="shopping-box">
<a href="" id="shoptext"><i class="iconfont">&#xe605;</i>  Shopping cart ( 0 ) </a>
<!--  Shopping cart drop-down box  start-->
<div class="shop" id="shop-content">
 There are no goods in the shopping cart, so buy them quickly! 
</div>
<!--  Shopping cart drop-down box  end-->
</div>
<!--  Shopping cart  end -->

When I first started learning the writing of native js:

// Shopping cart drop-down box  start
var shoppingBoxNode = document.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");
};
// Shopping cart drop-down box  end

It feels troublesome and difficult to understand. The following is written in jQuery:

// Shopping cart   Drop-down 
var interval1;
$("#shopping-box").mouseenter(function(){
clearTimeout(interval1);
$(this).children().first().css({"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 looks much cleaner and relatively reduces the amount of code, which uses the writing method of application chain for events, and the compatibility problem of jQuery method has been basically solved in it, which really reduces the workload of the front end a lot, and the head of adjusting compatibility with native time is almost exploded (everyone knows...) , which used the jQuery in the delay delay and stop animation stop to deal with (very easy to use two functions), when the mouse moves too fast problems

Of course, the event can also be written in the following way (on can also be replaced by bind):

// Shopping cart   Drop-down 
var interval1;
$("#shopping-box").on({
mouseenter:function(){
},
mouseleave:function(){ 
}
});