元素大小和位置
1.scroll家族(滚动条-17px)
pc端滚动条占17px
移动端混动条不占大小
使用场景： 我们想要页面滚动一段距离，比如100px，就让某些元素 显示隐藏，那我们怎么知道，页面滚动了100像素呢？ 就可以使用scroll 来检测页面滚动的距离~~~
获取宽高： 获取元素的内容总宽高（不包含滚动条）返回值不带单位 scrollWidth和scrollHeight
获取位置: 获取元素内容往左、往上滚出去看不到的距离 scrollLeft和scrollTop 这两个属性是可以修改的
如：div.addEventListener('scroll', function() {
console.log(this.scrollTop);
})
开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素
代码:window.addEventListener('scroll', function() {
//document.documentElenment.scrollTop 获得当前页面被卷去的头部
let num = documentElement.scrollTop
console.log(num);
})
2.offset家族
获取宽高：
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
获取位置：
获取元素距离自己定位父级元素的左、上距离
offsetLeft和offsetTop 注意是只读属性
轮播图：Swiper插件：www.swiper.com.cn/usage/index…
Window对象
定时器-延时器
语法：setTimeout(回调函数，等待的毫秒数)；
setTimeout仅执行一次
清除延时器函数：let timer = setTimeout(回调函数，等待的毫秒数)
clearTimeout(timer)
递归
function fun() {
fun();
}
fun();
location
location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分 常用属性和方法： href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
用法：location.href="地址"；
search 属性获取地址中携带的参数，符号 ？后面部分 hash 属性获取地址中的啥希值，符号 # 后面部分 reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
用法：location.reload(true);//强制刷新
本地存储
localStorage
- 生命周期永久生效，除非手动删除，否则关闭页面也会存在
- 可以多窗口（页面）共享（同一浏览器可以共享）
- 以键值对的形式存储使用
存储数据：localStorage.setltem(key.value)
获取数据：localStorage.getItem(key)
删除数据：localStorage.removeItem(key)
清空数据： localStorage.clear()
存储复杂数据类型存储
JSON.stringify(复杂数据类型) 存储 本地存储中
JSON.parse(JSON字符串) 取出 时候使用
如：// 把数组转成 字符串
const strArr = JSON.stringify(arr);
// 存一份到本地存储中
localStorage.setItem('arr', strArr);
sessionStorage
关闭页面，数据丢失
存储数据：sessionStorage.setltem(key，value)
获取数据：sessionStorage.getItem(key)
删除数据：sessionStorage.removeItem(key)
清空数据： sessionStorage.clear()
自定义属性
自定义属性 不能直接通过点语法来获取和设置
获取 **getAttribute("属性名")**强大
设置 setAttribute(key,value)
删除 removeAttribute(key)
自定义属性 -> h5建议的 自定义属性
属性的时候 data-xxx 开头
<a data-abc="123" >
获取（a.dataset.abc） 设置（a.dataset.abc=456）;
字符串方法
-
转大写toUpperCase() 如let str = 'aasfsssvvv'; console.log(str.topperCase());
-
转小写toLowerCase() 如let str = 'HGUJBKJK'; console.log(str.toLowerCase());
-
转数组str.split('');
const str="abcdefg"; //=> ["a","b","c","d","e","f","g"] // // split("") 分割 // console.log(str.split("")); // const str = 'a-b-c-d-e-f-g'; // ["a","b","c","d","e","f","g"] // console.log(str.split('-')); // console.dir(str);
数组方法
-
转字符串arr.join('');
console.log(arr.join('')); //join 数组转字符串
console.log(arr.join('-')); // a-b-c-d 数组转字符串
-
数组连接arr1.concat(arr2)
const arr1 = ['1','2','3'];
const arr2 = ['a','b','c'];
console.log(arr1.concat(arr2));
正则表达式
语法
1.正则表达式语法：let 变量名 = /表达式/ 其中/ /是正则表达式的字面量
比如：let reg = /前端/
2.判断是否有符合规则的字符串：
test() 方法 用来查看正则表达式与指定的字符串是否匹配
语法：regObj.test(被检测的字符串)
比如：let str = 'IT培训，前端开发培训';
let reg = /前端/;
let re = reg.test(str);
console.log(re) //true
如果正则表达式与指定的字符串匹配 ，返回true，否则false
3.检索（查找）符合规则的字符串：
exec() 方法 在一个指定字符串中执行一个搜索匹配
语法：regObj.exec(被检测字符串)
元字符
1.边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
如果 ^ 和 $ 在一起，表示必须是精确匹配。
^：表示匹配行首的文本(以谁开始)
$：表示匹配行尾的文本(以谁结束)
2.量词
量词用来设定某个模式出现的次数
*：重复零次或更多次 （至少出现零次）
+：重复一次或更多次 （至少出现一次）
？：重复零次或一次
{n}：重复n次 （只能出现n次）
{n,}：重复n次或更多次 （最少出现n次）
{n,m}：重复n到m次（最少出现n次，最多出现m次）
3.字符类
预定义：指的是某些常见模式的简写方式。
\d：匹配0-9之间的任意数字，相当于[0-9]
\D：匹配所有0-9以外的字符，相当于[^0-9]
\w：匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]
\W：除所有的字母、数字和下划线以外得到字符，相当于[^A-Za-z0-9_]
\s：匹配空格（包括换行符、制表符、空格符等），相当于[\t\r\n\v\f]
\S：匹配非空格的字符，相当于[^\t\r\n\v\f]
