这一段时间在学习web前端，最近学了jQuery库,深感其强大，下面通过写购物车的下拉框做法，把自己的理解和大家交流一下，欢迎各位大神指点指正，废话不多说，开始正题：
购物车html:
1 <!-- 购物车 start --> 2 <div class=\"shopping\" id=\"shopping-box\"> 3 <a href=\"\" id=\"shoptext\"><i class=\"iconfont\"></i> 购物车（0）</a> 4 <!-- 购物车下拉框 start--> 5 <div class=\"shop\" id=\"shop-content\"> 6 购物车中还没有商品，赶紧选购吧！ 7 </div> 8 <!-- 购物车下拉框 end--> 9 </div>10 <!-- 购物车 end -->
刚开始学习原生js时候的写法：
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 });
第一次写博客，写的比较乱，也有点也没有突出重点，望大家见谅，也欢迎大家批评指正，共同进步！