jQuery之小米官网重构

前言 

     呀呀呀呀~今天我又来总结小米官网了，不是为上次的博客做补充，而是分享用jQuery做小米官网交互效果。不得不说，用jQuery比用JS能省去好多好多代码呢，正好印证了jQuery的设计宗旨： “write Less , Do More”.

     整体的布局就不说了，和小米官网的第一篇总结一样的布局，因为博主就是复制粘贴的html和css，但对JS换了一种方法重写了一遍，所以！我就直接分享jQuery部分了~

一、经过下载app出现二维码 

 

 分析：第一步还是要先把要做动画的元素获取过来，切记，不论是JS还是jQuery，你要对哪个 元素 做某件事，都是要先选定这个元素，再在这基础上给它绑定方法。因为要实现这个效果很简单，所以代码也不是很多。

jQuery代码： 

 //二维码下拉效果
    $(".download").hover(function () {
        $(".app").addClass("appafter");
    }, function () {
        $(".app").removeClass("appafter");
    })

我们来对比一下实现同样效果的JS代码：

    var download = document.querySelector('.download');
    var app = document.querySelector('.app');
    download.addEventListener('mouseenter', function () {
        app.classList.add('appafter');

    })
    download.addEventListener('mouseleave', function () {
        app.classList.remove('appafter');
    })
    // app二维码部分结束

 朋友们，我没骗你们把，这对比还不够明显么！JS中用于获取元素的一大坨代码，jQuery只用$()就可以实现了，不得不感叹，不愧是程序员，总能创造出这种既简单又方便的方法。

在这个代码中jQuery用到的是  hover()事件切换.

hover([over,]out)

（1）over: 鼠标移到元素上要触发的函数（相当于 mouseenter）

（2）out: 鼠标移出元素要触发的函数（相当于 mouseleave）

1.事件切换 hover 就是鼠标经过和离开的复合写法

2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数

这里用的是事件切换的复合写法，hover(function(){ 鼠标移动到元素上要进行的操作},function(){鼠标移出元素要进行的操作}) . 其中jQeury的element.addClass 等同于 JS中的element.classList.add方法，都是通过给 元素 添加在css中一开始定义好的一个 写了变化后效果的类，再在鼠标离开后，移除这个类来实现的。

同样的原理 把 鼠标经过购物车时，出现下拉框的效果图和代码附上：

  //购物车下拉效果
    $(".shop").hover(function () {
        $(this).addClass("shopAfter");
        $(".shopping").addClass("shoppingAfter");
        $(".shop img")[0].src = 'images/navgation5hover.png';
    }, function () {
        $(this).removeClass("shopAfter");
        $(".shopping").removeClass("shoppingAfter");
        $(".shop img")[0].src = 'images/navgation5.png';
    })

虽然代码看起来多了几条，但是下拉效果的实现就是function()中的第一句，其余的代码只是对样式的修改而已，如果你只是单单想实现下拉效果，这个可以不写 。

二、经过二级导航栏中商品显示效果 

  //手机导航栏下拉效果
    var flag1 = true;
    $(".nvl").hover(function () {
        if (flag1) {
            //添加动画效果
            $(this).children(".nav-item1")[0].style.transition = " height 0.3s";
            //添加 nav-item1-after 这个类
            $(this).children(".nav-item1").addClass("nav-item1-after");
        } else {
            $(this).children(".nav-item1")[0].style.transition = "none";
            $(this).children(".nav-item1").addClass("nav-item1-after");
        }
    }, function (e) {
        if (e.pageY < 93 || e.pageY > 108) {
            $(this).children(".nav-item1")[0].style.transition = " height 0.3s";
            $(this).children(".nav-item1").removeClass("nav-item1-after");
            flag1 = true;
        } else {
            $(this).children(".nav-item1")[0].style.transition = "none";
            $(this).children(".nav-item1").removeClass("nav-item1-after");
            flag1 = false;
        }
    })

粗略看，代码又长又多，但是你仔细看就会发现，其实就两句，其余的都是复制粘贴了三份，改一下 内容罢了，如果不知道为什么要加if判断，可以看一下我的第一次小米官网的分享哟，里面讲解比较详细。

三、登录界面中 登录与注册页面的切换 

 

 //注册登录页面转换
    $(".log").on("click", function () {
        //将 center 这个盒子像左移动到 43px的位置
        $(".center").css("left", "43px");
        //将点击的这个对象（即 登录）的字体颜色设置为黑色
        $(this).css("color", "black");
        //将未点击的另一个对象（即 注册）的字体颜色设置为灰色，为了突出点击的对象
        $(".reg").css("color", "#c0c0c0");
        //下面这两个就是设置 登录 和 注册 文字下面的下划线的显示和隐藏
        $(".log span").show();
        $(".reg span").hide();
    })
    $(".reg").on("click", function () {
        $(".center").css("left", "-366px");
        $(this).css("color", "black");
        $(".log").css("color", "#c0c0c0");
        $(".reg span").show();
        $(".log span").hide();
    })

等同于用jQuery 对 上次小米官网的JS的代码转换

 四、用jQuery实现更改input表单的type

 

  //点击眼睛框属性变化
    var flag = true;
    $(".close").on("click", function () {
        if (flag) {
            //更改 眼睛图片
            $(this)[0].src = 'images/open.png';
            //将 input表单的 type 改为 文本
            $("#pass")[0].type = "text";
            flag = false;
        } else {
            $(this)[0].src = 'images/close.png';
            //将 表单的 type 改为 密码
            $("#pass")[0].type = 'password';
            flag = true;
        }
    })

 因为原生的 js 比 jQuery更大，原生的一些属性和方法 jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为 DOM对象才能使用。

jQuery 对象转换为 DOM对象（两种）

方法一： 
$('div')[index]  index是索引号

方法二：
$('div').get(index)  index是索引号

这里用的是方法一 ，因为 眼睛的闭和睁其实用的是两张图片，所以才有了上述更换图片的操作。

---

好啦，内容结束了，可能代码有点繁琐，因为博主也是刚学jQuery，还是一个小白，如果你有更简单的方法或思路，评论区留言哟~🙏