前言
时隔多少的日日夜夜小编我回来了,这次小编我给你们带来了重构的小米官网的侧边栏。说真的当你写完原生的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你们爱了吗?