JavaScript 基础学习-拖拽实现 & 正则

这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战

☆☆☆ 今天的内容( 拖拽的实现 和 正则相关) 重点!! ☆☆☆

可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新中

结合自己的理解, 用白话文简单又全面概括 JavaScript 学习过程中的基础知识点, 方便加深理解!

开始今天的学习吧! '打牢地基才能筑高楼'! 加油! 认真对待!!

1、梳理复习昨天知识点

事件委托：target || srcElement
事件委托（事件代理）：
json 对象： { }
读取操作 json = { "src":["1.jpg","2.jpg"] } json.src json["src"]
拖拽：实现 onmousedown onmousemove onmouseup
滚动条操作

如何获取页面滚走的距离： document.documentElement.scrollTop || document.body.scrollTop

2、取消拖拽时的文字选中状态

window.getSelection?

window.getSelection().removeAllRanges():document.selection.empty();

3、offset 家族属性

offsetWidth / clientWidth / style.width 三者区别：

offsetWidth / clientWidth 都可以获取非行内元素的样式值
offsetWidth 值 = 内容宽度 + padding + border
clientWidth 值 = 内容宽度 + padding
- 得到的值是数值类型
- 只读属性不能这样做：obj.offsetWidth = 400
style.width 不可以获取非行内元素的样式值行内样式值 = 内容的宽度
- 得到的值是字符串带有 px
- 可读可写
offsetLeft ：获取离该元素最近的具有定位的元素的左偏移如果该元素的父级元素都没有定位的设置，相对应 body 的左偏移
offsetTop ：同上

4、放大镜实现思路

需要的事件：
- 鼠标移入和移出移动 onmouseover onmouseout onmousemove
- 鼠标移入：显示遮罩层 mask 和大图显示区
- 鼠标移出：隐藏遮罩层 mask 和大图显示区
- 鼠标移动：
  - 1、操作 mask 的 left 和 top 让 mask 动起来
  - 2、操作 bigImg 的 left 和 top 让大图动起来
  - 3、mask 移动方向和 bigImg

5、正则 --- 正确的规则

限制用户输入数据的合法性

好处：提高工作效率

6、正则表达式组成

由普通字符和特殊字符组成的，具有特定含义

7、正则定义

var reg = /普通字符或特殊字符/修饰符; new RegExp

修饰符： i 不区分大小写 g 全局查找

8、正则中的特殊字符

8.1 单字符：

^ : 开始
$ : 结束
| 表示或者一般与 ( ) 连用
* : 等价于 {0,} 表示其前面紧挨着的字符至少出现 0 次
+ ：等价于 {1,}
? : 等价于 {0,1}
. : 表示任意一个字符
\ : 转义字符如果一些特殊字符在正则中表示原意必须要转义 . ---- 原意 .

8.2 组合字符:

\d : 表示 0--9 之间的任意一个数字
\D : 表示非数字（任意一个字符）
\w : 表示任意一个单词字符（字母或数字或下划线）
\W : 表示非单词字符
\s : 表示任意一个空白字符
\S : 表示非空白字符

8.3 括号：

{m,n} m < n m ,n 都是正整数表示{}前面紧挨着的字符至少出现 m 次至多出现 n 次
{m} m 是正整数表示{}前面紧挨着的字符只能出现 m 次
{m,} m 是正整数表示{}前面紧挨着的字符至少出现 m 次
[ ] 表示括号内的任意一个字符 [12as] [0-9] 等价 \d [a-z]
[^ ] 表示非括号内的任意一个字符 [^a-z]表示非小写字母
表示任意一个中文： [\u4e00-\u9fa5]

预告: 加油, 追梦人

【预告】: 接下来学习正则以及开始接触实际工作中部分需求的实现啦

学习就是一个不断进行的过程, 坚持下去, 定有收获!

日积月累, 巩固基础, 早进大厂!

坚持很不容易, 坚持下来更不容易, 你真棒!

Calm Down & Carry On!