1、梳理知识点
1、浏览器默认行为阻止
e.preventDefault() e.returnValue=false return false
2、事件委托
事件源获取 :
oUl.onclick = function(){
e.target || e.srcElement
可以根据标签名 或 属性 或 class名 判断事件源
}
3、json对象
定义json
json数据读取
4、拖拽
onmousedown 获取偏移量
onmousemove 设置移动元素的left和top
onmouseup 取消move和up
2、scroll家族属性
scrollTop 获取页面垂直方向滚走的距离(操作的是垂直滚动条)
scrollLeft 获取页面水平方向滚走的距离 (操作的是水平的滚动条)
需要通过滚动条事件得到scrollTop值
window.onscroll = function(){
获取页面滚走距离的兼容
document.documentElement.scrollTop || document.body.scrollTop
}
可以获取值,也可以设置值:
document.documentElement.scrollTop = 数值
3、offset家族属性
offsetWidth / offsetHeight
获取的值包括 实际宽度 + padding + border
获取的值类型是number
只能获取值 不能设置值
获取的值可以是非行内元素样式值
与clientWidth / clientHeight 的区别
client 获取的值包括 实际宽度 + padding
传统的 obj.style.width 获取值:
只能获取行内元素的样式值
得到的值是一个字符串
得到的值为实际内容的宽度 没有padding和border
既可以获取 也可以设置
offsetLeft/offsetTop 获取距离上一级中具有定位的元素的左偏移或上偏移 如果该元素的上一级没有定位,获取的值相对于body
这里的上一级 可以是父元素 也可以是爷爷元素,或曾爷爷等
4、正则表达式
正则定义 : 正确的规则
作用 : 多用于表单提交时的验证
正则表达式定义 :
reg = /规则/;
正则表达式的组成 :
普通字符 和 具有特定含义的特殊字符组成
正则中的字符
单字符 :
^ : 开始
$ : 结束
| : 表示 或者 一般与 ( ) 连用
* : 等价于 {0,} 表示 其前面紧挨着的字符 至少出现0次
+ : 等价于 {1,} 表示 其前面紧挨着的字符 至少出现1次
? : 等价于 {0,1} 表示 其前面紧挨着的字符 至少出现0次 最多出现1次
. : 表示任意一个字符 多用于密码验证
\ : 转义字符 如果一些特殊字符 在正则中表示原意 必须要转义 \. ---- 原意 .
组合字符:
\d : 表示 0--9之间的任意一个数字
\D : 表示 非 数字 (任意一个字符)
\w : 表示 任意一个 单词字符 (字母或数字或下划线)
\W : 表示非 单词字符
\s : 表示任意一个空白字符
\S : 表示非空白字符
括号 :
{m,n} 表示{}前面紧挨着的字符至少出现m次 至多出现n次
{m} m是正整数 表示{}前面紧挨着的字符只能出现m次
{m,} m是正整数 表示{}前面紧挨着的字符至少出现m次
m < n m ,n 都是正整数
[ ] 表示括号内的任意一个字符 [12as] [0-9] 等价 \d [a-z]
[^ ] 表示 非括号内的任意一个字符 [^a-z]表示非小写字母
表示任意一个中文 : [\u4e00-\u9fa5] 多用于名字验证
️我还很喜欢你、就像sin²x+cos²x始终如一