目录
前言
1、原生js和jQuery优势对比
1.1、原生JavaScript优点
1.2、jQuery优点
2、侧边栏代码展示
2.1、 原生js代码
2.2、jQuery代码
总结
前言
时隔多少的日日夜夜小编我回来了，这次小编我给你们带来了重构的小米官网的侧边栏。说真的当你写完原生的JavaScript代码之后再去用jQuery再去做一遍，代码量会少的你怀疑人生。当然吐槽归吐槽，咱们还是要实战搞一手！
1、原生js和jQuery优势对比
1.1、原生JavaScript优点
JavaScript是一种解释性脚本语言（代码不进行预编译）主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。1.2、jQuery优点
轻量级、核心文件才几十KB，不会影响页面加载速度跨浏览器兼容。基本兼容了现在主流的浏览器链式编程、隐式迭代对事件、样式、动画支持，大大简化了DOM操作支持插件扩展开发，有着丰富的第三方的插件免费、开源在使用过原生js和jQuery这两种之后，小编最直观的感受就是代码量，原生js的代码量可谓是非常的长，或许一个效果的逻辑不复杂，但是你用原生代码写出来之后就是会给你一种这个效果很复杂很难。但是jQuery不会，因为他的代码量真的很少。我说你们可能不行。下面我们实战搞一手！
2、侧边栏代码展示
小米侧边栏
2.1、 原生js代码
var bannernav = document.querySelector('.banner-nav');var bannernavlis = bannernav.querySelectorAll('li');var bannerbox = document.querySelector('.banner-box');var childbox = bannerbox.querySelectorAll('.childbox');for (var j = 0; j < bannernavlis.length; j++) {bannernavlis[j].setAttribute('index', j);bannernavlis[j].addEventListener('mouseenter', function() {var index = this.getAttribute('index');bannerbox.style.display = 'block';for (var i = 0; i < childbox.length; i++) {childbox[i].style.display = 'none';}childbox[index].style.display = 'block';});bannernavlis[j].addEventListener('mouseleave', function() {bannerbox.addEventListener('mouseenter', function() {bannerbox.style.display = 'block';});bannerbox.addEventListener('mouseleave', function() {bannerbox.style.display = 'none';});bannerbox.style.display = 'none';});}
2.2、jQuery代码
$(".banner-nav li").hover(function() {$(".banner-box").stop().show();var index = $(this).index();$(".childbox").eq(index).stop().show().siblings().stop().hide();}, function() {$(".banner-box").hover(function() {$(this).stop().show();}, function() {$(this).stop().hide();})$(".banner-box").stop().hide();});
果然是没有对比就没有伤害，相比于原生js我更爱jQuery！
总结
小编我这次的分享就早早结束了，不知道对于jQuery你们爱了吗？
