目录
前言
学习完全部的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实现这个改变的效果。
我这里之所以不改动,是因为我已经用好了这个方法,所以就没有去更改它的方法了(其实是懒)
后话
jQuery还有很多方法有待开发,也许我们再继续研究,还能有更好的简化方法。我的方法有不妥的地方也希望来指正我。感谢大家的观看