title: javascript（BOM常用方法）
date: 2017-06-01 17:29:52
tags: javascript筆記
BOM操作的常用屬性和方法
open()：打開一個(gè)新的頁面，格式為open(頁面的url,打開的方式)，如果url為空則打開一個(gè)空白頁面。如果打開方式為空，默認(rèn)為新窗口方式打開。這個(gè)方法返回新窗口的window對象。
close()：關(guān)閉一個(gè)頁面，但是這個(gè)方法有點(diǎn)兼容性問題，firefox默認(rèn)無法關(guān)閉，chrome默認(rèn)直接關(guān)閉，ie：詢問用戶。
navigator.userAgent：返回瀏覽器的名稱和版本。
location：瀏覽器地址信息，本身不是字符串，是object格式。
location：就是url地址本身。
location.search：url中?后面的內(nèi)容。
location.hash：url中#后面的內(nèi)容。
窗口尺寸與大小
可視區(qū)的尺寸：document.documentElement.clientWidth和document.documentElement.clientHeight。
滾動(dòng)條滾動(dòng)的距離：document.documentElement.scrollTop和document.documentElement.scrollLeft。在chrome瀏覽器中要使用document.body.scrollTop和document.body.scrollLeft。
元素內(nèi)容的寬高：div.scrollHeight和div.scrollWidth。
文檔的寬高：document.documentElement.offsetHeight和document.documentElement.offsetWidth。也可以使用document.body.offsetHeight和document.body.offsetWidth。
事件
onscroll：當(dāng)滾動(dòng)條滾動(dòng)的時(shí)候觸發(fā)。
onresize：當(dāng)瀏覽器尺寸改變的時(shí)候觸發(fā)。
onfocus：當(dāng)元素獲取焦點(diǎn)時(shí)觸發(fā)。
onblur：當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)。
focus()：給元素設(shè)置焦點(diǎn)。
blur()：讓元素失去焦點(diǎn)。
select()：選擇指定元素里面的文本內(nèi)容。只能選擇用戶可以輸入的內(nèi)容。
onmousemove：鼠標(biāo)在一個(gè)元素上移動(dòng)時(shí)觸發(fā)。
onkeydown：當(dāng)鍵盤按鍵按下的時(shí)候觸發(fā)。能夠響應(yīng)用戶輸入的元素才支持鍵盤事件，和焦點(diǎn)事件一樣。如果按下不抬起來會(huì)連續(xù)觸發(fā)。
onkeyup：當(dāng)鍵盤按鍵抬起時(shí)觸發(fā)。
oncontextmenu：當(dāng)右鍵菜單顯示出來時(shí)觸發(fā)。
event事件對象：當(dāng)一個(gè)事件發(fā)生時(shí)，這個(gè)對象發(fā)生的這個(gè)事件有關(guān)的一些詳細(xì)的信息都會(huì)臨時(shí)保存到event對象中，以便在需要時(shí)使用。
事件綁定
標(biāo)準(zhǔn)瀏覽器的方法：div.addEventListener(事件名稱，事件處理函數(shù)，捕獲/冒泡);。false是冒泡，true是捕獲。
有捕獲。
事件名稱沒有on。
this指向調(diào)用該函數(shù)的對象。
事件執(zhí)行的順序是正序。
非標(biāo)準(zhǔn)瀏覽器方法：div.attachEvent('on'+事件名稱，事件處理函數(shù));
沒有捕獲。
事件名稱有on。
this指向window(可以通過call()來解決這個(gè)問題)。
事件執(zhí)行的順序是倒序。
事件取消
非標(biāo)準(zhǔn)瀏覽器方法：div.dettachEvent('on'+事件名稱,事件處理函數(shù));
標(biāo)準(zhǔn)瀏覽器方法：div.removeEventListener(事件名稱，事件處理函數(shù)，捕獲/冒泡)
事件流
事件流和樣式位置沒關(guān)系，和html的結(jié)構(gòu)有關(guān)系
事件冒泡：當(dāng)一個(gè)元素接收到事件的時(shí)候，會(huì)把它接收到的所有事件傳播給它的父級，一直到頂層(window)。父級元素只要有相關(guān)的事件處理函數(shù)，那么就會(huì)被執(zhí)行。阻止冒泡設(shè)置事件函數(shù)：event.cancelBubble = true;
冒泡最主要的作用是父元素和子元素都需要的事件處理函數(shù)，只需要綁定給父元素就可以了，而如果希望只有子元素才執(zhí)行的事件處理函數(shù)可以通過設(shè)置阻止冒泡來接解決。
事件捕獲：捕獲和冒泡相反，是從最外層元素傳播到目標(biāo)元素。其他并沒什么不同。
控制事件是捕獲還是冒泡是由addEventListener中的第三個(gè)參數(shù)決定的，false為冒泡事件監(jiān)控是出去的由內(nèi)向外的，true為捕獲事件監(jiān)控是進(jìn)來的由外向內(nèi)的。
cookie
cookie的作用就是存儲(chǔ)數(shù)據(jù)。長時(shí)間去保存一個(gè)值，比如用戶上次訪問的時(shí)間等。
當(dāng)用戶訪問了某個(gè)網(wǎng)站時(shí)候，可以通過cookie向訪問者的電腦上存儲(chǔ)數(shù)據(jù)，每個(gè)瀏覽器存儲(chǔ)的位置不同，所以不同瀏覽器存儲(chǔ)的cookie不能互相通用。
cookie的存儲(chǔ)是以域名的形式區(qū)分的，也就是說每個(gè)網(wǎng)站的cookie文件是不同文件夾存放的，一個(gè)域名下的cookie也可能有多個(gè)文件。所以每個(gè)cookie文件是可以設(shè)置名字的。否則cookie文件會(huì)很大很亂。
document.cookie = 'username=ypj';這就設(shè)置了一個(gè)cookie文件的名字和值。
document.cookie;讀取當(dāng)前網(wǎng)站下的下所有的cookie的內(nèi)容，是字符串格式。
一個(gè)域名下存放cookie的個(gè)數(shù)是有限制的，不同瀏覽器存放的個(gè)數(shù)不同。
每個(gè)cookie存放的內(nèi)容大小也是有限制的，也是根據(jù)瀏覽器不同限制也不同。
默認(rèn)情況下，cookie的周期是整個(gè)瀏覽器結(jié)束進(jìn)程的時(shí)候。
如果想長時(shí)間存放一個(gè)cookie，需要在設(shè)置這個(gè)cookie的時(shí)候同時(shí)給他設(shè)置一個(gè)過期的時(shí)間。當(dāng)過期后cookie就會(huì)被銷毀。
var oDate = new Date();
oDate.setDate(oDate.getDate() + 5); // 保存5天
document.cookie = 'username=ypj;expires=' + oDate.toGMTString() // 將oDate又object轉(zhuǎn)為string;
cookie在存儲(chǔ)特殊字符的時(shí)候可能會(huì)出現(xiàn)問題，需要通過encodeURI()編碼來解決。解碼使用decodeURI()方法。參數(shù)都是字符。
用js讀取cookie時(shí)候只能獲取整個(gè)字符串，沒法直接獲取某個(gè)cookie的鍵值，同樣設(shè)置的時(shí)候也不方便，所以可以寫兩個(gè)方法來方便操作。
獲取cookie
function getCookie(key){
var arr1 = document.cookie.split(';');
for(var i = 0;i < arr1.length;i++){
var arr2 = arr1[i].split('=');
if(arr2[0] == key){
return decodeURI(arr[1]);
}
}
}
設(shè)置cookie
function setCookie(key,value,t){
var oDate = new Date();
oDate.setDate(oDate.getDate() + t);
document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}
刪除cookie
function removeCookie(key){
setCookie(key,'',-1);
}
