手记

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

一、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

ps:获取title,body,head,html标签的用法
document.title 文档的标题
document.head 文档的头部标签
document.body 文档的body标签
document.documentElement 文档的html标签 这个很重要

2人推荐
随时随地看视频
慕课网APP