javascript

js定時(shí)器

• setInterval( 函數(shù), 時(shí)間);可識(shí)別最小幀數(shù)14 ,每xx時(shí)間執(zhí)行一次這個(gè)函數(shù), 循環(huán)執(zhí)行多次
• setTimeout( 函數(shù) , 時(shí)間);xx時(shí)間之后執(zhí)行這個(gè)函數(shù)
• clearInterval( );
• clearTimeout( );
• 全局對(duì)象window上的方法, 內(nèi)部函數(shù)this指向window

DOM基本操作

查看滾動(dòng)條的滾動(dòng)距離

• window.pageXOffset/ pageYOffset
  • IE8及IE8以下不兼容
• document.body/ documentElement .scrollLeft/scrollTop
  • 兼容性比較昏亂, 用時(shí)取兩個(gè)值相加, 因?yàn)椴豢赡艽嬖趦蓚€(gè)同時(shí)有值
• 封裝兼容方法, 求滾動(dòng)輪滾動(dòng)距離getScrollOffset()

function getScrollOffset() {
    if(window.pageXOffset){
        return{
            x: window.pageXOffset,
            y: window.pageYOffset
        }
    }else{
        return{
            x: document.body.scrollLeft + document.documentElement.scrollLeft,
            y: document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

查看視口的尺寸

• window.innerWidth/innerHeight
  • IE8及IE8以下不兼容
• document.documentElement.clientWidth/clientHeight
  • 標(biāo)準(zhǔn)模式下, 任意瀏覽器都兼容
• document.body.clientWidth/clientHeight
  • 適用于怪異模式下的瀏覽器
• 封裝方法, 返回瀏覽器視口尺寸getViewportOffset( )

function getViewportOffset() {
    if(window.innerWidth && 0){
        return{
            w: window.innerWidth,
            h: window.innerHeight
        }
    }else if(document.compatMode === "CSS1Compat"){
        return{
            w:  document.documentElement.clientWidth,
            h:  document.documentElement.clientHeight
        }
    }else{
        return {
            w: document.body.clientWidth,
            h: document.body.clientHeight
        }
    }
}

讓滾動(dòng)條滾動(dòng)

• window上有三個(gè)方法
• scroll( ), scrollTo( ), scrollBy( );
• 三個(gè)方法功能類似, 用法都是將x, y坐標(biāo)傳入. 即實(shí)現(xiàn)讓滾動(dòng)條滾動(dòng)到當(dāng)前位置
• 區(qū)別: scrollBy( )會(huì)在之前的數(shù)據(jù)基礎(chǔ)上做累加

查看元素的幾何尺寸

• 標(biāo)簽.getBoundingClientRect( );
• 兼容性很好
• 該方法返回一個(gè)對(duì)象, 對(duì)象里面有l(wèi)eft, top, right, bottom等屬性. left和top代表該元素左上角的x和y坐標(biāo), right和bottom代表元素右下角的x和y坐標(biāo)
• height和width屬性老版本IE并未實(shí)現(xiàn)
• 返回的結(jié)果并不是"實(shí)時(shí)的"

查看元素的尺寸

• dom.offsetWidth, dom.offsetHeight

查看元素的位置

• dom.offsetLeft, dom.offsetTop
• 對(duì)于無定位父級(jí)的元素, 返回相對(duì)于文檔的坐標(biāo). 對(duì)于有定位父級(jí)的元素, 返回相對(duì)于最近的有定位的父級(jí)的坐標(biāo).
• dom.offsetParent
• 返回最近的有定位的父級(jí), 如無, 返回body, body.offsetParent返回null
• eg: 求元素相對(duì)于文檔的坐標(biāo)getElementPosition( )