标签：jQuery 重构 hover 鼠标 function item1 nav 官网

前言 

     呀呀呀呀~今天我又来总结小米官网了，不是为上次的博客做补充，而是分享用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，还是一个小白，如果你有更简单的方法或思路，评论区留言哟~

标签：jQuery,重构,hover,鼠标,function,item1,nav,官网
来源： https://blog.csdn.net/m0_53620413/article/details/120766602

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。