三大家族（offset/scroll/client ）
1，Offset
offset这个单词本身是--偏移，补偿，位移的意思。js中有一套方便的获取元素尺寸的办法就是offset家族，offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent，共同组成了offset家族。
（1）offsetWidth和offsetHight （检测盒子自身宽高+padding+border）
这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。offset宽/高 = 盒子自身的宽/高 + padding +border；offsetWidth = width+padding+border；offsetHeight = Height+padding+border；
（2）offsetLeft和offsetTop （检测距离父盒子有定位的左/上面的距离）
返回距离上级盒子（带有定位）左边s的位置，如果父级都没有定位则以body为准，offsetLeft从父亲的padding 开始算,父亲的border 不算。在父盒子有定位的情况下，offsetLeft == style.left(去掉px)
(3) offsetParent（检测父系盒子中带有定位的父盒子节点）
1、返回改对象的父级 （带有定位）,如果当前元素的父级元素没有进行CSS定位 （position为absolute或 relative，fixed）， offsetParent为body。
2、如果当前元素的父级元素中有CSS定位 （position为absolute或 relative，fixed）， offsetParent取最近的那个父级元素。
(4) ]offsetLeft和style.left区别
一、[endif]最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。而style.left不可以。
二、offsetTop返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
三、offsetTop只读，而 style.top 可读写。（只读是获取值，可写是赋值）
四、如果没有给HTML元素指定过 top 样式，则style.top 返回的是空字符串。
动画和封装
动画原理：盒子的位置=盒子本身所在的位置+步长。
焦点图：难点1：先点亮盒子，然后移动图片。2：移动图片的目标位置都是负值。（负的图片的个数乘以图片的宽，到0之间）（负数） 3：获取盒子的索引值，我们才能知道，ul向右移动几张图片。
切换图 ：难点：1.为什么移动的图片是负值。（参看上面的案例难点2）
2.为什么要计数器。（我们需要一个值，记录当前图片，方便后续操作）
3.为什么方法1里的num--；方法2里面的num++。我们要看之前的图片，就要num--，要看后面的图片就要num++；图片想左走显示后面的，图片向右走显示前面的。
缓动动画
三个函数：都是在数轴上向上或者向下取整。
Math.ceil() 向上取整
Math.floor() 向下取整
Math.round(); 四舍五入
缓动动画原理：leader=leader+(target-leader)/10;盒子位置 = 盒子本身位置+（目标位置-盒子本身位置）/ 10；
offsetLeft和style.left的值的获取问题：获取盒子距离左侧具有定位的父盒子的距离（没有的body），四舍五入取整。Style.left获取的是具体值。 （赋值的时候也是直接赋值）
按例：筋斗云；鼠标悬停和鼠标移开不会影响初始化值，只有点击影响。而移开的情况下，span移动到计数器的位置。
2，scroll
ScrollWidth和scrollHeight（不包括border）检测盒子的宽高。（调用者：节点元素。属性。）；盒子内容的宽高。（如果有内容超出了，显示内容的高度）；IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
scrollTop和scrollLeft：网页，被浏览器遮挡的头部和左边部分。被卷去的头部和左边部分。
scroll他有兼容性问题;一、未声明DTD（谷歌只认识他）document.body.scrollTop 。二、[endif]已经声明DTD（IE678只认识他） document.documentElement.scrollTop。三、[endif]火狐/谷歌/ie9+以上支持的 window.pageYOffset
获取title、body、head、html标签；document.title ---文档标题；document.head ---文档的头标；document.body ---文档的body标签；document.documentElement ---这个很重要；它表示文档的html标签， 也就是说，基本结构当中的html标签并不是通过document.html去访问的，而是document.documentElement 。
Json：Json是一种和数组类似的数据类型。不同的是：数组中的元素是单一的。而json中的元素，是以键值对的形式出现的。（key: value）
定义方法：var json = { key1：value1,key2：value2,key3：value3... };数组是通过索引值获取数组中的元素的，而json是通过key获取元素的。
获取内容：JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一。表示方法为键值对，key：value。var myjson={k1:v1,k2:v2,k3:v3...}；获取方式：v1 == myjson.k1 v2 == myjson.k2；Json一般就是被当做一个配置单用
Json的遍历（了解）；用的是新的语法方法：for ... In ....
判断页面有没有DTD；document.compatMode === "BackCompat"；BackCompat未声明；CSS1Compat已经声明，注意大小写。