事件冒泡
定义：在一个对象上触发某类事件（比如单击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>');
var $div2 = $(
'<div>这是一个div元素</div>');
# 2.使用 追加函数（子级追加、同级追加）将节点变量追加到页面
# 移动或者插入标签的方法
# 子级 单个时：在对象的子级后追加 ；多个时：在每个对象的子级后追加；移动已有元素到对象后
1.append()和appendTo():在现存元素的内部，从后面放入元素
var $span = $(
'<span>这是一个span元素</span>');
$(
'div').append($span);
......
<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}$/;
