继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

小泡泡
关注TA
已关注
手记 43
粉丝 51
获赞 617

一、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标签 这个很重要

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP