python前端jQuery高级

jQuery进阶与正则表达式实战

最新推荐文章于 2025-04-30 12:47:14 发布

原创最新推荐文章于 2025-04-30 12:47:14 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨jQuery的高级应用，包括事件冒泡、事件委托、元素节点操作等核心概念，并通过实例讲解正则表达式在表单验证中的运用。掌握这些技巧将显著提升网页交互体验。

知识点预习

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

01- submit事件

[AppleScript] 纯文本查看 复制代码

/ / 监听提交的事件

$ ( "form" ) .submit ( function ( abc ) {

/ / 阻止系统的默认行为

/ / abc.preventDefault ( ) ;

return false ;

} )

- 事件冒泡的原理在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事
件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的
父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最
顶层，即document对象（有些浏览器是window）。
事件冒泡验证

事件的传递: 子 --> 父-->祖父-->window
冒泡: 父元素有同样的事件
事件冒泡机制有时候是不需要的，需要阻止掉
- 通过 event.stopPropagation() 来阻止
- 合并写法：return false; 可以阻止冒泡也可以阻止事件的默认行为

04- 弹框案例

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

05- 事件冒泡小结

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

06- 事件委托

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

07- 节点操作

创建节点

[AppleScript] 纯文本查看 复制代码

1 2	`var $` `div` `=` `$` `(` `'` `<` `div` `>` `'` `)` `;` `/` `/` `空节点` `/` `空标签` `var $div` `2` `=` `$` `(` `'` `<` `div` `>` `这是一个` `div` `元素` `<` `/` `div` `>` `'` `)` `;`

插入节点

1、在现存元素的内部，从后面插入元素

现存元素.append('插入的元素')插入的元素.appendTo('现存元素')2、在现存元素的内部，从前面插入元素现存元素.prepend('插入的元素') 插入的元素.prependTo('现存元素')3、在现存元素的外部，从后面插入元素现存元素.after('插入的元素') 插入的元素.insertAfter('现存元素')4、在现存元素的外部，从前面插入元素现存元素.before('插入的元素') 插入的元素.insertBefore('现存元素')删除节点
[AppleScript] 纯文本查看 复制代码

?

1

$ ( ' #div1').remove();

TODOList案例

1.获取元素2.判断是否为空 3.将新增的内容添加到列表 4.删除上移动下移动 5. 判断到头和到尾

09- 正则复习

1、什么是正则表达式：

能让计算机读懂的字符串匹配规则。

2、正则表达式的写法：

[AppleScript] 纯文本查看 复制代码

1 2	`var re` `=` `new` `RegExp` `(` `'规则'` `,` `'可选参数'` `)` `;` `var re` `=` `/` `规则` `/` `参数;`

规则中的字符

[AppleScript] 纯文本查看 复制代码

1 ）普通字符匹配：如： / a / 匹配字符 ‘a’， / a , b / 匹配字符 ‘a , b’

2 ）转义字符匹配：

\d 匹配一个数字，即 0 -9

\D 匹配一个非数字，即除了 0 -9

\w 匹配一个单词字符（字母、数字、下划线）

\W 匹配任何非单词字符。等价于A - Za - z 0 -9 _

\s 匹配一个空白符

\S 匹配一个非空白符

\b 匹配单词边界

\B 匹配非单词边界

.匹配一个任意字符

var sTr 01 = ' 123456 asdf';

var re 01 = / \d + / ;

/ / 匹配纯数字字符串

var re 02 = / ^ \d + $ / ;

alert ( re 01. test ( sTr 01 ) ) ; / / 弹出 true

alert ( re 02. test ( sTr 01 ) ) ; / / 弹出 false

4、量词：对左边的匹配字符定义个数

[AppleScript] 纯文本查看 复制代码

? 出现零次或一次（最多出现一次）

"+" 出现一次或多次（至少出现一次）

"*" 出现零次或多次（任意次）

{ n } 出现n次

{ n , m } 出现n到m次

{ n , } 至少出现n次

、任意一个或者范围

[AppleScript] 纯文本查看 复制代码

1	`xxxxxxxxxx [abc` `123` `]` `:` `匹配‘abc` `123` `’中的任意一个字符[a` `-` `z` `0` `-9` `]` `:` `匹配a到z或者` `0` `到` `9` `中的任意一个字符`

