BOM随筆

window.onload = function(){}

window.addEvevtListener("load",function(){})

視窗大小發生變化時觸發

window.onresize

window.addEvebtListener("resize",function(){}

setTimeout(調用函數,時間//毫秒)

setTimeout(function(){},1000)

setTimeout(callback,1000)

clearTimeout(timeoutid) 清除定時器

setInterval(回調函數,間隔毫秒數)//重複調用

給對象添加同名定時器前，通常需先清除定時器

同步任務

主線程上執行，形成執行棧

異步任務

js異步任務通過回調函數實作//任務隊列

一般有三種類型

普通事件，click，resize等

資源加載，load，error等

定時器，包括setTimeout,setInterval等

同步任務隻有定時器

setTimeout(fn,0)

回調函數屬于異步任務

function(){...}

執行機制

先執行執行棧中的同步任務

異步任務(回調函數)放入任務隊列

一旦執行棧中的同步任務執行完畢，系統就會按次序讀取任務隊列中的異步任務，于是被讀取的異步任務結束等待狀态，進入執行棧，開始執行

異步程序處理: 處理異步任務，等待其滿足條件時，将其放入任務隊列

location.href //位址

location.href = "###"//改變位址

location.search//參數資料 /// "?name=xxx...."

location.assign("")//頁面跳轉(href) (重定向頁面) 記錄浏覽曆史 可以實作後退功能//

頁面重新整理時直接調用，不記錄浏覽曆史

location.replace("")//替換頁面 不記錄浏覽曆史 不可後退

location.reload();//重新加載頁面(F5) 如果參數為true強制重新整理(ctrl+F5)

包含有關浏覽器的資訊

navigation.userAgent

back()

forward()

go(1)//-1

offsetLeft offsetTop擷取元素偏移

以帶有定位的父親為準，如果沒有父親或父親沒有定位 則以body為準

offsetWidth offsetHeight

得到元素的大小 寬度和高度 （包含 padding+border+width)

offsetParent

傳回帶有定位的父親，否則傳回的是body

parentNode //傳回最近一級的父親（不論有無定位）

offset style差別

offset擷取任意樣式表 style隻能擷取行内樣式表

offset沒有機關

offsetWidth包含padding+border+width，style.width不包含padding border

offsetWidth等屬性是隻讀屬性 不能指派

擷取元素大小位置-offset

給元素更改值-style

element.clientWidth//傳回自身包括padding,内容區的寬度 不含邊框 無機關

element.clientHeight//

element.clientTop //傳回元素上邊框的大小

element.clientLeft//左邊框

element.scrollHeight//自身實際的高度，不含邊框，不帶機關

element.scrollTop//滾動時 element被卷去的上側距離

window.pageYOffset //doc頁面被卷去的頭部 （相容性問題）

window.pageXOffset

聲明DTD document.documentElement.srcollTop

未聲明DTD document.body.scrollTop

element.scollWidth

element.scrollLeft

mouseover 滑鼠經過自身盒子會觸發，經過子盒子也會觸發(mouseout); mouseenter 隻會經過自身盒子觸發（mouseenter不會冒泡）//mouseleave

setInterval

勻速 //步長 固定

步長 ：(目标值 - 現在的位置) / 10//若為整數 至少為1

正值向上取整 Math.ceil() //0.3 -> 1;

負值向下取整 Math.floor()//-0.3 -> -1

回調：函數作為一個參數 傳到另一個函數裡面，當那個函數執行完之後 再執行傳進去的這個函數。

複制第一張圖檔到最後，滾動到最後時，無動畫複原為初始狀态

節流閥

利用回調函數控制 動畫執行與否

touchstart

touchmove

touchend

e.touches//正在觸摸螢幕的所有手指清單

e.targetTouches //正在觸摸目前dom元素的手指清單e.targetTouches[0]

e.changedTouches //手指狀态發生了改變的清單 從無到有/從有到無

ele.classList[1]//擷取類名

ele.classList.add('three);//添加類名 追加不覆寫

ele.classList.remove('one);//删除類名

ele.classList.toggle('bg')//切換類

有'bg'類->删除'bg'

無'bg'類->添加'bg'

過渡結束時觸發

原因: 移動端輕按兩下螢幕會縮放頁面，300ms延時等待

方法: 禁止使用者縮放螢幕

content="user-scalable=no"

利用touch事件自己封裝事件解決300ms延遲

fastclick.js

window.sessionStorage

生命周期為關閉浏覽器視窗

存儲資料

sessionStorage.setItem(key,value)

擷取資料

sessionStorage.getItem(key)

删除資料

sessionStorage.removeItem(key)

window.localStorage

生命周期永久生效，除非手動删除，否則關閉頁面也存在

多視窗共享（同一浏覽器）

localStorage.setItem(key,value)

localStorage.getItem(key)

localStorage.removeItem(key)

清除所有資料

localStorage.clear()

本文來自部落格園，作者：w0000，轉載請注明原文連結：https://www.cnblogs.com/w0000/p/15335003.html