jQuery总结(三)
2018-10-23 12:54 flyPENG 阅读(119) 评论(0) 编辑 收藏 举报
1、事件冒泡
什么是事件冒泡
在一个对象上触发某类事件,如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直到它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层。
事件冒泡的作用
事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件
阻止事件冒泡
事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
阻止表单提交
$(function(event){
event.preventDefault();
})
合并阻止操作
// event.stopPropagation();
// event.preventDefault();
// 合并写法:
return false; 阻止冒泡事件
2、事件委托
事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
事件委托的写法
$(function(){
$list = $('#list');
$list.delegate('li', 'click', function() {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
</ul>
语法:
// 参数1:要代理的那个儿子
// 参数2:事件
// 参数3:回调函数
$('.list').delegate('li','click',function () {
// 在事件委托中 this表示 触发事件的子级
$(this).css({'color':'red'});
})
this的总结
1、$(‘.list’).delegate(‘li’,’click’,function(){
在事件委托中this表示触发事件的子级(代理中的this比较特殊,指当前触发事件的儿子)
$(this),css({‘color’:’red’});
})
1、$oDiv.click(funnction(){this})() this:当前函数click所属的对象$oDiv
2、全局函数:全局函数是属于window对象
function abc(){
this:(当前函数abc所属的对象window)
}
abc();
Window.abc();
3、节点操作
1. 新建节点
var $div2 = $('<p>我是新创建的</p>');
$('标签字符串'): 创建节点/标签对象
2. 节点添加
// 1..在box内部添加 (添加子节点)
// 1在box里面的最后添加一个标签
// $box.append($div2); // 追加
// 2在box里面的最前添加一个标签
// $box.prepend($div2);
// 2.外部添加 (添加兄弟节点)
// 在box的外部的前面添加一个标签
// $box.before($div2);
// 在box的外部的后面添加一个标签
// $box.after($div2);
3. 节点删除
// remove()删除节点 删除标签
// $div2.remove();
4、正则表达式的写法
var re=new RegExp('规则', '可选参数');
var re=/规则/参数
修饰参数
g: global,全文搜索,默认搜索到第一个结果接停止
i: ingore case,忽略大小写,默认大小写敏感
函数test 用法:正则.test(字符串) 匹配成功,就返回真,否则就返回假
常用正则规则
用户名验证:(数字字母或下划线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}$/;
单选框/复选框的判断
js写法:单选框标签对象.checked == true
jQuery写法:单选框标签对象.is(:checked) == true