限制开头结尾
^ 以紧挨的元素开头$ 以紧挨的元素结尾
修饰参数：

[AppleScript] 纯文本查看 复制代码

1 2	`g：` `global，全文搜索，默认搜索到第一个结果接停止` `i： ingore` `case，忽略大小写，默认大小写敏感`

8、常用函数

[AppleScript] 纯文本查看 复制代码

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

常用正则规则

[AppleScript] 纯文本查看 复制代码

//用户名验证：(数字字母或下划线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位字母数字,还包含"_!@#$%^&*"字符
- 两次输入的密码不一致!
- 你输入的邮箱格式不正确
  
  1.判断输入是否为空,如果为空弹不能为空提示2.如果不为空,就用正则匹配输入是否符合规则
3.密码确认,只需要判断两个密码是否一样
4.只要点击文本输入框就隐藏提示
5.单选框的判断
js写法:单选框标签对象.checked == truejQuery写法:单选框标签对象.is(:checked) == true
6.定义bool变量用来记录输入是否正确,注意因为单选框默认就是勾选,所以用来判断它的变量默认值要能通过判断
当所有输入都没有问题之后才能提交数据知识点预习
1、jQuery事件冒泡2、事件委托 3、元素节点操作 4、正则表达式及表单验证实例

01- submit事件

[AppleScript] 纯文本查看 复制代码

/ / 监听提交的事件

$ ( "form" ) .submit ( function ( abc ) {

/ / 阻止系统的默认行为

/ / abc.preventDefault ( ) ;

return false ;

} )

事件的传递: 子 --> 父-->祖父-->window
冒泡: 父元素有同样的事件
事件冒泡机制有时候是不需要的，需要阻止掉
- 通过 event.stopPropagation() 来阻止
- 合并写法：return false; 可以阻止冒泡也可以阻止事件的默认行为
04- 弹框案例
点击按钮显示,但要注意阻止它的冒泡点击document对象隐藏
点击提示框时不隐藏提示框,阻止冒泡
点击关闭按钮时隐藏提示框,单独实现,因为父级阻止冒泡了
05- 事件冒泡小结
只有在父子都要处理相同事件时才去考虑事件冒泡问题,一般情况不用关心它!优点
- 如果父子有相同事件,而且相同事件的功能都一样时,可以只用给父级添加事件,减少添加绑定事件次数,减少代码量,提升性能效率
弊端:
- 如果父子有相同事件,但相同事件的功能 不一样 时,就要阻止冒泡
06- 事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
事件委托的优点:
- 1.减少事件绑定次数,减少代码量
- 2.后面新添加的子元素也可以正常执行事件
07- 节点操作
创建节点

[AppleScript] 纯文本查看 复制代码

1 2	`var $` `div` `=` `$` `(` `'` `<` `div` `>` `'` `)` `;` `/` `/` `空节点` `/` `空标签` `var $div` `2` `=` `$` `(` `'` `<` `div` `>` `这是一个` `div` `元素` `<` `/` `div` `>` `'` `)` `;`

插入节点

1、在现存元素的内部，从后面插入元素

现存元素.append('插入的元素')插入的元素.appendTo('现存元素')2、在现存元素的内部，从前面插入元素现存元素.prepend('插入的元素') 插入的元素.prependTo('现存元素')3、在现存元素的外部，从后面插入元素现存元素.after('插入的元素') 插入的元素.insertAfter('现存元素')4、在现存元素的外部，从前面插入元素现存元素.before('插入的元素') 插入的元素.insertBefore('现存元素')删除节点

[AppleScript] 纯文本查看 复制代码

1	`$` `(` `'` `#div1').remove();`

TODOList案例

1.获取元素2.判断是否为空 3.将新增的内容添加到列表 4.删除上移动下移动 5. 判断到头和到尾

09- 正则复习

1、什么是正则表达式：

能让计算机读懂的字符串匹配规则。

2、正则表达式的写法：

[AppleScript] 纯文本查看 复制代码

1 2	`var re` `=` `new` `RegExp` `(` `'规则'` `,` `'可选参数'` `)` `;` `var re` `=` `/` `规则` `/` `参数;`

规则中的字符

[AppleScript] 纯文本查看 复制代码

