又来了,稳稳的来到了jQuery的第三课。。。今天任务比较难啊,自己需要写个失去焦点时,为空报错的表单验证。
其实简单想想,很好做
我们经常在那些输入账号密码的界面就有这判断验证,好的,收拾心情,开始学习!!!
今天复习的内容:
1:函数写法
2:显示与隐藏
3:焦点事件
4:if判断
复习完上节课,继续学习新知识:
1.布尔值(Booleans:是“真”True 或“假”False中的一个。动作脚本也会在适当时将值True和False转换为1和0。特性:只具备真假值:true和false真值为1;假值为0;)
还没实践过使用布尔值啊。。。。。。。
有点陌生
2.多级if语句(很好理解,多层if判断)
if(){}
if(){}
else{}
3.if函数的嵌套
if(){
if(){
}
}
4.如何取到input里的value值
name是后台工作人员用来识别input或者select、textarea的标志。
value是前台工作人员收集到用户的填写,发送给后台数据库
先分享这么多,下面的重要部分,那就不share了
5.html/text/val的作用及区别
7.遍历
通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。
8.如何使用jq,选择不同层级的dom
9.find()和children()作用
今天的作业:
1:有一个隐藏的div,用来在失去焦点时show()出,并提示错误信息;
2:充分利用失去焦点函数blur,想清楚是哪个元素会触发失焦事件;
3:show和hide的特效,要配合html使用;
4:失去焦点时要判断是否为空值,如果为空,则进行错误提示,如果不为空,则什么都不做并且错误提示信息不显示。
还是比较简单了,看效果:
jq代码如下:有不对或者可优化的地方可直接指出,哈哈
;$(function(){
// 输出隐藏divlog
var prompt = $('#prompt');
var mask = $('#mask'),
confirm = $('#confirm'),
div_2 = $('.div_2'),
submit = div_2.find('button'),
true1 = $('#true'),
mask = $('#mask');
false1 = $('#false');
console.log(prompt);
// 输入name=accountNumber的input的val值
var input = $("input[name='accountNumber']");
console.log(input.val());
// 失焦时的判断动作
input.blur(function(){
console.log(33);
if (input.val() == '') {
confirm.show();
mask.show();
}
else {
confirm.hide();
}
});
});
以上,console都是用来输出校验,主要是(if (input.val() == ''))
好了,今天到此为止。。。。。。谢谢老师,加油!
来源:CSDN
作者:规矩定方圆
链接:https://blog.csdn.net/Daniel_mai/article/details/78176669