一、三大系列：offset家族、scroll家族、client
1、offset
1.1.简介
- offset家族就是js中一套方便
获取元素尺寸的方法； - offset常用属性：offsetWidth和offsetHeight；offsetLeft和offsetTop；offsetParent。
1.2.offsetWidth和offsetHeight：
- 可以检测盒子的宽高，没有单位，是number类型；
- 包括盒子宽高本身、padding、border；
- offsetHeight = height + padding + border；（不包括margin）；
- offsetWidth = width + padding + border；（不包括margin）；
1.3.offsetLeft和offsetTop（检测距离有定位的父系盒子左/上的距离）：
返回距离
上级盒子(带有定位)左边/上面的距离；如果父级都没有定位则以
body为准；offsetLeft从父盒子的padding开始算(包含父盒子的padding)，父盒子的border不算；
在父盒子有定位的情况下，
offsetLeft不一定等于style.left(去掉单位px)，如果给style.left(只识别行内)赋值了，将style.left单位去掉会相等；如果没有赋值的话就不会相等。-
offsetLeft和style.left的区别：
- 最大的区别在于offsetLeft可以返回没有定位盒子距离左侧的位置；如果父系盒子中都没有定位，以body为准；style.left只能获取行内式，如果没有就返回""；
- offsetLeft返回的是数字，而style.left返回是带有px的字符串；
-
offsetLeft只读，一般用来取值，而style.left可读写，一般用来赋值； - 如果没有给HTML元素行内指定过left样式，则style.left返回的是空字符串。
1.4.offsetParent(检测父盒子中带有定位的父盒子节点)
- 返回该对象的父级（带有定位），如果父系盒子中都没有进行CSS定位（position为absolute、relative或fixed），
offsetParent为body； - 如果当前元素的父级有CSS定位，就返回最近的那个父级元素；
- 除了static之外的其它定位。
2.第二系列scroll
2.1.Scroll家族组成：ScrollWidth和scrollHeight、scrollTop和scrollLeft
2.2. ScrollWidth和scrollHeight（不包括border）
检测盒子的宽高：节点元素.属性，内容没有超出盒子时，值为盒子宽高；
盒子内容的宽高：如果有内容超出盒子高度，显示内容的高度；
IE567可以比盒子小；IE8+火狐谷歌不能比盒子小。
scrollWidth = width + padding。介绍一下新事件：
onscrollonscroll滚动事件：屏幕每滚动一次，哪怕只有1像素都会触发这个事件。这样就可以用来检测屏幕滚动了；但是只能有一个此事件，如果有多个以最后一个为准，同
window.onload
window.onscroll = function (){};
2.3. scrollTop和scrollLeft
网页，被浏览器遮挡的头部和左边部分；
被卷去的头部和左边部分。
它有兼容性问题
未声明 DTD（谷歌只认识body）：
document.body.scrollTop
- 已经声明DTD（一些老版本的兼容性问题，IE678只认识documentElement）：
document.documentElement.scrollTop
- 火狐/谷歌/ie9+以上支持的（不管DTD）：
window.pageYOffset
- 兼容写法
var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
或者
var aaa = document.documentElement.scrollTop + document.body.scrollTop;
2.4.获取title、body、head、html标签
- document.title --- 文档标题；
- document.head --- 文档的头标签
- document.body --- 文档的body标签；
-
document.documentElement--- 这个很重要，它表示文档的html标签， 也就是说，基本结构当中的html标签并不是通过document.html去访问的，而是document.documentElement。
2.5.Json
- Json是一种和数组类似的数据类型；
- 不同的是：数组中的元素是单一的；
- 而json中的元素，是以键值对的形式出现的。（key: value）
2.5.1.定义方法
var json = { key1：value1,key2：value2,key3：value3... };
- 数组是通过索引值获取数组中的元素的，而json是通过key获取元素的。
2.5.2.获取内容
- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一。表示方法为键值对，key：value。
-
var myjson={k1:v1,k2:v2,k3:v3...}
，获取方式：v1 == myjson.k1 ; v2 == myjson.k2; - Json一般就是被当做一个配置单用。
2.5.3.Json的遍历（了解）
- 用的语法方法：
for...in...
//打印的结果为：
//aaa
//111
//bbb
//222
2.6.判断页面有没有DTD
document.compatMode === "BackCompat"
BackCompat 未声明
CSS1Compat 已经声明
- 注意大小写。
2.7.scroll()函数的封装
- 需求：封装一个兼容的scroll()方法，返回值是JSON，用scroll().top获取scrollTop。
简单版：
- 练习：
- 固定导航栏；
固定导航栏
- 两侧跟随的广告；
固定导航栏
我是第一行。。。
你我是永相随，醉把佳人成双对。。。
你我是永相随，醉把佳人成双对。。。
//上面的内容加到三四十行
- 小火箭返回头部。
- 技术点：
window.scrollTo(x,y);
- 技术点：
固定导航栏
我是第一行。。。
你我是永相随，醉把佳人成双对。。。
你我是永相随，醉把佳人成双对。。。
//上面的内容加到三四十行
- 楼层跳跃。
- 100%：宽高设置为此值，可以使子盒子继承父盒子的宽高；可以使父盒子继承body的宽高；可以使body继承html的宽高。
电商楼层跳跃
- 男士专区
- 女士专区
- 儿童专区
- 婴儿物品
- 中老年营养品
- 男士
- 女士
- 儿童
- 婴儿
- 中老年
3.第三大家族client
3.1.主要成员：clientWidth/clientHeight、clientX/clientY、clientTop/clientLeft
clientWidth：获取网页可视区域宽度（两种用法）；clientHeight：获取网页可视区域高度（两种用法），
调用者不同，意义不同：盒子调用：指盒子本身（不包括border，clientWidth = padding + width）；body/html调用：可视区域大小。clientX：鼠标距离可视区域左侧距离（event调用）；clientY：鼠标距离可视区域上侧距离（event调用）。
clientTop/clientLeft：盒子的border宽高。
3.2.三大家族区别（三大家族总结）
Width和height
clientWidth = width + padding（盒子/body、html可视区域大小）；
clientHeight = height + padding（盒子/body、html可视区域大小）；
offsetWidth= width + padding +border；offsetHeight= height + padding +border；scrollWidth = 内容/盒子宽度（不包含border）；
scrollHeight = 内容/盒子高度（不包含border）；
top和left
-
offsetTop/offsetLeft ：
- 调用者：
任意元素。(盒子为主) - 作用：距离父系盒子中带有定位的距离。
- 调用者：
-
scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)
- 调用者：
document.body.scrollTop/.....(window) - 嘛作用：浏览器无法显示的部分（被卷去的部分）。
- 调用者：
-
clientY/clientX:（clientTop/clientLeft的值是border宽）
- 调用者：event.clientX(
event) - 嘛作用：鼠标距离浏览器可视区域的距离（左、上）。
- 调用者：event.clientX(
3.3.client家族特殊用法之：检浏览器宽/高度(可视区域)
- IE9及其以上的版本：
window.innerWidth/Height;，替代clientWidth/clientHeight； - 标准模式（有DTD）("CSS1Compat")：
document.documentElement.clientWidth;； - 怪异模式（没有DTD）：
document.body.clientWidth;； - 封装：类似
scroll();，但是不可有"+"的形式，因为用这里的获取方式进行获取时，如果没有获取到可能会报错。
3.4.onresize事件
只要浏览器的大小改变，哪怕1像素，都会触动这个事件
window.onresize = function(){};。案例：根据浏览器可视区域大小，给定背景色。
模拟响应式：移动版（640）/ 平板 / PC版（960）
根据浏览器窗口大小改变背景色
3.5事件总结
- 区分：
| 事件 | 说明 |
|---|---|
| window.onscroll | 屏幕滑动 |
| window.onresize | 浏览器大小变化 |
| window.onload | 页面加载完毕 |
| div.onmousemove | 鼠标在盒子上移动（注意：不是盒子移动！！！） |
| onmouseup/onmousedown | onclick |
3.6.获得屏幕宽高
-
window.screen.width； - 分辨率是屏幕图像的精密度，指显示器所能显示的像素有多少。
- 我们的电脑一般：横向1280个像素点，纵向960个像素点。我们看电影的时候是满屏和半屏的，就是这。
4.事件对象（event）
- 在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持
event对象，但支持的方式不同。
比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。（类似Date）
普通浏览器支持 event（带参，任意参数）；ie 678 支持 window.event（无参，内置）。
总结：它是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。
4.1.事件对象的获取（event的获取）
- IE678中，window.event
- 在火狐谷歌中，event或者在事件绑定的函数中加参，这个参数就是event。
Box.onclick = function (aaa){
console.log(event);
console.log(aaa);
}
- 兼容获取方式有两种：
- 不写参数直接使用
event; - 写参数，参数为event，兼容性写法
var event = event || window.event;(主要用这种)
4.2.event内容重要内容
| 属性 | 作用 |
|---|---|
| timeStamp | 返回事件生成的日期和时间 |
| bubbles | 返回布尔值，指示事件是否是起泡事件类型 |
| button | 返回当事件被触发时，哪个鼠标按钮被点击了 |
| pageX | 光标相对于该网页的水平位置（IE678无） |
| pageY | 光标相对于该网页的垂直位置（IE678无） |
| screenX | 光标相对于该屏幕的水平位置 |
| screenY | 光标相对于该屏幕的垂直位置 |
| target | 该事件被传送到的对象 |
| type | 事件的类型 |
| clientX | 光标相对于该网页的水平位置（当前可见区域） |
| clientY | 光标相对于该网页的垂直位置 |
- 相关比较：
- PageY/pageX: 鼠标距离整个网页页面的顶部和左侧部分的距离。（页面）
- ScreenY/screenX: 鼠标距离屏幕的上方和左侧的距离。（屏幕）
- ClientX/clientY: 鼠标距离浏览器的左侧和顶部的距离。（浏览器大小和位置）
4.3.PageY和pageX的兼容写法很重要
在页面位置就等于 = 看得见的+看不见的
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left;；（其中scroll()为上面自己封装的函数）案例：鼠标跟随。
有位置移动的都需要定位
鼠标跟随
4.4.新事件（onmousemove）
- 只要鼠标在绑定该事件的事件源上移动，哪怕1像素，也会触动这个事件。
-
这个事件可以直接或者间接的替代定时器。 - 案例：鼠标在盒子中的坐标。
鼠标在盒子中的位置
案例
- 放大镜
- 注意1：CSS部分要注意：大图片/大盒子 = 小图片/显示部分
- 注意2：(大图片/大盒子 = 小图片/黄盒子)
大盒子滑动的距离/小盒子滑动的距离 = 大盒子滑倒头/小盒子滑倒头
大盒子滑倒头/小盒子滑倒头（他们的距离如何获取呢？）
（大图片-大盒子）（两边各有一伴儿大盒子的距离是没有走的）
（小盒子-小图片）（两边各有一伴儿小盒子的距离是没有走的） - 注意3：
onmouseover、onmouseout事件给定一个盒子，子元素也会获取这个事件。
替代方法：onmosueenter和onmouseleave(此方法不冒泡).
放大镜
- 拖拽案例
- 禁止文本选中（选中后取消）
window.getSelection() ? window.getSelection().removeAllRanges():document.selection.empty("");
拖拽案例
注册信息（可以拖拽）
【关闭】
- 模拟滚动条
事件被触动时，鼠标和键盘的状态
通过属性控制