jQuery的小米官网-----侧边导航栏

本文对比了原生JavaScript与jQuery在实现相同功能时的代码量差异,通过具体实例展示了两者各自的优势。介绍了JavaScript作为解释性脚本语言的特性及jQuery的轻量化、兼容性好等特点。
摘要由CSDN通过智能技术生成


前言

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值