首页手记 js中对象的一些特性，JSON，offset家族，sc...

js中对象的一些特性，JSON，offset家族，scroll家族

标签：

JavaScript

一、js中对象的一些特性
对象的动态特性
1、当对象有这个属性时，会对属性的值重写
2、当对象没有这个属性时，会为对象创建一个新属性，并赋值
获得对象的属性的方式

为元素设置DOM0级事件

二、JSON
Javascript Object Notation 即一种轻量级的数据交换格式,我们称之为js对象表示法；使用JSON进行数据传输的优势之一就是轻量,表示法就是流行的
键值对,Key:value。
JSON的结构：

JSON值的获取：
点语法和中括号，推荐用点语法，可以不用在意属性的是否有引号
JSON数据的循环：
for … in …不但可以遍历JSON，还可以遍历普通的数组：

但是在遍历普通数组的时候，不要使用for … in，因为会慢好多倍。
for（var k in json）{
box.style[i]=json[k]
}
三、offset家族
三大家族(offset/scroll/client), 事件对象event
1、 offset家族简介
offset 英文本意：偏移、补偿、位移，js中有一套方便的获取元素尺寸的办法offset家族
offsetWidth和offsetHeight
offsetLeft 和offsetTop
offsetParent 检测父系盒子中带有定位父盒子节点（了解）
2、用途
l offsetWidth和offsetHeight的作用
主要用来检测盒子自身的宽高+padding+border

l offsetLeft和offsetTop的作用
返回距离上级盒子（带有定位）左边的位置；
如果父级都没有定位则以body为准；
offsetLeft从父亲的padding开始算,父亲的border不算；
offsetLeft和style.left区别：
1、 offsetLeft可以返回没有定位的盒子距离左侧的位置，而style.left不可以
2、 offsetLeft返回的是number，style.left返回的是string
3、 offsetLeft只读，style.left可读可写
4、如果没有给html元素指定过left或top的样式，style.left返回的时候空字符串，但offsetLeft只能是数字
l 有关动画

四、scroll家族
scroll 本意卷页，卷曲的意思
1、 scrollWidth和scrollHeight（了解）
用来检测内容的宽高,不包括border，ie6、7、8下scrollHeight内容的宽高可以比盒子小。IE8+，火狐，谷歌不能比盒子小
2、 scrollLeft和scrollTop
被卷去的的左侧和头部(浏览器无法显示的左/头部)部分
window.onscroll滚动事件，屏幕每滚动一次，哪怕只有1px都会触发这个事件，这样就可以用来检测屏幕滚动了
兼容性问题
document.body.scrollTop；
document.documentElement.scrollTop
window.pageYOffset