Javascript BOM學習小結(六)
1、BOM簡介。
所謂的BOM即瀏覽器對象模型（Browser Object Model）。BOM賦予了JS操作瀏覽器的能力，即window操作。DOM則用于創(chuàng)建刪除節(jié)點，操作HTML文檔。BOM尚無正式的標準，導致各瀏覽器對于BOM方法的支持各有不同，因此需要具體問題具體對待。
2、window對象。
window對象是BOM的核心，window對象指當前的瀏覽器窗口。所有JS全局對象、函數以及變量都屬于window對象。全局變量是window對象的屬性。全局函數是window對象的方法。甚至DOM的document也屬于window對象的屬性之一，只是大多數情況下可以忽略不寫。
window對象方法： 
3、窗口操作。
(1)、打開窗口。
open() 方法可用于打開新窗口。
語法：window.open(url, name/target, 窗口設置, replace)
該方法的三個參數都是可選的，默認在新頁面打開一個空白頁。第一個參數可設置要打開窗口的路徑。第二個參數規(guī)定在何處打開新窗口，也可用于指定窗口的名稱。第三個參數設置窗口參數，多個參數可用逗號分隔。如果有第一個參數，后面兩個參數可省略，則在新頁面打開。第二個參數一般無需設置，如果要規(guī)定窗口的參數，則必須有第二個參數，必須為'_blank'，或者用'',代替，并且距離屏幕頂部不能為0，否則失效，如果設置了左邊距離，頂部可設置為0。最后一個參數規(guī)定加載到窗口的URL是在窗口的瀏覽歷史中創(chuàng)建一個條目，還是替換瀏覽器歷史中的當前條目，值為true或false， 值為true時URL替換瀏覽歷史中的當前條目，為false時URL在瀏覽歷史中創(chuàng)建新的條目。
下表是一些常用的窗口設置參數：
實例：點擊按鈕，在新窗口打開百度首頁，寬600，高400，距屏頂0像素，屏左10像素。
<body>
<input type="button" onClick="newWin()" value="點擊我，打開新窗口!">
<script>
function newWin(){
window.open('http://www.baidu.com', '_blank', 'width=,height=,top=,left=');
}
</script>
</body>
該實例在IE下并不會打開一個自定義的窗口，而是新打開一個標簽頁。
如果在腳本中直接打開新窗口，在Chrome和FF下會被當作廣告彈窗直接攔截，但是在IE下可以正常顯示。360瀏覽器的極速模式使用的是Chrome的內核，兼容模式則使用的IE內核，360瀏覽器使用人群相對較多，這里就不描述了，只要其余瀏覽器正常運行，他就沒什么問題。
<script>
window.open();
window.open('http://baidu.com');
</script>
實例：獲得焦點和失去焦點
<body>
<input type="button" value="獲得焦點" onclick="openWin()">
<script>
//確保新的窗口獲得焦點：
function openWin(){
var oGet=window.open('', '', 'width=,height=');
oGet.document.write('<p>我是新打開的窗口</p>');
oGet.focus();
}
</script>
<input type="button" value="失去焦點" onclick="newWin()">
<script>
//確保新的窗口沒有獲得焦點：
function newWin(){
var lose=window.open('', '', 'width=,height=');
lose.document.write('<p>我是新打開的窗口</p>');
lose.blur();
}
</script>
</body>
實例：返回新打開窗口的名稱
<body>
<input type="button" value="打開" onclick="openWin()">
<script>
function openWin(){
var newWin=window.open('', 'newWindow', 'width=,height=');
newWin.document.write('<p>新窗口名稱：'+ newWin.name + '</p>');
}
</script>
</body>
實例：打開新窗口向父窗口傳遞信息
<body>
<input type="button" value="打開" onclick="openWin()">
<script>
function openWin(){
var newWin=window.open('', '', 'width=,height=');
newWin.document.write("<p>關閉我之后會向父窗口輸入文本信息</p>");
newWin.focus();
newWin.opener.document.write('<p>我是父窗口，加載完成后，向我輸出內容會覆蓋我所有內容</p>');
}
</script>
</body>
實例：指定窗口大小、移動窗口和滾動內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript實例</title>
</head>
<body>
<br><br>
<h>用指定像素調整窗口大小：</h>
<input type="button" value="打開" onclick="openWin()"><br><br>
<input type="button" value="調整" onclick="byWin()">
<script>
var w;
function openWin(){
w=window.open('', '', 'width=,height=,top=');
w.focus();
}
function byWin(){
//如果不使用框架，可使用window代替top
w.top.resizeBy(,);
w.focus();
}
</script>
<h>將窗口的大小調整到指定的寬度和高度：</h>
<input type="button" value="打開" onclick="newWin()"><br><br>
<input type="button" value="調整" onclick="toWin()">
<script>
var w;
function newWin(){
w=window.open('', '', 'width=,height=');
w.focus();
}
function toWin(){
w.resizeTo(,);
w.focus();
}
</script>
<h>相對于當前位置移動新窗口：</h>
<input type="button" value="打開" onclick="oWin()"><br><br>
<input type="button" value="多移動幾下" onclick="moveWin()">
<script>
var w;
function oWin(){
w=window.open('', '', 'width=,height=');
}
function moveWin(){
w.moveBy(,);
w.focus();
}
</script>
<h>移動新窗口到指定位置：</h>
<input type="button" value="打開" onclick="nWin()"><br><br>
<input type="button" value="移動" onclick="moveToWin()">
<script>
var w;
function nWin(){
w=window.open('', '', 'width=,height=');
}
function moveToWin(){
w.moveTo(,);
w.focus();
}
</script>
<h>由指定的像素數滾動內容：</h>
<input type="button" style="position:fixed;top:;" onclick="scrollWin()" value="由指定的像素數滾動內容">
<script>
function scrollWin(){
window.scrollBy(,);
}
</script>
<h>滾動到指定內容處：</h>
<input type="button" onclick="scrollWindow()" value="滾動到指定內容處">
<script>
function scrollWindow(){
window.scrollTo(,);
}
</script>
<br><br><br><br><br><br>
</body>
</html>
方法解析：
resizeBy(w, h)：根據指定的像素來調整窗口的大小。該方法定義指定窗口的右下角移動的像素，左上角將不會被移動(它停留在其原來的坐標)。
該方法有兩個參數，第一個參數是必需的，指定窗口寬度增加的像素數。第二個參數可選，指定窗口高度增加的像素數。兩個參數可為正數，也可為負數。
resizeTo(w, h)：用于把窗口大小調整為指定的寬度和高度。
該方法兩個參數都是必需的，用來指定設置窗口的寬度和高度，以像素計。
moveBy(xnum, ynum)：可相對窗口的當前坐標把它移動指定的像素。
該方法有兩個參數，第一個參數指定要把窗口右移的像素數，第二個參數指定要把窗口下移的像素數。
moveTo(x, y)：可把窗口的左上角移動到一個指定的坐標。
該方法有兩個參數，第一個參數指定窗口新位置的 x 坐標，第二個參數指定窗口新位置的 y 坐標。
scrollBy(xnum, ynum)：可把內容滾動指定的像素數。
該方法有兩個必需參數，第一個參數指定把文檔向右滾動的像素數。第二個參數指定把文檔向下滾動的像素數。
scrollTo(x, y)：可把內容滾動到指定的坐標。
該方法有兩個必需參數，第一個指定要在窗口文檔顯示區(qū)左上角顯示的文檔的 x 坐標。第二個參數指定要在窗口文檔顯示區(qū)左上角顯示的文檔的 y 坐標。
實例：打印當前頁面
<body>
<input type="button" value="打印當前頁面" onclick="printpage()">
<script>
function printpage(){
window.print();
}
</script>
</body>
(2)、關閉窗口。
window.close()方法可用于關閉當前窗口。
//點擊按鈕關閉當前窗口 <input type="button" value="關閉窗口" onclick="window.close()">
該方法在Chrome下運行正常。IE下彈窗提示：你查看的網頁正在試圖關閉選項卡，是否關閉選項卡？點擊否，不關閉，點擊是，關閉窗口。在FF下會報錯。因為在FF下不允許腳本關閉非腳本打開的窗口，也就是不能關閉一個用戶自己打開的窗口，只能關閉由open打開的窗口。所以可以先用open打開，再關閉，這樣就能解決FF下不能關閉的問題。這就需要創(chuàng)建兩個文檔來演示該問題：第二個文檔使用上面實例保存為close.html，第一個文檔如下：
//先用open打開保存的文檔，然后再點擊關閉窗口按鈕，效果就達到了
<input type="button" value="打開窗口" onclick="window.open('close.html');">
FF瀏覽器的安全機制比較高，不能關閉用戶打開的窗口，在網上也沒找有找到什么好的辦法，只能修改瀏覽器的默認配置，顯然這是不可取的。上面的辦法比較笨，另辟蹊蹺不能關閉用戶打開的，那就自己open一個再close，但這還是比較實在的方法，至少目的是達到了。
在IE下可使用下面的代碼關閉當前窗口，不彈窗提示。同時也適用于Chrome。這里使用a標簽在FF下可以看到報錯，使用按鈕則沒有報錯信息。
<a href="javascript:window.opener=null;window.open('', '_self');window.close();">關閉</a>
實例：關閉新打開的窗口
<body>
<input type="button" value="打開" onclick="openWin()">
<input type="button" value="關閉" onclick="closeWin()">
<script>
function openWin(){
newWin=window.open('http://www.baidu.com', '', 'width=,height=,top=');
}
function closeWin(){
newWin.close();
}
</script>
</body>
實例：檢查新窗口是否已關閉
<body>
<input type="button" value="打開'" onclick="openWin()">
<input type="button" value="關閉" onclick="closeWin()">
<input type="button" value="是否關閉" onclick="checkWin()">
<p id="p"></p>
<script>
var newWin;
function openWin(){
newWin=window.open('', '', 'width=,height=,top=');
}
function closeWin(){
if(newWin){
newWin.close();
}
}
var oP=document.getElementById('p');
function checkWin(){
if(!newWin){
oP.innerHTML='新窗口還沒被打開！';
}
else{
if(newWin.closed){
oP.innerHTML='新窗口已關閉！';
}
else{
oP.innerHTML='新窗口未關閉！';
}
}
}
</script>
</body>
4、瀏覽器信息。
window.navigator對象獲取包含有關訪問者瀏覽器的信息。該屬性在使用時可以不加window前綴。
<body>
<div id="div"></div>
<script>
txt = '<p>Browser CodeName（瀏覽器代碼名稱）: ' + navigator.appCodeName + '</p>';
txt+= '<p>Browser Name（瀏覽器名稱）: ' + navigator.appName + '</p>';
txt+= '<p>Browser Version（瀏覽器版本）: ' + navigator.appVersion + '</p>';
txt+= '<p>Cookies Enabled（啟用Cookies）: ' + navigator.cookieEnabled + '</p>';
txt+= '<p>Platform（操作平臺）: ' + navigator.platform + '</p>';
txt+= '<p>User-agent header（由客戶機發(fā)送服務器的 user-agent 頭部信息）: ' + navigator.userAgent + '</p>';
txt+= '<p>User-agent language（客戶機代理語言）: ' + navigator.systemLanguage + '</p>';
document.getElementById('div').innerHTML=txt;
</script>
</body>
其中最常用的屬性是navigator.userAgent，返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)，是識別瀏覽器的關鍵，可用于獲取當前瀏覽器版本信息，判斷瀏覽器的類型。
<script> document.write(navigator.userAgent); </script>
實例：簡單的判斷瀏覽器類型
<script>
document.write('操作平臺：' + navigator.platform);
function userBrowser(){
var name = window.navigator.userAgent;
//IE瀏覽器
//判斷IE和非IE可以使用ActiveXObject，只有IE支持該對象
//在IE中window.ActiveXObject返回一個對象，則判斷為true
//其他瀏覽器都返回undefine，兩個否返回false，進入或判斷，也返回false
if(!!window.ActiveXObject || 'ActiveXObject' in window){
return 'IE瀏覽器';
}
//FF瀏覽器
else if(name.indexOf('Firefox') > -){
return 'Firefox瀏覽器';
}
//Chrome瀏覽器
else if(name.indexOf('Chrome') > -){
return 'Chrome瀏覽器';
}
//Opera瀏覽器
else if(name.indexOf('Opera') > -){
return 'Opera瀏覽器';
}
//Safari瀏覽器
else if(name.indexOf('Safari') > -){
return 'Safari瀏覽器';
}
else{
return 'unknow';
}
}
alert('瀏覽器類型為：' + userBrowser());
</script>
5、頁面地址。
window.location對象用于獲得當前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面，簡單說就是可以給賦值，像使用open一樣。
語法:location.[屬性|方法]
<script> //當前頁面URL。若中間出現(xiàn)亂碼百分號是中文轉碼后的顯示。 document.write(window.location); </script> <input type="button" value="點擊查看" onclick="window.location='http://www.baidu.com','_blank'"> </body>
location對象其他應用：
(1)、location對象屬性
location.hash 設置或返回從井號(#)開始的 URL（錨）。
location.href 設置或返回完整的 URL。
location.pathname 設置或返回當前 URL 的路徑部分。
location.host 設置或返回主機名和當前 URL 的端口號。
location.hostname 設置或返回當前 URL 的主機名，不包含端口。
location.port 設置或返回當前 URL 的端口號 （80 或 443）。
location.protocol 返回所使用的 web 協(xié)議（http:// 或 https://）。
location.search 設置或返回從問號(?)開始的 URL（查詢部分）。
(2)、location對象方法
實例：加載一個新文檔
<input type="button" value="點擊加載" onclick="newDoc()">
<script>
function newDoc(){
window.location.assign('http://www.baidu.com')
}
</script>
實例：重新載入當前文檔
<input type="button" value="點擊載入" onclick="reloadPage()">
<script>
function reloadPage(){
location.reload()
}
</script>
實例：用新的文檔替換當前文檔
<input type="button" value="點擊替換" onclick="replaceDoc()">
<script>
function replaceDoc(){
window.location.replace('http://www.baidu.com')
}
</script>
6、瀏覽器尺寸。
window.screen對象用于獲取用戶的屏幕信息。在使用時候可以不加window前綴。
(1)、屏幕分辨率的寬度和高度
screen.colorDepth返回用戶瀏覽器表示的顏色位數，通常為32位（每像素的位數）。
screen.width和screen.height返回屏幕分辨率的寬度和高度。
<script>
document.write( '屏幕寬度：' + screen.width + 'px' );
document.write('<br>');
document.write( '屏幕高度：' + screen.height + 'px' );
</script>
(2)、可用寬度和高度
screen.availWidth和screen.availHeight返回窗口可以使用的屏幕寬度和高度，不包括窗口任務欄。
不同系統(tǒng)的窗口任務欄默認高度不一樣，任務欄的位置可在屏幕上下左右任何位置，所以有可能可用寬度和高度也不一樣。
<script>
document.write('可用寬度：' + screen.availWidth +'px');
document.write('<br>');
document.write('可用高度：' + screen.availHeight +'px');
</script>
7、工作區(qū)尺寸。
(1)、可視區(qū)寬度和高度。
獲取瀏覽器窗口尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法:
?、?、IE9以上及現(xiàn)在瀏覽器都支持：
window.innerWidth 獲取瀏覽器窗口的內部寬度。
window.innerHeight 獲取瀏覽器窗口的內部高度。
?、凇τ贗E9之前可以用：
document.documentElement.clientWidth 表示HTML文檔所在窗口的當前寬度。
document.documentElement.clientHeight 表示HTML文檔所在窗口的當前高度。
或者可以使用：
Document對象的body屬性對應HTML文檔的<body>標簽
document.body.clientWidth
document.body.clientHeight
在不同瀏覽器都可以使用的兼容寫法：
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
<script>
//對于IE+、Chrome、Firefox、Opera 以及 Safari：
document.write('可視寬為：'+window.innerWidth + '<br>');
document.write('可視高為：'+window.innerHeight + '<br>'+ '<br>');
document.write('可視寬為：'+document.documentElement.clientWidth + '<br>');
document.write('可視高為：'+document.documentElement.clientHeight + '<br>'+ '<br>');
//注意該方法返回的數值與其他不同
document.write('可視寬為：'+document.body.clientWidth + '<br>');
document.write('可視高為：'+document.body.clientHeight + '<br>'+ '<br>');
var w= document.documentElement.clientWidth || document.body.clientWidth;
var h= document.documentElement.clientHeight || document.body.clientHeight;
document.write('可視寬為：'+ w +'<br>'+ '可視高為：' +h);
</script>
(2)、實際網頁尺寸。
scrollHeight和scrollWidth，獲取網頁內容高度和寬度。
scrollHeight和scrollWidth還可獲取DOM元素中內容實際占用的高度和寬度。
在IE下scrollHeight 是網頁內容實際高度，可以小于clientHeight。在FF下scrollHeight 是網頁內容高度，不過最小值是 clientHeight。也就是說網頁內容實際高度小于 clientHeight 時，scrollHeight返回 clientHeight 。
在不同瀏覽器都可以使用的兼容寫法：
var w =document.documentElement.scrollWidth || document.body.scrollWidth; var h =document.documentElement.scrollHeight || document.body.scrollHeight;
<script>
//兼容性寫法
var w =document.documentElement.scrollWidth || document.body.scrollWidth;
var h=document.documentElement.scrollHeight || document.body.scrollHeight;
document.write('網頁內容寬為：'+ w +'<br>'+ '網頁內容高為：' +h);
</script>
(3)、包含滾動條的網頁尺寸。
offsetHeight和offsetWidth，獲取網頁內容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。
offsetHeight = clientHeight(內容可視區(qū)高度) + 滾動條 + 邊框。
<script>
//兼容性寫法
var w = document.documentElement.offsetWidth || document.body.offsetWidth;
var h = document.documentElement.offsetHeight || document.body.offsetHeight;
document.write('網頁內容寬為：'+ w +'<br>'+ '網頁內容高為：' +h);
</script>
(4)、滾動距離
所謂滾動距離，就是可視區(qū)距離頁面頂部滾動了多遠，也叫網頁卷去的距離。
scrollTop：設置或獲取位于對象最頂端與窗口中可見內容的最頂部之間的距離 ，也就是網頁被滾動的高度。
scrollLeft：設置或獲取位于給定對象左邊界與窗口中目前可見內容的最左端之間的距離，也就是網頁被滾動的寬度。
offsetTop：獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標的計算頂部位置，當前對象到其上級頂部的距離，或者距離頁面頂部的距離。
offsetLeft：獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置 ，當前對象到其上級左端的距離，或者距離頁面左端的距離。
offsetTop和offsetLeft不能賦值，設置對象到頁面頂部的距離可用style.top屬性，設置對象到頁面左部的距離請用style.left屬性。
offsetParent：頁面中設置postion屬性(relative、absolute、fixed)的父容器，從最近的父節(jié)點開始，一層層向上找，直到HTML的body。該屬性用于獲取一個元素用于定位的父級，語法：obj.offsetParent
實例：滾動頁面，點擊頁面查看滾動距離
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript實例</title>
<script>
//幾款瀏覽器每次滾動，距離頂部的距離都不一樣：
//在Chrome為：-----。都是整數遞進。
//而在FF下則為：----。每次遞進。
//而在IE下則為：----。每次遞進則為。
window.onload=function (){
document.onclick=function (){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
alert(scrollTop);
};
};
</script>
</head>
<body style="height:px">
</body>
</html>
該知識點相當重要，而且內容比較混亂，不容易理解，需要做大量練習，鞏固所學。
8、瀏覽器歷史記錄。
window.history對象記錄了用戶曾經瀏覽過的頁面(URL)，并可以實現(xiàn)瀏覽器前進與后退導航的功能。從窗口被打開的那一刻開始記錄，每個瀏覽器窗口、每個標簽頁乃至每個框架，都有自己的history對象與特定的window對象關聯(lián)。在使用時可以不加window前綴。
語法：window.history.[屬性|方法]
(1)、History 對象屬性
歷史記錄不唯一，所以該對象具有l(wèi)ength屬性，可返回瀏覽器歷史列表中的URL數量。
(2)、History 對象方法
?、佟istory.back() 加載 history 列表中的前一個URL，就是返回前一個頁面，與瀏覽器點擊后退按鈕功能相同。
該方法等同于：history.go(-1);
?、?、history.forward() 加載 history 列表中的下一個 URL。就是返回下一個頁面，與瀏覽器的前進按鈕功能相同。
該方法等同于：history.go(1);
③、history.go(num) 根據當前所處的頁面，加載 history 列表中的某個具體的頁面。
參數說明：1為前一個，go(1)等價forward()。0為當前頁面。-1下一個頁面，后一個，go(-1)等價back()。
也可為其他數值，指定要訪問的URL在History的URL列表中的相對位置。
比如：history.go(-2); 返回當前頁面之前瀏覽過的第二個歷史頁面，相當于點擊2次后退按鈕。
history.go(3); 返回當前頁面之后瀏覽過的第三個歷史頁面。
9、Cookie
Cookie 用于存儲 web 頁面的用戶信息。就是一些數據，比如自動登錄和記住用戶名，存儲在用戶電腦上的文本文件中，方便再次使用。當 web 服務器向瀏覽器發(fā)送 web 頁面時，在連接關閉后，服務端不會記錄用戶的信息。Cookie 的作用就是用于解決 "如何記錄客戶端的用戶信息"：當用戶訪問 web 頁面時，他的名字可以記錄在 cookie 中。在用戶下一次訪問該頁面時，可以在 cookie 中讀取用戶訪問記錄。
cookie是以域名為單位的，同一個網站中所有頁面共享一套cookie，一般不會超過50條，大小為4k-10k左右。限制數量和存儲大小，這樣也阻止了惡意網站給cookie中惡意存儲，不然一會計算機硬盤就滿了。cookie也是有過期時間的，比如網頁中的自動登錄，有些為2周內，有些為1周內，當然過期時間是可以自行定義的，用戶也可以自行清理。
在JS中使用cookie很簡單，就是document.cookie 該屬性可用來創(chuàng)建、讀取和刪除cookie。
語法：名稱=值
當瀏覽器從服務器上請求 web 頁面時， 屬于該頁面的 cookie 會被添加到該請求中。服務端通過這種方式來獲取用戶的信息。
提示：跟cookie相關的本地測試最好都用FF，只有FF會保存本地的cookie，其他瀏覽器都不會保存。在IE下也可以測試。
FF下查看方法：可點擊頁面右鍵 - 查看頁面信息 - 安全 - 查看cookie，空白的文件夾就是本地的cookie。
(1)、創(chuàng)建和讀取cookie
默認情況下，cookie屬于當前頁面并在瀏覽器關閉時刪除。
ccokie中的=不是賦值，而是添加，可多次添加，并不會發(fā)生后面將前面覆蓋的情況。
expires：有效日期，用于指定cookie的過期時間。如過不設置，瀏覽器關閉時cookie就被刪除了。
path：可用于設置cookie的路徑。
cookie可直接被讀取，或者存儲與變量中。
document.cookie 將以字符串的方式返回所有的cookie，格式： cookie1=value; cookie2=value; cookie3=value;
實例：創(chuàng)建用戶登錄信息，設置2周后過期，并讀取cookie
<script> var oD=new Date(); //從當天起天也就是周后是幾號 oD.setDate(oD.getDate()+); //設置過期時間周?？稍诓榭碿ookie中看到user的過期時間為周后 document.cookie='user=小白;expires='+oD; //瀏覽器關閉刪除本條cookie。pass的過期時間為在會話結束時。 document.cookie='pass='; //讀取cookie alert(document.cookie); </script>
(2)、修改cookie
修改cookie類似于創(chuàng)建cookie，新的cookie會覆蓋舊的cookie，其實并不能說是被覆蓋了，而是新的cookie 將被添加到 document.cookie 中顯示。
<script> var oD=new Date(); oD.setDate(oD.getDate()+); document.cookie='user=小白;expires='+oD; document.cookie='pass='; //可在查看cookie中看到user和pass的內容都被新的cookie替換了 document.cookie='user=小明;expires='+oD; document.cookie='pass='; //讀取cookie alert(document.cookie); </script>
(3)、刪除cookie
刪除 cookie 非常簡單。只需要設置 expires 參數為以前的時間即可，也就是設置為-1，昨天過期，瀏覽器一看這不是昨天就過期么，直接刪除。
下面是設置、獲取和刪除cookie的封裝函數，方便以后使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>Cookie封裝函數</title>
</head>
<body>
<script>
//設置cookie
//參數:cookie的名字，參數：cookie的值，參數：cookie過期時間
function setCookie(name, value, iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+'; expires='+oDate;
}
//userName一年后過期，passWord兩周后過期。
setCookie('userName', '小白', );
setCookie('passWord', '', );
//獲取cookie
//參數為cookie的名稱
function getCookie(name){
//用字符串將cookie分割，注意要用：默認的cookie樣式，分號加空格。
var arr=document.cookie.split('; ');
for(var i=;i<arr.length;i++){
//默認字符串顯示為：a=; b=; c=
//所以用等號再做一次分隔
var result=arr[i].split('=');
//result的第一位存名稱
//如果第一位等于name，就說明找到想要的了,就返回第二位的值。
if(result[]==name){
//result的第二位存值
return result[];
}
}
//如果沒有cookie就返回一個空字符串。比如有些用戶是第一次進入網站，就沒有產生cookie。
return '';
}
//獲取cookie中passWord的值
alert(getCookie('passWord'));
//參數為刪除哪條cookie
function removeCookie(name){
//參數：cookie的值，表示隨便一個。參數：昨天過期，立馬刪除。
setCookie(name, , -);
}
//將cookie中userName和passWord刪除。
//在點擊查看頁面信息，之前保存的cookie就不存在了。
removeCookie('userName');
removeCookie('passWord');
</script>
</body>
</html>
(4)、cookie小應用：記住上一次的用戶名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>記住上一次的用戶名</title>
<script>
function setCookie(name, value, iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+'; expires='+oDate;
}
function getCookie(name){
var arr=document.cookie.split('; ');
for(var i=;i<arr.length;i++){
var result=arr[i].split('=');
if(result[]==name){
return result[];
}
}
return '';
}
function removeCookie(name){
setCookie(name, , -);
}
window.onload=function (){
var oForm=document.getElementById('form');
var oUser=document.getElementsByName('user')[];
//在點擊提交按鈕時發(fā)生的事件
oForm.onsubmit=function (){
//創(chuàng)建一個cookie，值為用戶名輸入的值，天后過期
setCookie('user', oUser.value, );
};
//用戶名的值為獲取cookie中的user
oUser.value=getCookie('user');
};
</script>
</head>
<body>
//index.html為本文檔文件名
<form id="form" action="index.html">
用戶名：<input type="text" name="user"><br>
密 碼：<input type="password" name="pass"><br>
<input type="submit" name="" value="登錄">
</form>
</body>
</html>
window的六大屬性，同時它們也是對象：
document主要操作web加載的網頁文檔；
frames為窗口框架對象數組；
history保存用戶上網記錄；
location提供加載的文檔有關信息以及控制頁面跳轉；
navigator對象存儲瀏覽器名稱及版本信息；
screen顯示屏幕相關信息。
其中document對象屬性下也有幾個重要的屬性對象，以document為核心的對文檔進行操作的各個對象組成的結構便是大家所熟悉的DOM，從這一點看來，DOM其實是BOM的一個子集.
window對象除了提供了旗下的六大對象屬性外，還擁有設置瀏覽器信息的一些基本屬性，主要如下
相關文章
hover 和 :focus 這樣的偽類，我們可以很方便的將元素從一個樣式切換到另一個樣式，而且切換是會有過渡效果。但有時我們想要使用 js 來驅動過渡（即在代碼中觸發(fā)過渡）也是可以實現(xiàn)的，下面通過本文給大家介紹下2017-01-01
這篇文章主要介紹了詳解微信小程序 頁面跳轉 傳遞參數，現(xiàn)在分享給大家，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-12-12
KnockoutJS 3.X API 第四章之數據控制流foreach綁定
這篇文章主要介紹了KnockoutJS 3.X API 第四章之數據控制流foreach綁定的相關資料,需要的朋友可以參考下2016-10-10
layui表單驗證select下拉框實現(xiàn)驗證的方法
今天小編就為大家分享一篇layui表單驗證select下拉框實現(xiàn)驗證的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript解析xml實現(xiàn)省市縣三級聯(lián)動的方法
這篇文章主要介紹了javascript解析xml實現(xiàn)省市縣三級聯(lián)動的方法,涉及javascript針對節(jié)點的操作與XML文件解析的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
使用JS輕松實現(xiàn)ionic調用鍵盤搜索功能(超實用)
這篇文章主要介紹了使用JS輕松實現(xiàn)ionic調用鍵盤搜索功能(超實用)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
JavaScript根據CSS的Media Queries來判斷瀏覽設備的方法
這篇文章主要介紹了JavaScript根據CSS的Media Queries來判斷瀏覽設備的方法,主要思路是通過CSS Media Queries改變一個類的某個屬性值(例如 z-index),然后用JavaScript讀取判斷,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細介紹了Bootstrap圖片輪播組件Carousel使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
今天想實現(xiàn)jQuery的unwrap效果，換言之，就是用其孩子把其父節(jié)點干掉。為了效率，用到文檔碎片，而取孩子時使用到childNodes（返回一個nodeList）2010-03-03
在我們日常工作的時候，利用javaScript判斷一個字符串中是否包括有數字和"-"，在一些表單提交的地方，這是比較有用的常規(guī)判斷，這里收集有幾種不同的方法，最后還將簡要介紹下isNAN函數的使用方法和例子，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-11-11