扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
知识点预习
1、jQuery事件冒泡2、事件委托 3、元素节点操作 4、正则表达式及表单验证实例
创新互联建站专业成都网站建设、网站建设,集网站策划、网站设计、网站制作于一体,网站seo、网站优化、网站营销、软文推广等专业人才根据搜索规律编程设计,让网站在运行后,在搜索中有好的表现,专业设计制作为您带来效益的网站!让网站建设为您创造效益。
01- submit事件
//监听 提交的事件
$("form").submit(function (abc) {
//阻止系统的默认行为
// abc.preventDefault();
return false;
})
04- 弹框案例
点击按钮显示,但要注意阻止它的冒泡点击document对象隐藏
点击提示框时不隐藏提示框,阻止冒泡
点击关闭按钮时隐藏提示框,单独实现,因为父级阻止冒泡了
05- 事件冒泡小结
只有在父子都要处理相同事件时才去考虑事件冒泡问题,一般情况不用关心它!优点
如果父子有相同事件,而且相同事件的功能都一样 时,可以只用给父级添加事件,减少添加绑定事件次数,减少代码量,提升性能效率
弊端:
如果父子有相同事件,但相同事件的功能不一样 时,就要阻止冒泡
06- 事件委托
事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
事件委托的优点:
1.减少事件绑定次数,减少代码量
2.后面新添加的子元素也可以正常执行事件
07- 节点操作
创建节点
var $div = $('
$('#div1').remove();
TODOList案例
1.获取元素2.判断是否为空 3.将新增的内容 添加到列表 4.删除 上移动 下移动 5. 判断 到头 和到尾
09- 正则复习
1、什么是正则表达式:
能让计算机读懂的字符串匹配规则。
2、正则表达式的写法:
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;
规则中的字符
1)普通字符匹配: 如:/a/ 匹配字符 ‘a’,/a,b/ 匹配字符 ‘a,b’
2)转义字符匹配:
\d 匹配一个数字,即0-9
\D 匹配一个非数字,即除了0-9
\w 匹配一个单词字符(字母、数字、下划线)
\W 匹配任何非单词字符。等价于A-Za-z0-9_
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
.匹配一个任意字符
var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false
4、量词:对左边的匹配字符定义个数
? 出现零次或一次(最多出现一次)
"+" 出现一次或多次(至少出现一次)
"*" 出现零次或多次(任意次)
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次
、任意一个或者范围
xxxxxxxxxx [abc123] : 匹配‘abc123’中的任意一个字符[a-z0-9] : 匹配a到z或者0到9中的任意一个字符
限制开头结尾
^ 以紧挨的元素开头$ 以紧挨的元素结尾
修饰参数:
g: global,全文搜索,默认搜索到第一个结果接停止
i: ingore case,忽略大小写,默认大小写敏感
8、常用函数
1、test
用法:正则.test(字符串) 匹配成功,就返回真,否则就返回假
2、replace
用法:字符串.replace(正则,新的字符串) 匹配成功的字符去替换新的字符
正则默认规则
匹配成功就结束,不会继续匹配,区分大小写
var sTr01 = 'abcdefedcbaCef';
var re01 = /c/;
var re02 = /c/g;
var re03 = /c/gi;
var sTr02 = sTr01.replace(re01,'*');
var sTr03 = sTr01.replace(re02,'*');
var sTr04 = sTr01.replace(re03,'*');
alert(sTr02); // 弹出 ab*defedcbaCef
alert(sTr03); // 弹出 ab*defed*baCef
alert(sTr04); // 弹出 ab*defed*ba*ef
常用正则规则
//用户名验证:(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;
//邮箱验证:
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
//密码验证:
var rePass = /^[\w!@#$%^&*]{6,20}$/;
//手机号码验证:
var rePhone = /^1[34578]\d{9}$/;
3.密码确认,只需要判断两个密码是否一样
4.只要点击文本输入框就隐藏提示
5.单选框的判断
js写法:单选框标签对象.checked == truejQuery写法:单选框标签对象.is(:checked) == true
6.定义bool变量用来记录输入是否正确,注意因为单选框默认就是勾选,所以用来判断它的变量默认值要能通过判断
当所有输入都没有问题之后才能提交数据
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流