1 ）普通字符匹配：如： / a / 匹配字符 ‘a’， / a , b / 匹配字符 ‘a , b’

2 ）转义字符匹配：

\d 匹配一个数字，即 0 -9

\D 匹配一个非数字，即除了 0 -9

\w 匹配一个单词字符（字母、数字、下划线）

\W 匹配任何非单词字符。等价于A - Za - z 0 -9 _

\s 匹配一个空白符

\S 匹配一个非空白符

\b 匹配单词边界

\B 匹配非单词边界

.匹配一个任意字符

var sTr 01 = ' 123456 asdf';

var re 01 = / \d + / ;

/ / 匹配纯数字字符串

var re 02 = / ^ \d + $ / ;

alert ( re 01. test ( sTr 01 ) ) ; / / 弹出 true

alert ( re 02. test ( sTr 01 ) ) ; / / 弹出 false

4、量词：对左边的匹配字符定义个数

[AppleScript] 纯文本查看 复制代码

? 出现零次或一次（最多出现一次）

"+" 出现一次或多次（至少出现一次）

"*" 出现零次或多次（任意次）

{ n } 出现n次

{ n , m } 出现n到m次

{ n , } 至少出现n次

、任意一个或者范围

[AppleScript] 纯文本查看 复制代码

1	`xxxxxxxxxx [abc` `123` `]` `:` `匹配‘abc` `123` `’中的任意一个字符[a` `-` `z` `0` `-9` `]` `:` `匹配a到z或者` `0` `到` `9` `中的任意一个字符`

限制开头结尾
^ 以紧挨的元素开头$ 以紧挨的元素结尾
修饰参数：

[AppleScript] 纯文本查看 复制代码

1 2	`g：` `global，全文搜索，默认搜索到第一个结果接停止` `i： ingore` `case，忽略大小写，默认大小写敏感`

8、常用函数

[AppleScript] 纯文本查看 复制代码

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

常用正则规则

[AppleScript] 纯文本查看 复制代码

//用户名验证：(数字字母或下划线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位字母数字,还包含"_!@#$%^&*"字符
- 两次输入的密码不一致!
- 你输入的邮箱格式不正确
  
  1.判断输入是否为空,如果为空弹不能为空提示2.如果不为空,就用正则匹配输入是否符合规则
3.密码确认,只需要判断两个密码是否一样
4.只要点击文本输入框就隐藏提示
5.单选框的判断
js写法:单选框标签对象.checked == truejQuery写法:单选框标签对象.is(:checked) == true
6.定义bool变量用来记录输入是否正确,注意因为单选框默认就是勾选,所以用来判断它的变量默认值要能通过判断
当所有输入都没有问题之后才能提交数据知识点预习
1、jQuery事件冒泡2、事件委托 3、元素节点操作 4、正则表达式及表单验证实例

01- submit事件

[AppleScript] 纯文本查看 复制代码

/ / 监听提交的事件

$ ( "form" ) .submit ( function ( abc ) {

/ / 阻止系统的默认行为

/ / abc.preventDefault ( ) ;

return false ;

} )

事件的传递: 子 --> 父-->祖父-->window
冒泡: 父元素有同样的事件
事件冒泡机制有时候是不需要的，需要阻止掉
- 通过 event.stopPropagation() 来阻止
- 合并写法：return false; 可以阻止冒泡也可以阻止事件的默认行为
04- 弹框案例
点击按钮显示,但要注意阻止它的冒泡点击document对象隐藏
点击提示框时不隐藏提示框,阻止冒泡
点击关闭按钮时隐藏提示框,单独实现,因为父级阻止冒泡了
05- 事件冒泡小结
只有在父子都要处理相同事件时才去考虑事件冒泡问题,一般情况不用关心它!优点
- 如果父子有相同事件,而且相同事件的功能都一样时,可以只用给父级添加事件,减少添加绑定事件次数,减少代码量,提升性能效率
弊端:
- 如果父子有相同事件,但相同事件的功能 不一样 时,就要阻止冒泡
06- 事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
事件委托的优点:
- 1.减少事件绑定次数,减少代码量
- 2.后面新添加的子元素也可以正常执行事件
07- 节点操作
创建节点

[AppleScript] 纯文本查看 复制代码

