知识点预习
-
1、jQuery事件冒泡2、事件委托 3、元素节点操作 4、正则表达式及表单验证实例
01- submit事件
[AppleScript]
纯文本查看
复制代码
1
2
3
4
5
6
|
/
/
监听 提交的事件
$
(
"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] 纯文本查看 复制代码12
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. 判断 到头 和到尾
-
1、什么是正则表达式:
-
能让计算机读懂的字符串匹配规则。2、正则表达式的写法:
-
[AppleScript] 纯文本查看 复制代码12
var re
=
new
RegExp
(
'规则'
,
'可选参数'
)
;
var re
=
/
规则
/
参数;
- 规则中的字符
-
[AppleScript] 纯文本查看 复制代码0102030405060708091011121314151617
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] 纯文本查看 复制代码123456
? 出现零次或一次(最多出现一次)
"+"
出现一次或多次(至少出现一次)
"*"
出现零次或多次(任意次)
{
n
}
出现n次
{
n
,
m
}
出现n到m次
{
n
,
}
至少出现n次
- 、任意一个或者范围
-
[AppleScript] 纯文本查看 复制代码1
xxxxxxxxxx [abc
123
]
:
匹配‘abc
123
’中的任意一个字符[a
-
z
0
-9
]
:
匹配a到z或者
0
到
9
中的任意一个字符
- 限制开头结尾
- ^ 以紧挨的元素开头$ 以紧挨的元素结尾
- 修饰参数:
-
[AppleScript] 纯文本查看 复制代码12
g:
global
,全文搜索,默认搜索到第一个结果接停止
i: ingore
case
,忽略大小写,默认大小写敏感
- 8、常用函数
-
[AppleScript] 纯文本查看 复制代码01020304050607080910111213141516
1
、test
用法:正则.test
(
字符串
)
匹配成功,就返回真,否则就返回假
2
、replace
用法:字符串.replace
(
正则,新的字符串
)
匹配成功的字符去替换新的字符
正则默认规则
匹配成功就结束,不会继续匹配,区分大小写
var sTr
01
=
'abcdefedcbaCef';
var re
01
=
/
c
/
;
var re
02
=
/
c
/
g;
var re
03
=
/
c
/
gi;
var sTr
02
=
sTr
01.
replace
(
re
01
,
'
*
'
)
;
var sTr
03
=
sTr
01.
replace
(
re
02
,
'
*
'
)
;
var sTr
04
=
sTr
01.
replace
(
re
03
,
'
*
'
)
;
alert
(
sTr
02
)
;
/
/
弹出 ab
*
defedcbaCef
alert
(
sTr
03
)
;
/
/
弹出 ab
*
defed
*
baCef
alert
(
sTr
04
)
;
/
/
弹出 ab
*
defed
*
ba
*
ef
- 常用正则规则
-
[AppleScript] 纯文本查看 复制代码12345678
/
/
用户名验证:
(
数字字母或下划线
6
到
20
位
)
var reUser
=
/
^
\w
{
6
,
20
}
$
/
;
/
/
邮箱验证:
var reMail
=
/
^
[a
-
z
0
-9
][\w\.\
-
]
*
@[a
-
z
0
-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] 纯文本查看 复制代码123456
/
/
监听 提交的事件
$
(
"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] 纯文本查看 复制代码12
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. 判断 到头 和到尾
-
1、什么是正则表达式:
-
能让计算机读懂的字符串匹配规则。2、正则表达式的写法:
-
[AppleScript] 纯文本查看 复制代码12
var re
=
new
RegExp
(
'规则'
,
'可选参数'
)
;
var re
=
/
规则
/
参数;
- 规则中的字符
-
[AppleScript] 纯文本查看 复制代码0102030405060708091011121314151617
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] 纯文本查看 复制代码123456
? 出现零次或一次(最多出现一次)
"+"
出现一次或多次(至少出现一次)
"*"
出现零次或多次(任意次)
{
n
}
出现n次
{
n
,
m
}
出现n到m次
{
n
,
}
至少出现n次
- 、任意一个或者范围
-
[AppleScript] 纯文本查看 复制代码1
xxxxxxxxxx [abc
123
]
:
匹配‘abc
123
’中的任意一个字符[a
-
z
0
-9
]
:
匹配a到z或者
0
到
9
中的任意一个字符
- 限制开头结尾
- ^ 以紧挨的元素开头$ 以紧挨的元素结尾
- 修饰参数:
-
[AppleScript] 纯文本查看 复制代码12
g:
global
,全文搜索,默认搜索到第一个结果接停止
i: ingore
case
,忽略大小写,默认大小写敏感
- 8、常用函数
-
[AppleScript] 纯文本查看 复制代码01020304050607080910111213141516
1
、test
用法:正则.test
(
字符串
)
匹配成功,就返回真,否则就返回假
2
、replace
用法:字符串.replace
(
正则,新的字符串
)
匹配成功的字符去替换新的字符
正则默认规则
匹配成功就结束,不会继续匹配,区分大小写
var sTr
01
=
'abcdefedcbaCef';
var re
01
=
/
c
/
;
var re
02
=
/
c
/
g;
var re
03
=
/
c
/
gi;
var sTr
02
=
sTr
01.
replace
(
re
01
,
'
*
'
)
;
var sTr
03
=
sTr
01.
replace
(
re
02
,
'
*
'
)
;
var sTr
04
=
sTr
01.
replace
(
re
03
,
'
*
'
)
;
alert
(
sTr
02
)
;
/
/
弹出 ab
*
defedcbaCef
alert
(
sTr
03
)
;
/
/
弹出 ab
*
defed
*
baCef
alert
(
sTr
04
)
;
/
/
弹出 ab
*
defed
*
ba
*
ef
- 常用正则规则
-
[AppleScript] 纯文本查看 复制代码12345678
/
/
用户名验证:
(
数字字母或下划线
6
到
20
位
)
var reUser
=
/
^
\w
{
6
,
20
}
$
/
;
/
/
邮箱验证:
var reMail
=
/
^
[a
-
z
0
-9
][\w\.\
-
]
*
@[a
-
z
0
-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] 纯文本查看 复制代码123456
/
/
监听 提交的事件
$
(
"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] 纯文本查看 复制代码12
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. 判断 到头 和到尾
-
1、什么是正则表达式:
-
能让计算机读懂的字符串匹配规则。2、正则表达式的写法:
-
[AppleScript] 纯文本查看 复制代码12
var re
=
new
RegExp
(
'规则'
,
'可选参数'
)
;
var re
=
/
规则
/
参数;
- 规则中的字符
-
[AppleScript] 纯文本查看 复制代码0102030405060708091011121314151617
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] 纯文本查看 复制代码123456
? 出现零次或一次(最多出现一次)
"+"
出现一次或多次(至少出现一次)
"*"
出现零次或多次(任意次)
{
n
}
出现n次
{
n
,
m
}
出现n到m次
{
n
,
}
至少出现n次
- 、任意一个或者范围
-
[AppleScript] 纯文本查看 复制代码1
xxxxxxxxxx [abc
123
]
:
匹配‘abc
123
’中的任意一个字符[a
-
z
0
-9
]
:
匹配a到z或者
0
到
9
中的任意一个字符
- 限制开头结尾
- ^ 以紧挨的元素开头$ 以紧挨的元素结尾
- 修饰参数:
-
[AppleScript] 纯文本查看 复制代码12
g:
global
,全文搜索,默认搜索到第一个结果接停止
i: ingore
case
,忽略大小写,默认大小写敏感
- 8、常用函数
-
[AppleScript] 纯文本查看 复制代码01020304050607080910111213141516
1
、test
用法:正则.test
(
字符串
)
匹配成功,就返回真,否则就返回假
2
、replace
用法:字符串.replace
(
正则,新的字符串
)
匹配成功的字符去替换新的字符
正则默认规则
匹配成功就结束,不会继续匹配,区分大小写
var sTr
01
=
'abcdefedcbaCef';
var re
01
=
/
c
/
;
var re
02
=
/
c
/
g;
var re
03
=
/
c
/
gi;
var sTr
02
=
sTr
01.
replace
(
re
01
,
'
*
'
)
;
var sTr
03
=
sTr
01.
replace
(
re
02
,
'
*
'
)
;
var sTr
04
=
sTr
01.
replace
(
re
03
,
'
*
'
)
;
alert
(
sTr
02
)
;
/
/
弹出 ab
*
defedcbaCef
alert
(
sTr
03
)
;
/
/
弹出 ab
*
defed
*
baCef
alert
(
sTr
04
)
;
/
/
弹出 ab
*
defed
*
ba
*
ef
- 常用正则规则
-
[AppleScript] 纯文本查看 复制代码12345678
/
/
用户名验证:
(
数字字母或下划线
6
到
20
位
)
var reUser
=
/
^
\w
{
6
,
20
}
$
/
;
/
/
邮箱验证:
var reMail
=
/
^
[a
-
z
0
-9
][\w\.\
-
]
*
@[a
-
z
0
-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变量用来记录输入是否正确,注意因为单选框默认就是勾选,所以用来判断它的变量默认值要能通过判断
- 当所有输入都没有问题之后才能提交数据
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-