元素偏移量，元素可视区，元素滚动

概述

使用offset系列相关属性可以动态获得元素的位置和大小

• 获得元素距离带有定位的父元素的位置
• 获得元素自身大小
• 返回的数值都不带单位

1. element.offsetParent，返回该元素带有定位的父元素，父元素没有定位就返回body
2. element.offsetTop,返回元素相对带有定位的父元素上方的偏移
3. element.offsetLeft，返回元素相对带有定位的父元素左侧的偏移
4. element.offsetWidth，返回自身包括padding，边框，内容区宽度，返回数值不带单位
5. element.offsetHeight，返回自身包括padding，边框，内容区的高度，返回数值不带单位

offset和style的区别

微信图片_20220108143249.jpg

元素可视区client

微信图片_20220108151745.jpg

1. element.clientTop，返回元素上边框的大小
2. element.clientLeft，返回元素左边框的大小
3. element.clientWidth，返回自身包括padding，内容区宽度不含边框，返回数值不带单位
4. element.clientHeight,返回自身包括padding，内容区的高度，不含边框，返回数值不带单位

立即执行函数

（function（）{}）（）
（function（）{}（））

元素scroll系列属性

1. element.scrollTop返回被卷去的上侧距离，返回不带单位
2. element.scrolLeft返回被卷去的左侧的距离，返回不带单位
3. element.scrollWidth返回自身实际的宽度，不含边框，不带单位
4. element.scroll返回自身实际高度，不含边框，不带单位

微信图片_20220108153029.jpg

总结

• offset系列用于获得元素位置
• client系列用于获得元素大小
• scroll系列用户获取滚动距离
• 注意页面的滚动距离通过window.pageXoffset获得

mouseenter和mouseover的区别

• 当鼠标移动到元素上时就触发mouseenter事件
• mouseover鼠标经过自身盒子会触发，经过子盒子也会触发，mouseenter只在经过自身盒子触发
• 因为mouseenter不会冒泡
• mouseenter搭配鼠标离开mouseleave同样不会冒泡

节流阀

屏幕截图 2022-01-08 155743.png

常见触屏事件

屏幕截图 2022-01-08 200849.png

屏幕截图 2022-01-08 201223.png

swiper插件

各种触摸滑动插件

插件如何使用

• 确认插件实现的功能
• 官网查看使用说明
• 下载插件
• 打开demo实例文件，查看需要引入的相关文件，并且引入
• 复制demo实例中的结构html，样式css以及js代码

本地存储

• 数据存储在用户浏览器中
• 设置读取方便，甚至页面刷新不丢失数据
• 容量大，sessionStorage约5M，localStorage约20M
• 只能存储字符串，可以将JSONstringify()编码后存储

window.sessionStorage

微信图片_20220111141045.jpg

window.localStorage

微信图片_20220111141049.jpg

微信图片_20220111141457.jpg