这一段时间在学习web前端，最近学了jQuery库,深感其强大，下面通过写购物车的下拉框做法，把自己的理解和大家交流一下，欢迎各位大神指点指正，废话不多说，开始正题：

购物车html:

 1 <!-- 购物车 start -->
 2 <div class="shopping"  id="shopping-box">
 3         <a href="" id="shoptext"><i class="iconfont">&#xe605;</i> 购物车（0）</a>
 4         <!-- 购物车下拉框 start-->
 5         <div class="shop" id="shop-content">
 6  购物车中还没有商品，赶紧选购吧！
 7         </div>
 8         <!-- 购物车下拉框 end-->
 9 </div>
10 <!-- 购物车 end -->

刚开始学习原生时候的写法：

 1 //购物车下拉框 start
 2 var shoppingBoxNode = document.getElementById("shopping-box");
 3 var shopContentNode = document.getElementById("shop-content");
 4 var shoptext = document.getElementById("shoptext");
 5 shoppingBoxNode.onmouseenter = function{
 6     shoptext.style.background = "#fff";
 7     shoptext.style.color = "#ff6700";
 8     shopContentNode.style.display = "block";
 9     console.log("over");
10 };
11 shoppingBoxNode.onmouseleave = function{
12     shoptext.style.background = "";
13     shoptext.style.color = "";
14     shopContentNode.style.display = "";
15     console.log("out");
16 };
17 //购物车下拉框 end

感觉很麻烦，而且还不好理解，下面用jQuery来写的：

 1 //购物车 下拉
 2 var interval1;
 3 $("#shopping-box").mouseenter(function{
 4     clearTimeout(interval1);
 5     $(this).children.first.css({"color":"#ff6700","background":"#fff"});
 6     $(this).children.last.stop(true,true).slideDown;
 7 }).mouseleave(function{
 8     var self = $(this);
 9     interval1 = setTimeout(function{
10         self.children.first.removeAttr("style");
11     },700);
12     $(this).children.last.delay(200).slideUp;
13 });

这个看着就干净利落的多，相对的减少了代码量，这里面事件使用应用链的写法，而且jQuery的方法的兼容问题基本上在其内被都已经被解决了，这点真是让前端的工作量减少了很多，用原生的时候调兼容调的头都快炸了（大家都懂的。。。），里面用到了jQuery中的延时delay和停止动画stop来处理（很好用的两个函数），当鼠标移动过快出现的问题

这里面事件的写法当然也可以用下面的方法（on也可以用bind来替换）：

 1 //购物车 下拉
 2 var interval1;
 3 $("#shopping-box").on({
 4     mouseenter:function{
5 }, 6 mouseleave:function{7 } 8 });

第一次写博客，写的比较乱，也有点也没有突出重点，望大家见谅，也欢迎大家批评指正，共同进步！