python前端jQuery高级

知识点预习
1、jQuery事件冒泡2、事件委托 3、元素节点操作 4、正则表达式及表单验证实例

01- submit事件

//监听 提交的事件
$("form").submit(function (abc) {
    //阻止系统的默认行为
   // abc.preventDefault();
    return false;
})
  • 事件冒泡的原理在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事
    件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的
    父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最
    顶层,即document对象(有些浏览器是window)。
    事件冒泡验证
    事件的传递: 子 --> 父-->祖父-->window
    冒泡: 父元素 有同样的事件
    事件冒泡机制有时候是不需要的,需要阻止掉
    通过 event.stopPropagation() 来阻止
    合并写法:return false; 可以阻止冒泡也可以阻止事件的默认行为

04- 弹框案例
点击按钮显示,但要注意阻止它的冒泡点击document对象隐藏
点击提示框时不隐藏提示框,阻止冒泡
点击关闭按钮时隐藏提示框,单独实现,因为父级阻止冒泡了

05- 事件冒泡小结
只有在父子都要处理相同事件时才去考虑事件冒泡问题,一般情况不用关心它!优点
如果父子有相同事件,而且相同事件的功能都一样 时,可以只用给父级添加事件,减少添加绑定事件次数,减少代码量,提升性能效率

弊端:
如果父子有相同事件,但相同事件的功能不一样 时,就要阻止冒泡

06- 事件委托
事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
事件委托的优点:
1.减少事件绑定次数,减少代码量
2.后面新添加的子元素也可以正常执行事件

07- 节点操作
创建节点

var $div = $('<div>'); // 空节点/空标签
var $div2 = $('<div>这是一个div元素</div>');
插入节点
1、在现存元素的内部,从后面插入元素
现存元素.append('插入的元素')插入的元素.appendTo('现存元素')2、在现存元素的内部,从前面插入元素 现存元素.prepend('插入的元素') 插入的元素.prependTo('现存元素')3、在现存元素的外部,从后面插入元素 现存元素.after('插入的元素') 插入的元素.insertAfter('现存元素')4、在现存元素的外部,从前面插入元素 现存元素.before('插入的元素') 插入的元素.insertBefore('现存元素')删除节点

$('#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变量用来记录输入是否正确,注意因为单选框默认就是勾选,所以用来判断它的变量默认值要能通过判断
当所有输入都没有问题之后才能提交数据

没有更多推荐了,返回首页