JQuery高级

事件冒泡

• 定义：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
• 作用：冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
• 阻止：冒泡机制有时候是不需要的，需要阻止掉，通过 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();
    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})
......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>
# 阻止默认行为
# 阻止表单提交

$('#form1').submit(function(event){
    event.preventDefault();
})
# 合并阻止操作 
# 实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用
// event.stopPropagation();
// event.preventDefault();

// 合并写法：
return false;

事件委托

• 委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作.

# 一般事件绑定写法
$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
# 事件委托写法
$(function(){
    $list = $('#list');
              //(真实事件源，事件类型，匿名函数)
        //作用：1.提高代码执行效率 2.给未来元素绑定命令（通过程序添加到页面的标签就是未来元素）
        //拓展: 工作中给未来元素绑定事件--on
        //$('li').on(事件类型，匿名函数)
    $list.delegate('li', 'click', function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

jquery元素节点操作

• 指改变html的标签结构（节点：标签、内容、属性）

# 两种情况
1.移动现有标签的位置
2.将新创建的标签插入到现有的标签中

# 追加节点的步骤
# 创建新标签
# 1.声明变量保存想要追加的节点数据
var $div = $('<div>'); //创建一个空的div
var $div2 = $('<div>这是一个div元素</div>');
# 2.使用 追加函数（子级追加、同级追加）将节点变量追加到页面
# 移动或者插入标签的方法

# 子级 单个时：在对象的子级后追加 ；多个时：在每个对象的子级后追加；移动已有元素到对象后
1.append()和appendTo():在现存元素的内部，从后面放入元素
var $span = $('<span>这是一个span元素</span>');
$('div').append($span);
// 或 $span.appendTo($('div'));
......
<div id="div1"></div>
# 子级 单个时：在对象的子级前追加 ；多个时：在每个对象的子级前追加；移动已有元素到对象前
2.prepend()和prependTo()：在现存元素的内部，从前面放入元素
# 同级 单个时：在对象后追加 ；多个时：在每个对象后追加；移动已有元素到对象后
3.after()和insertAfter()：在现存元素的外部，从后面放入元素
# 同级 单个时：在对象前追加 ；多个时：在每个对象前追加；移动已有元素到对象前
4.before()和insertBefore()：在现存元素的外部，从前面放入元素

# 删除标签
$('#div1').remove();
# 清空节点
empty();
# a的href取值javascript:;(等价于javascript:void(0)) 表示的含义是不做任何的跳转，具体功能看js如何绑定命令

表单验证

• 正则：能让计算机读懂的字符串匹配规则

# 写法
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;

# 规则中的字符
1.普通字符匹配
2.转义字符匹配
3.量词：对左边的匹配字符定义个数
4.任意一个或者范围
5.限制开头结尾
# 修饰参数
- 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}$/;