前言

学习完全部的jQuery内容之后，用更加便捷简单的jQuery，我实现了更加简单方便的效果。在小米官网里面大量的代码，也被缩减成为几行简单的代码就能解决的内容。这里立我写的代码给大家观察，可以看看我的方法，更加改善自己的jQuery代码。

一、主页

头部导航栏

头部导航栏，也就是选中对应选项，就可以打开对应的内容栏观看，这个内容其实非常的简单。但是实现的时候需要好好规划一下自己要怎么用jQuery实现，说不定你可以写出比我更好的方法。

首先，我们要理解一下jQuery特有的东西：隐式迭代。因为存在隐式迭代的方式，让我们选中的元素，已经在程序里面自动被遍历过一遍了，那么当我们去选择ul里面的li的时候，就会直接全部遍历一遍；然后我们就需要想起，当我们要选择其他的盒子的时候，需要去用序号锁定它的位置，因为都是按一定的循序排列的，我们只需要通过之前生成的序号，放给jQuery让他帮我们选择正确的盒子，那么我们的盒子就可以别选取到了。这就是jQuery遍历带来的便捷性。

说了这么多，我们来看看代码的演示吧：

    // 头部导航栏下拉菜单$(".nav-list .nav_item").on("mouseenter", function() {// 设置序列号var index = $(this).index();// 选中的时候打开下拉菜单$(".header_nav_list").stop().addClass("shadow");// 打开对应序号的菜单，同时隐藏兄弟菜单$(".nav_list_item").stop().eq(index).show().siblings().hide();// 这里是防止选中navlist中没有菜单的选项的时候，下拉菜单不消失的问题$(this).siblings(".nav_item1").on("mouseenter", function() {$(".header_nav_list").stop().removeClass("shadow");});});$(".header_nav_list").on("mouseleave", function() {// 只有离开下拉菜单才会收回去$(".header_nav_list").stop().removeClass("shadow");});

我们可以看到，只需要用index的方法，我们存储了每一个序号的变量，通过eq去选取当前的盒子显示，而它的兄弟结点全部隐藏，我们就实现了这个切换的效果。

二、登录页面

变量和代码简化

我们知道，原生js是需要通过变量将获取的元素存储起来，然后在使用的。而jQuery不需要，直接选取元素放进函数中，是可以生效的，这样节省了很多代码量。其次，可以将需要多次书写的代码放在一条里面写，只要他是同一个对象，同时增加也好，删除也好都是可以一起写的。

我们可以看看代码的演示来理解这个过程：

$(this).on("keyup", function() {if (this.value == '') {$(".user .T_change").stop().addClass("C_change");$(".user .mi-form-field__field").stop().addClass("flaseC").stop().removeClass("trueC");flag0 = 0;// 错误提示if (num == 0) {Error($(".user"), '请输入账号');num = 1;}} else {$(".user .I_change").html(this.value);$(".user .T_change").stop().removeClass("C_change");$(".user .mi-form-field__field").stop().removeClass("flaseC").stop().addClass("trueC");flag0 = 1;// 错误提示if (num == 1) {$(".user .error").stop().remove();num = 0;}}});

这是我进行错误判断的代码，这里我们看到Error函数里面，放入不是变量而是元素本身，也是可以正常执行效果的，因为我们选取的对象就是元素本身，而用jQuery可以让这个过程简化。而且当我们需要对同一个对象进行操作的时候，也不需要重复的进行代码的复写，而是整合到一条里面去解决，简化了代码，而且变得更好去整理结构。

错误信息的简化

function Error(parent, content) {$(parent).append($("<div class='error'>" + content + "</div>"));};

我书写的错误信息函数，之前有三行代码，虽然不是非常长的代码，但是通过jQuery整合一条之后，你可以很快的理解它在做什么，可以更加快捷的知道变量的作用是什么。但是这里需要注意的地方是，原生JS是原生JS，jQuery是jQuery，语法是有区别的，不可以套用。

注册界面

跳转链接

    // 有关于跳转链接的模块var temp = window.location.search.substr(1);// 移动滑块// 进入时执行跳转函数Temp();// 点击名称时进行跳转$(".list_item .item").eq(1).on("click", function() {$(".register1").addClass("offreg");$(".register0").removeClass("offreg");$(".list_item .item").eq(0).children("a").addClass("change");$(".list_item .item").eq(1).children("a").removeClass("change");animate(select, itemW);});$(".list_item .item").eq(0).on("click", function() {$(".register1").removeClass("offreg");$(".register0").addClass("offreg");$(".list_item .item").eq(0).children("a").removeClass("change");$(".list_item .item").eq(1).children("a").addClass("change");animate(select, 0);});// 根据链接跳转函数function Temp() {if (temp === '2') {$(".register1").addClass("offreg");$(".register0").removeClass("offreg");$(".list_item .item").eq(0).children("a").addClass("change");$(".list_item .item").eq(1).children("a").removeClass("change");$(".select").css("left", "68px");}}

虽然我们可以经可能的简化代码，但是我目前学到的jQuery里面没有包含location的跳转链接方法，因此这块内容没有用到jQuery。同时移动滑块的内容，我是用了之前书写的animate的js代码，但是我暂时没有对animate的文件进行修改。我们可以选择去改变一下animate的代码，调整它的内容。这里我给大家一个提示：你可以是用jQuery中自带的animate方法，控制滑块的position实现这个改变的效果。

我这里之所以不改动，是因为我已经用好了这个方法，所以就没有去更改它的方法了~~（其实是懒）~~