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}$/;

• 注册表单验证提示内容
  xx不能为空!
  用户名只能是6到20位字母数字,还包含"_"
  密码只能是6到20位字母数字,还包含"_!@#$%^&*"字符
  br/>提示内容
  xx不能为空!
  用户名只能是6到20位字母数字,还包含"_"
  密码只能是6到20位字母数字,还包含"_!@#$%^&*"字符
  你输入的邮箱格式不正确
  1.判断输入是否为空,如果为空弹不能为空提示2.如果不为空,就用正则匹配输入是否符合规则

3.密码确认,只需要判断两个密码是否一样
4.只要点击文本输入框就隐藏提示
5.单选框的判断
js写法:单选框标签对象.checked == truejQuery写法:单选框标签对象.is(:checked) == true
6.定义bool变量用来记录输入是否正确,注意因为单选框默认就是勾选,所以用来判断它的变量默认值要能通过判断
当所有输入都没有问题之后才能提交数据