1. 程式人生 > >js中物件的一些特性,JSON,scroll家族

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標籤 這個很重要