js中对象的一些特性,JSON,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标签 这个很重要

猜你喜欢

转载自blog.csdn.net/qianfeng_dashuju/article/details/86012681