1 2	`var $` `div` `=` `$` `(` `'` `<` `div` `>` `'` `)` `;` `/` `/` `空节点` `/` `空标签` `var $div` `2` `=` `$` `(` `'` `<` `div` `>` `这是一个` `div` `元素` `<` `/` `div` `>` `'` `)` `;`

插入节点

1、在现存元素的内部，从后面插入元素

现存元素.append('插入的元素')插入的元素.appendTo('现存元素')2、在现存元素的内部，从前面插入元素现存元素.prepend('插入的元素') 插入的元素.prependTo('现存元素')3、在现存元素的外部，从后面插入元素现存元素.after('插入的元素') 插入的元素.insertAfter('现存元素')4、在现存元素的外部，从前面插入元素现存元素.before('插入的元素') 插入的元素.insertBefore('现存元素')删除节点

[AppleScript] 纯文本查看 复制代码

1	`$` `(` `'` `#div1').remove();`

TODOList案例

1.获取元素2.判断是否为空 3.将新增的内容添加到列表 4.删除上移动下移动 5. 判断到头和到尾

09- 正则复习

1、什么是正则表达式：

能让计算机读懂的字符串匹配规则。

2、正则表达式的写法：

[AppleScript] 纯文本查看 复制代码

1 2	`var re` `=` `new` `RegExp` `(` `'规则'` `,` `'可选参数'` `)` `;` `var re` `=` `/` `规则` `/` `参数;`

规则中的字符

[AppleScript] 纯文本查看 复制代码

1 ）普通字符匹配：如： / a / 匹配字符 ‘a’， / a , b / 匹配字符 ‘a , b’

2 ）转义字符匹配：

\d 匹配一个数字，即 0 -9

\D 匹配一个非数字，即除了 0 -9

\w 匹配一个单词字符（字母、数字、下划线）

\W 匹配任何非单词字符。等价于A - Za - z 0 -9 _

\s 匹配一个空白符

\S 匹配一个非空白符

\b 匹配单词边界

\B 匹配非单词边界

.匹配一个任意字符

var sTr 01 = ' 123456 asdf';

var re 01 = / \d + / ;

/ / 匹配纯数字字符串

var re 02 = / ^ \d + $ / ;

alert ( re 01. test ( sTr 01 ) ) ; / / 弹出 true

alert ( re 02. test ( sTr 01 ) ) ; / / 弹出 false

4、量词：对左边的匹配字符定义个数

[AppleScript] 纯文本查看 复制代码

? 出现零次或一次（最多出现一次）

"+" 出现一次或多次（至少出现一次）

"*" 出现零次或多次（任意次）

{ n } 出现n次

{ n , m } 出现n到m次

{ n , } 至少出现n次

、任意一个或者范围

[AppleScript] 纯文本查看 复制代码

1	`xxxxxxxxxx [abc` `123` `]` `:` `匹配‘abc` `123` `’中的任意一个字符[a` `-` `z` `0` `-9` `]` `:` `匹配a到z或者` `0` `到` `9` `中的任意一个字符`

限制开头结尾
^ 以紧挨的元素开头$ 以紧挨的元素结尾
修饰参数：

[AppleScript] 纯文本查看 复制代码

1 2	`g：` `global，全文搜索，默认搜索到第一个结果接停止` `i： ingore` `case，忽略大小写，默认大小写敏感`

8、常用函数

[AppleScript] 纯文本查看 复制代码

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

常用正则规则

[AppleScript] 纯文本查看 复制代码

//用户名验证：(数字字母或下划线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位字母数字,还包含"_!@#$%^&*"字符
  - 两次输入的密码不一致!
  - 你输入的邮箱格式不正确
    
    1.判断输入是否为空,如果为空弹不能为空提示2.如果不为空,就用正则匹配输入是否符合规则
- 3.密码确认,只需要判断两个密码是否一样
- 4.只要点击文本输入框就隐藏提示
- 5.单选框的判断
- js写法:单选框标签对象.checked == truejQuery写法:单选框标签对象.is(:checked) == true
- 6.定义bool变量用来记录输入是否正确,注意因为单选框默认就是勾选,所以用来判断它的变量默认值要能通过判断
- 当所有输入都没有问题之后才能提交数据