1.0 元素的偏移量offset系列

offsetTop 当前盒子 距离带有定位的父元素（最近）的上边的距离 如果没有定位父元素 那么按照body来算

offsetLeft 当前盒子 距离带有定位的父元素（最近）的左边的距离 如果没有定位父元素 那么按照body来算

offsetWidth: width+border+padding 受到box-sizing 跟盒模型是保持一致的

offsetHeight: width+border+padding 受到box-sizing 跟盒模型是保持一致的

offsetParent获取 当前元素的 父元素的（最近的带有定位的）

可以用style设置 但是不能用style获取 用js设置以后可以获取

1.1 offset 与 style 区别

offset

• offset 可以得到任意样式表中的样式值
• offset 系列获得的数值是没有单位的
• offsetWidth 包含padding+border+width
• offsetWidth 等属性是只读属性，只能获取不能赋值
• 要获取元素大小位置，用offset更合适

style

• style 只能得到行内样式表中的样式值
• style.width 获得的是带有单位的字符串
• style.width 获得不包含padding和border 的值
• style.width 是可读写属性，可以获取也可以赋值
• 要给元素更改值，则需要用style改变

1.2 模态框案例

// 1. 获取元素
var login = document.querySelector('.login'); //登陆模态框
var mask = document.querySelector('.login-bg'); //登陆框遮盖层
var link = document.querySelector('#link'); //弹出登录框的超链接
var closeBtn = document.querySelector('#closeBtn'); //关闭按钮
var title = document.querySelector('#title'); //登陆框的最上边的标题行
// 2. 点击弹出层这个链接 link  让mask 和login 显示出来
link.addEventListener('click', function() {
    mask.style.display = 'block';
    login.style.display = 'block';
})
// 3. 点击 closeBtn 就隐藏 mask 和 login 
closeBtn.addEventListener('click', function() {
    mask.style.display = 'none';
    login.style.display = 'none';
})
// 4. 开始拖拽
// (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function(e) {
    var x = e.pageX - login.offsetLeft;
    var y = e.pageY - login.offsetTop;
    // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
    document.addEventListener('mousemove', move);
    function move(e) {
        login.style.left = e.pageX - x + 'px';
        login.style.top = e.pageY - y + 'px';
    }
    // (3) 鼠标弹起，就让鼠标移动事件移除
    document.addEventListener('mouseup', function() {
        document.removeEventListener('mousemove', move);
    })
})

2.0 元素可视区 client 系列

client：理解为快递的内容+填充物，不包含快递箱子（边框）

clientTop：快递的内容，距离整个元素边界的上间距。

3.0立即执行函数

语法：两种

(functin(){})()

(function(){}())

• 语法：(function () {}) () 或者（function（）{}（））
• 特点：不用调用 自己马上就能执行
• 第二个小括号可以看做是调用函数 也可以传递参数的
• 如果有多个立即执行函数 要用分号隔开
• 立即执行函数最大的作用就是独立创建了一个作用域 里面所有的变量都是局部变量 变量名不会冲突

4.0 scroll系列

注意

scrollHeight:返回自身实际的高度 不含边框 返回数值不带单位 如果盒子里面的内容小于盒子本身的高度 获取的是盒子的高度 如果盒子内容的高度大于盒子的高度 获取的是盒子内容的高度

4.1 页面被卷去的头部

• 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。
• 当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。
• 滚动条在滚动时会触发 onscroll事件。
• mouseenter没有事件冒泡效果 鼠标移上时触发

5.0 三大系列总结

他们主要用法：

1.offset系列 经常用于获得元素位置 offsetLeft offsetTop

2.client经常用于获取元素大小 clientWidth clientHeight

3.scroll 经常用于获取滚动距离 scrollTop scrollLeft

4.注意页面滚动的距离通过 window.pageYOffset 获得

6.0 mouseenter 和mouseover的区别

当鼠标移动到元素上时就会触发mouseenter 事件类似 mouseover

它们两者之间的差别是

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发

mouseenter 只会经过自身盒子触发

之所以这样，就是因为mouseenter不会冒泡

跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

mouseenter与mouseover的区别

mouseenter在父子盒子之间来回切换，不会重复触发mouseenter事件。只有第一次进入父盒子区域（父盒子区域，和子盒子区域），才会触发。

mouseover在父子盒子之间来回切换，会重复触发mouseover事件。

京东放大镜公式

 // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离