什么是 WEB API ？
答：就是一套專門用來(lái)操作網(wǎng)頁(yè)的方法和屬性。
通過(guò)document獲取網(wǎng)頁(yè)的某個(gè)元素
1.獲取ID:
document.getElementById('id')；? ?
通過(guò)id獲取元素，找到了會(huì)返回這個(gè)元素，找不到會(huì)返回null。
除了id其它的獲取方式都可以用某個(gè)元素點(diǎn)出里面的另一個(gè)元素。如? ? ? ul1.getElementsByClassName('four');? --- id 只能用document獲取，因?yàn)樵诰W(wǎng)頁(yè)中id是唯一的，沒有第二個(gè)。
2.獲取類名:
document.getElementsByClassName('類名');
通過(guò)類名獲取永遠(yuǎn)都會(huì)得到偽數(shù)組，在('類名')后面加[下標(biāo)]可以取到對(duì)應(yīng)下標(biāo)的某個(gè)元素。
3.獲取標(biāo)簽名：
document.getElementsByTagName('標(biāo)簽名')
用于獲取標(biāo)簽。
4.獲取name名：
document.getElementsByName('name名')
這個(gè)獲取方法用的少
5.H5新增的倆個(gè)查找元素的方法：
document.querySelector();---永遠(yuǎn)只會(huì)找到第一個(gè)元素，返回的是對(duì)象
document.querySelectorAll();---永遠(yuǎn)得到為數(shù)組
找一個(gè)元素用querySelectot(); 找一堆用querySelectorAll(); ()里面寫的要找的元素，css選擇器怎么寫()里就怎么寫；如：要找id就querySelector('#id');各種選擇器都可以寫。
Web Api 事件
1.什么是事件？
答：當(dāng)用戶與web頁(yè)面進(jìn)行交互時(shí)解釋器就會(huì)創(chuàng)建出相應(yīng)的event對(duì)象來(lái)描述事件信息。
2.Event 事件對(duì)象
Event 表示的是事件的狀態(tài)，如：鍵盤按鍵狀態(tài)，鼠標(biāo)移動(dòng)位置等...? 事件通常與某個(gè)函數(shù)相結(jié)合使用，函數(shù)不會(huì)在事件發(fā)生前被執(zhí)行。
獲取事件對(duì)象：---他有著兼容性問題，無(wú)法兼容ie8及以下版本，下面是兼容寫法
function(e){e=e||window.event}；
2-1：事件對(duì)象里的三大坐標(biāo)：
1.獲取點(diǎn)擊位置相對(duì)于屏幕左上角的坐標(biāo)? e.screenX,e.screenY 。
2.獲取的時(shí)點(diǎn)擊位置相對(duì)于可視區(qū)域左上角的坐標(biāo)? ?e.clientX,e.clientY。
3.獲得相對(duì)于自身坐標(biāo)x,y的方法：
計(jì)算方法：x=e.clientX - 盒子自身到可視區(qū)域的left。y=e.clientY - 盒子自身到可視區(qū)域的top
獲取盒子到可視區(qū)域距離的方法：var rect = 盒子.getBoundingClinetRect();? ?var left = rect.left就是獲取該元素左邊相對(duì)屏幕左邊的位置。同理還有bottom,top,right。
4.獲得點(diǎn)擊位置相對(duì)于頁(yè)面左上角的坐標(biāo)：
只能自己算：pageX=e.clientX+頁(yè)面往左滾出去的距離。? ?pageY=eclientY+頁(yè)面往上滾出去的距離。.
兼容寫法： var scrollTop = window.pageYOffset ||document.documentElement.scrollTop || document.body.scrollTop || 0;??var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;? ? 獲取頁(yè)面往左和往上滾出去的距離
3.事件句柄：
也叫事件處理函數(shù)，指用于響應(yīng)某個(gè)事件而調(diào)用的函數(shù)。
常見的事件句柄有：
1-1鼠標(biāo)點(diǎn)擊事件：onclick。
1-2鼠標(biāo)雙擊事件:ondblcick。
1-3鼠標(biāo)移入事件:onmouseover少用，因?yàn)槿绻迫氲氖撬淖釉匾矔?huì)觸發(fā)事件 onmouseevent(常用)只會(huì)在鼠標(biāo)移入當(dāng)前元素的時(shí)候才會(huì)觸發(fā)。?
1-4鼠標(biāo)移出事件:onmouseout(少用)同理onmouseleave(常用)。
1-5鼠標(biāo)移動(dòng)事件:onmousemove。
1-6鼠標(biāo)按下事件:onmousedown。
1-7鼠標(biāo)彈起事件:onmouseup。
1-8焦點(diǎn)事件:
onfocus? 獲得焦點(diǎn)?
onblur 失去焦點(diǎn)。---當(dāng)點(diǎn)擊輸入框時(shí)有光標(biāo)在閃就是獲得了焦點(diǎn)。離開就是失去焦點(diǎn)。
1-9滾動(dòng)事件:，onscroll? ?滾動(dòng)時(shí)觸發(fā)。
1-10window對(duì)象的兩個(gè)事件：
window.onloda? 頁(yè)面加載完畢時(shí)觸發(fā)。 window.onunload:頁(yè)面關(guān)閉時(shí)觸發(fā)。??
補(bǔ)充:window的兩個(gè)方法：window.open('地址')--打開某個(gè)網(wǎng)頁(yè)。window.close()關(guān)閉網(wǎng)頁(yè)。
1-11實(shí)現(xiàn)拖拽以及拖拽有關(guān)的事件：
實(shí)現(xiàn)拖拽：先加鼠標(biāo)按下事件，再按下事件里給頁(yè)面(相對(duì)于哪里移動(dòng)就給哪里加)加鼠標(biāo)移動(dòng)事件。? 拖拽盒子還要考慮margin帶來(lái)的影響，要減去margin。
跟拖拽有關(guān)的事件：ondragstart:拖拽開始??
?ondrag:拖拽中?
??ondragend:拖拽結(jié)束
H5新增的一個(gè)強(qiáng)行拖：加一個(gè)行內(nèi)屬性draggable='true'
1-12跟容器有關(guān)的事件：
oodragenter:有元素拖拽進(jìn)容器時(shí)觸發(fā)。
ondragleave:有元素拖拽離開容器時(shí)觸發(fā)。??
ondrop:有元素拖拽到我的范圍內(nèi)并松手時(shí)觸發(fā)：ondrapover:主要是配合ondrop使用，一定要在over事件里調(diào)用事件對(duì)象，preventDefault()才能讓ondrop觸發(fā)。
1-13:關(guān)于鍵盤事件：
onkeyup:鍵盤彈起事件
onkeydown：鍵盤按下事件，任何按鍵都可以觸發(fā)，獲取按鍵不會(huì)區(qū)分大小寫，統(tǒng)一當(dāng)大寫
onkeypress:鍵盤按下事件，只有內(nèi)容按鍵可以觸發(fā)，獲取按鍵會(huì)區(qū)分大小寫。
獲取鍵盤按下的是哪個(gè)鍵兼容寫法：var code = e.keyCode || e.charCode || e.which;
1-14:onresize:
當(dāng)尺寸發(fā)生改變時(shí)就會(huì)觸發(fā)的事件，可以模擬響應(yīng)式布局。
4.處理事件的函數(shù)體:
就是指函數(shù)內(nèi)產(chǎn)生效果的代碼或方法，實(shí)現(xiàn)代碼的效果邏輯。
addEventListener：添加事件
作用：主要用來(lái)添加一個(gè)事件，如果添加同名事件，不會(huì)覆蓋，會(huì)依次執(zhí)行，如果用on添加事件名相同的會(huì)被覆蓋。IE8不支持。
寫法：元素.addEventListener('事件名不要加on',function(){})
IE8支持添加同名事件的方法：attachEvent('事件名要加on',function(){})
如何移除事件：用什么方式添加就用什么方式刪除：
addEventListener 就用 removeEventListener方法 如果添加事件時(shí)用的是匿名函數(shù) 那么無(wú)法用removeEventListener方法刪除
用onclick 就用onclick=null方法刪除
attachEvent只能用detachEvent來(lái)移除 他也不能移出匿名添加的事件
阻止事件默認(rèn)行為:
e.preventDefault()
完整的事件觸發(fā)過(guò)程?：
一次完整的事件觸發(fā)過(guò)程有三個(gè)階段：1.捕獲階段(從上往下)? ?2.目標(biāo)階段(也叫找到事件源)? 3.冒泡階段(從下往上) 。 在事件里可以通過(guò)事件對(duì)象e.eventPhase來(lái)獲取當(dāng)前在哪個(gè)階段。
事件捕獲：
事件捕獲是一種現(xiàn)象，它與事件冒泡相反，事件捕獲是從window開始一級(jí)一級(jí)往下調(diào)用同名事件，直到真正觸發(fā)事件的那個(gè)元素，事件捕獲默認(rèn)看不到。
要想看到事件捕獲要用addEventListener 添加事件，并且寫第三個(gè)參數(shù)寫為true 不然其他默認(rèn)都是事件冒泡。?
寫法：
元素.addEventListener('click',function( ){ },true)
目標(biāo)階段：
就是找到觸發(fā)事件的那個(gè)元素?？梢杂胑.target獲取事件源(目標(biāo)元素)。
兼容寫法：
var target = e.target || e.srcElement;
事件冒泡：
事件冒泡是種現(xiàn)象，當(dāng)一個(gè)元素的事件觸發(fā)后會(huì)依次一級(jí)一級(jí)的往上調(diào)用父元素的同名事件直到window為止---事件冒泡默認(rèn)存在。
好處：給父元素加事件就相當(dāng)于給所有子元素都加了事件，(事件委托)。
影響：如果子元素和父元素有同名事件，而且子元素和父元素的同名事件的代碼執(zhí)行邏輯是相反的那么就會(huì)有影響。
阻止派發(fā)：
e.stopPropagation(); 用來(lái)阻止事件冒泡或捕獲。?
IE8里只有冒泡 沒有捕獲? ??IE8阻止冒泡的方法：e.cancelBubble = true;
事件里的this：
當(dāng)前處理事件的是誰(shuí)，那么this就是誰(shuí)
換句話說(shuō)，當(dāng)前調(diào)用的是誰(shuí)的事件，那么this就是誰(shuí)
隨機(jī)算數(shù)法：
parsenlnt(Math.random()*100+1)? 生成0-100的隨機(jī)數(shù)
parsenlnt--轉(zhuǎn)整數(shù)。Math.random 生成0-1的隨機(jī)數(shù) 100+1：他生成的是0-99 一百個(gè)數(shù)，所以為了保證到100 還要+1
禁用/啟用：
行內(nèi)屬性：disabled? ?為true表示禁用，為false表示啟用。在行內(nèi)加上默認(rèn)為true
類似的屬性有：checked：指在頁(yè)面加載時(shí)應(yīng)該被預(yù)先選定的 input 元素。??
selected：在select下拉欄中預(yù)先選擇一個(gè)選項(xiàng)
克隆元素：
元素.cloneNode();//克隆一個(gè)元素出來(lái) 傳：true代表深克隆 傳false代表淺克隆，深克隆會(huì)克隆事件，淺克隆不會(huì)。
阻止a標(biāo)簽跳轉(zhuǎn)的三個(gè)方法:
1.給它一個(gè)點(diǎn)擊事件，里面寫個(gè)return：false；
2.在行內(nèi)href里寫javascript:void(0)，意思是讓js來(lái)執(zhí)行，而js執(zhí)行為0就是默認(rèn)不執(zhí)行
3.阻止他的默認(rèn)行為：e.preventDefault。
H5新增儲(chǔ)存:
1.本地存儲(chǔ)localstorage:只要你不刪除就會(huì)一直存在,只能存字符串，數(shù)值也會(huì)被他調(diào)用toString()方法轉(zhuǎn)成字符串。儲(chǔ)存形式(key,value)。
2.如果就是想存數(shù)組和對(duì)象怎么辦？可以把他們轉(zhuǎn)成JSON格式的字符串，這種字符串本質(zhì)也是字符串，只不過(guò)表示數(shù)組也可以表示對(duì)象。var b =" {'key1':'value1','key2','value2'} "格式?
方法：
1.保存數(shù)據(jù):setltem? ? localStorage.setltem('key','value')；
2.獲取數(shù)據(jù):getltem? ?localStorage.getltem('key');
3.刪除一個(gè)數(shù)據(jù):removeltem? ?localStorage.removeltem('key');
4.刪除所有: clear? localStorage.clear();? ()里不用傳任何東西.
2.sessionstorage:可以短暫性的存儲(chǔ)在瀏覽器里，關(guān)閉瀏覽器時(shí)就會(huì)刪除。一般用于多頁(yè)面?zhèn)髦?，（網(wǎng)頁(yè)注冊(cè)，關(guān)閉不再提醒功能等）。用法與localStorage一樣。
H5之前cookies：
cookie:儲(chǔ)存數(shù)據(jù)，當(dāng)用戶訪問某個(gè)網(wǎng)站時(shí)可以通過(guò)cookie來(lái)向訪問者電腦存儲(chǔ)數(shù)據(jù)。默認(rèn)是臨時(shí)儲(chǔ)存，瀏覽器關(guān)閉時(shí)刪除。
cookie的特點(diǎn)：1.儲(chǔ)存限制一域名100個(gè)cookie 每組值大小為4k而?localStorage有5M。2.cookie的個(gè)數(shù)有限，不同瀏覽器存放的個(gè)數(shù)不同。3.cookie的數(shù)據(jù)可以設(shè)置名字。4.客戶端、服務(wù)器端，都會(huì)請(qǐng)求服務(wù)器（頭信息）頁(yè)面間的cookie是共享的（同一個(gè)瀏覽器下的）。
優(yōu)點(diǎn)：幾乎所有瀏覽器都兼容? ?缺點(diǎn):每次請(qǐng)求頭信息都會(huì)帶上大小限制為4k的信息主頁(yè)面污染
兩者的區(qū)別：
1.兩者都是保存數(shù)據(jù)到用戶瀏覽器中，儲(chǔ)存容量 web storage要比cookie大。cookie相對(duì)的更適合保存很小的數(shù)據(jù)。
2.cookie的作用時(shí)與服務(wù)器交互? 也就是cookie在瀏覽器和服務(wù)器之間來(lái)回傳遞，而web storage主要是為了本地存儲(chǔ)，只會(huì)保存在本地。
3.web storage 有著setItem,getItem等方法，而cookie需要自己封裝，（雖然網(wǎng)上也有，但是也不是很靠譜）。
4.保存的時(shí)間不同：cookie關(guān)閉瀏覽器就自動(dòng)刪除了，而localStorage只要不刪除就會(huì)一直存在
兩個(gè)好用的思想：
排他思想：讓其它兄弟恢復(fù)默認(rèn)，自己特殊。
//找到所有按鈕：var btnList = document.getElementsByTagName('input');
//遍歷所有按鈕加點(diǎn)擊事件 for(let i =0 i<btnList.length;i++){
//先把兄弟類名都恢復(fù)成默認(rèn)//for(let j = 0 j<btnList.length;j++){
btnList[i].className='';
}
//只讓自己特殊 this.className ='green';
}
JQuery也有類似的：
$("input").mouseevent(function () {
? ? ? ? ? ? ? ? //讓中間ul中的li對(duì)應(yīng)索引值的顯示，其他隱藏；
//? ? ? ? ? ? ? ? alert($(this).index());? jquery方法獲取索引值
? ? ? ? ? ? ? ? var num = $(this).index();
//獲取這個(gè)input下標(biāo)讓這個(gè)input有這個(gè)class就刪掉沒有就加上? ? ? ? ? ? ? ?
$("input").eq(num).toggleClass('green')
? ? ? ? ? ? });
開關(guān)思想：用于判斷某一個(gè)值在不在里面的時(shí)候可以用:
//我要判斷數(shù)字10在不在arr數(shù)組里面
var num = 10;
let arr = [55,100,200,444,102,890,1];
//立個(gè)flag（開關(guān)）假設(shè)10不在arr數(shù)組里
let flag = true;
for(let = i; i<arr.length; i++ ){
if(arr[i]==num){
console.log('在里面');
flag = false;
break;
}
}
if(flag==true){
//如果flag還為true，表示不在里面，我們假設(shè)成立，就直接log
console.log('不在里面')
//循環(huán)完了才知道num在不在里面
}
Web Api 操作屬性的方式：
第一種：元素.屬性的方式：修改時(shí)有帶-的要把-去掉首字母大寫。如：margin-top?
如：修改img的src：img.src = '路徑'。修改單標(biāo)簽按鈕的文字：button.value ='文字'。
這種操作屬性的方式只能獲取行內(nèi)的自帶屬性，無(wú)法訪問自定義屬性。什么是自定義屬性呢？就是自己寫的一些屬性，如：shengao = 168, tizhong = 120 這種自己寫的，用這種方式無(wú)法獲取到。像img的src就是自帶的屬性，下面來(lái)介紹另一種操作屬性的方法，它可以獲取自定義屬性。
第二種：getAttribute,setAttribute,removeAttribute
getAttribute:
可以獲取行內(nèi)的所有屬性，不管是自帶的還是自定義的，獲取到的屬性的值都是字符串。缺點(diǎn)：不能遍歷。
獲取方法：元素.getAttribute(’屬性名‘)；
setAttribute:
可以修改所有的屬性，不管是自帶的還是自定義的。如果這個(gè)屬性之前不存在就相當(dāng)于加了一個(gè)新屬性
設(shè)置方法：元素.setAttribute('屬性名','屬性值')；
removeAttribute:
可以刪除屬性，不管是自帶的還是自定義的。
刪除方法：元素.removeAttribute('屬性名')；
補(bǔ)充,H5新增的操作屬性方法：
講解：H5里面推薦大家寫自定義屬性時(shí)，前面加一個(gè)data-? 他們會(huì)統(tǒng)一保存在dataset屬性里面，dataset 是一個(gè)對(duì)象，取值時(shí)用元素.dataset['屬性名']獲取 ，且要遵守駝峰命名法（帶-的去掉-后面字母大寫）。
getComputedStyle獲取最終樣式：
getComputedStyle可以獲取某個(gè)元素的最終樣式，不管是行內(nèi)的還是內(nèi)嵌的還是外聯(lián)的。它返回的是個(gè)對(duì)象，這個(gè)對(duì)象包括了這個(gè)元素的所有屬性。
用法：window.getComputeStyle(元素,'偽元素')；取出這個(gè)元素的所有屬性。第二個(gè)參數(shù)不需要找可以不寫，一般不用，代表找哪個(gè)偽元素。
要單獨(dú)取出用getComputedStyle(box)['width']--代表取出box的寬。?
這個(gè)方法有兼容問題：兼容方法：
if(window.getComputedStyle){ window.getComputedStyle(元素,null)['屬性']}else{ 元素.currentStyle['屬性']}
currentStyle:
用法:元素.currentStyle['width'];一樣是獲取元素的最終樣式不過(guò)谷歌不支持，只支持IE8及之前
操作類的方法：
元素.className;//獲取這個(gè)元素的所有類
元素.className = 值 //賦值什么這個(gè)元素的類就是什么
如果要添加一個(gè)類可以用+= 但是記得前面加空格 例: 元素.className +=" green"http://加一個(gè)類
H5新增的操作類的方法：
classList 他是一個(gè)偽數(shù)組 他保存了元素身上所有的類。
元素.classList.add();添加一個(gè)類
元素.classList.remove();刪除一個(gè)類
元素.classList.toggle();切換一個(gè)類
元素.classList.replace('參數(shù)1','參數(shù)2');替換一個(gè)類? 參數(shù)1：被替換的類，參數(shù)2：要替換的新類
元素.classList.contains();判斷有沒有某個(gè)類，返回true/false
了解文檔樹：
文檔：document，網(wǎng)頁(yè)中所有的內(nèi)容其實(shí)都在document里，所有的內(nèi)容都是由document開支散葉而來(lái)的，像樹一樣，所以我們也叫他文檔樹，如果我要在body下設(shè)置個(gè)a標(biāo)簽，就相當(dāng)于在這個(gè)body下面再掛一個(gè)新分支a。
了解節(jié)點(diǎn)：
網(wǎng)頁(yè)中的所有內(nèi)容都叫節(jié)點(diǎn)，屬性，標(biāo)簽，文本，注釋都叫內(nèi)容，也稱之為節(jié)點(diǎn)。
節(jié)點(diǎn)有三大屬性：
nodeType：節(jié)點(diǎn)類型
nodeType:節(jié)點(diǎn)名字
nodeValue：節(jié)點(diǎn)值
元素節(jié)點(diǎn)的特征：
nodeType:1? ?作用：在拿到一個(gè)節(jié)點(diǎn)時(shí)，不知道他是什么，就可以判斷他的nodeType是否為1，為1就代表標(biāo)簽
nodeName:大寫的標(biāo)簽 作用：在拿到一個(gè)節(jié)點(diǎn)時(shí)，我確定他是一個(gè)標(biāo)簽，不知道他是哪個(gè)標(biāo)簽，就可以判斷他的nodeName
nodeValue：null
其它的節(jié)點(diǎn)就不一一列舉。
創(chuàng)建元素的三種方式：
1.document.write()? 只能給body加內(nèi)容，而且會(huì)覆蓋原來(lái)的內(nèi)容
2.xxx.innerHTML 給xxx添加內(nèi)容也會(huì)覆蓋原來(lái)內(nèi)容，如果在原有基礎(chǔ)上添加就用+=
3.innerText與innerHTML的取值與賦值：
取值：innerText：只能獲取文本。 innerHTML:獲取所有內(nèi)容，包括標(biāo)簽
賦值：innerText:如果賦的是標(biāo)簽會(huì)把標(biāo)簽也當(dāng)文本解析。innerHTML則會(huì)把標(biāo)簽解析出來(lái)
4.document.createElement();? 創(chuàng)建出一個(gè)標(biāo)簽，但是只存在與內(nèi)存中，頁(yè)面不顯示，要顯示要調(diào)用xxx.appendChild()代表加到xxx里面。
子元素與父元素：
獲取父元素：xxx.parentNode:獲取父元素。
操作子元素：
操作子元素都要調(diào)用父元素的方法：
刪除：removeChild? ?刪除子元素?zé)o法自行刪除，要通過(guò)父元素才可以刪除它
添加：appendChild? ??把新的元素，添加到xxx最后，添加已存在的相當(dāng)于把元素從原來(lái)位置移動(dòng)到了最后。
插入：insertBefore? ?可以指定插入到哪個(gè)子元素的前面。
替換:replaceChild('要替換的新元素'，被替換的元素)。
兄弟節(jié)點(diǎn)/元素：
上一個(gè)兄弟節(jié)點(diǎn)/元素：
previousSibling? 找到上一個(gè)兄弟節(jié)點(diǎn)，包括文本，注釋，標(biāo)簽。支持所有瀏覽器。
previousElementSibling? 找到上一個(gè)兄弟元素，只會(huì)找到標(biāo)簽，IE8及之前不支持。
注意：如果有換行，他會(huì)把換行也當(dāng)作一個(gè)節(jié)點(diǎn)，這可能是導(dǎo)致獲取不到標(biāo)簽的原因。
下一個(gè)兄弟節(jié)點(diǎn)/元素：
nextSibling? ?找到上一個(gè)兄弟節(jié)點(diǎn)，包括文本，注釋，標(biāo)簽。支持所有瀏覽器。
nextElementSibling? ??找到上一個(gè)兄弟元素，只會(huì)找到標(biāo)簽，IE8及之前不支持。
計(jì)時(shí)器：
setInterval('參數(shù)1','參數(shù)2'):??
作用：每隔一段時(shí)間執(zhí)行一段代碼，參數(shù)1:要執(zhí)行的代碼可以是字符串也可以是函數(shù)。參數(shù)2：間隔時(shí)間，毫秒為單位。? ?計(jì)時(shí)器一旦開啟，只要自己不寫代碼停止，它就會(huì)一直運(yùn)行。
clearInterval(ID) :停止計(jì)時(shí)器：
停止計(jì)時(shí)器需要傳入計(jì)時(shí)器的ID，ID怎么獲取？在開啟計(jì)時(shí)器的時(shí)候接受返回值(聲明變量接收)；這個(gè)返回值就是計(jì)時(shí)器的ID。
計(jì)時(shí)器還有個(gè)坑點(diǎn) 點(diǎn)擊N次會(huì)多N個(gè)定時(shí)器，怎么解決？在新的計(jì)時(shí)器開啟時(shí)先把上次的計(jì)時(shí)器停掉就好了。
setTimeOut:計(jì)時(shí)器:
setTimeOut的用法是與setInterval一樣的，只不過(guò)setTimeOut它只會(huì)執(zhí)行一次，setTimeOut多用于讓某一段代碼可以延遲執(zhí)行，參數(shù)1:要執(zhí)行的代碼，參數(shù)2：延遲執(zhí)行的秒數(shù)。
OffSet家族：
offsetWidth:獲取盒子的最終寬,(包括padding,boder)。
offsetHeight:獲取盒子的最終高,(包括padding,boder)。
offsetLeft : 獲取自身左外邊框到定位父級(jí)的左內(nèi)邊框的距離(就是自身左外邊框到父級(jí)的左內(nèi)邊框的距離)。
offaetTop：獲取自身上外邊框到定位父級(jí)的上內(nèi)邊框的距離(就是自身上外邊框到父級(jí)的上內(nèi)邊框的距離)。
注意：以上幾個(gè)元素只能獲取不能修改，進(jìn)行運(yùn)算時(shí)他們得出的數(shù)值不帶單位，所以還要記得帶單位，以及offset后面跟的第一個(gè)字母要大寫!
offsetParent:獲取它所參照的定位父級(jí)元素，如果是絕對(duì)定位得到為null
scroll家族：
scrollWidth和scrollHeight：
獲取內(nèi)容的總寬度和總高度。(不包括邊框，但包括padding)，只能獲取不能修改。不帶單位。
scrollLeft和scrollTop:
內(nèi)容往左滾出去的距離和內(nèi)容往上邊滾出去的距離。它可以設(shè)置設(shè)置多少滾出去多少，不會(huì)超出最大的滾動(dòng)距離。
獲取頁(yè)面滾出去的距離需要做兼容，獲取盒子滾出去的距離不用。
//獲得頁(yè)面往上滾出去的距離var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
//獲得頁(yè)面往下滾出去的距離var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
client家族：
clientWidth和clientHeight
獲取某個(gè)元素可視區(qū)域的寬和高
clientLeft和clientTop
獲取的是左邊框的寬度和上邊框的寬度
client獲取的值都不帶單位，也不可以修改。寫法：元素.clientWidth--(獲取某個(gè)元素的可視區(qū)域的寬)。
兼容寫法：
var clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
