JavaScript操作BOM物件
技術標籤：使用jQery快速高效的製作網頁互動特效javascript
目錄
一.windows物件
瀏覽器物件模型(BOM) 是Javascript 的組成之一，他提供了獨立於內容與瀏覽器視窗進行互動的物件，是瀏覽器物件模型可以實現與HTML互動。他的作用是將相關的元素組織包裝起來，提供給程式設計人員使用，從而降低開發人員的勞動量，提高設計Web頁面的能力。
--BOM是一個分層結構
--使用BOM模式通常可以實現如下功能
1.彈出新的瀏覽器視窗
2.移動，關閉瀏覽器視窗及調整視窗的大小。
3.在瀏覽器視窗中實現頁面的前進，後退功能
1.常用的屬性
window物件的常用屬性
| 名稱 | 說明 |
| history | 有關客戶訪問過的URL的資訊 |
| location | 有關當前URL的資訊 |
| screen | 只讀屬性，包含有關客戶端顯示螢幕的資訊 |
--在javascript中，window屬性的語法格式
1.語法 window.屬性名=“屬性值” 2.使用：跳轉到百度頁面 window.location=“http://www.baidu.com”
2.常用的方法
window物件的常用方法
| 名稱 | 說明 |
| prompt() | 顯示一個可輸入的對話方塊 |
| alert() | 顯示一個帶有提示資訊和一個確定按鈕的警示對話方塊 |
| confrim() | 顯示一個帶有提示資訊，確認和取消的按鈕的對話方塊 |
| close() | 關閉瀏覽器視窗 |
| open() | 開啟一個新的瀏覽器視窗，載入指定URL的視窗 |
| setTime() | 在指定毫秒數後呼叫函式或者計算表示式 |
| setInterval() | 按照指定週期（以毫秒）來計算函式或者表示式 |
--在javascript中，window方法的語法格式
1.語法 window.方法名(); //window物件是全域性物件，所以再呼叫方法和屬性時 ,window可以省略 2.關閉瀏覽器方法 close(); 3.彈出一個確認對話方塊 confrim(“對話方塊中顯示的純文字”)； 4.在頁面彈出一個新的瀏覽器視窗 open("彈出視窗的URL","視窗名稱","視窗特徵");
--prompt()方法和alert()的用法，與confirm()方法的區別
1.alert()只有一個引數，僅顯示警告對話方塊的訊息，無返回值。
2.prompt()有兩個引數，是輸入對話方塊，用來提示使用者輸入一些資訊，單擊確認按鈕則返回使用者輸入的值，單擊取消則返回null.
3.confrim()只有一個引數，是確認對話方塊，顯示提示對話方塊的訊息，確認按鈕和取消按鈕。單擊確認按鈕返回true，單擊取消按鈕返回flase;
3.history物件和location物件
1.history物件
history物件提供使用者最近瀏覽過的URL列表,但出於隱私方面的原因，history物件不在允許指令碼訪問已經訪過多得實際URL，可以使用history物件提供的，逐個返回訪問過的頁面的方法.
--history()物件的方法
| 名稱 | 描述 |
| black() | 載入history物件列表中的前一個URL |
| forward() | 載入history物件列表中的後一個URL |
| go() | 載入history物件列表中的某個具體的URL |
--black()方法讓瀏覽器載入前一個瀏覽過的文件，等效於瀏覽器頁面中的“前進”按鈕。
--forward()方法讓瀏覽器載入後一個瀏覽過的文件，等效於瀏覽器頁面中的“後退”按鈕。
--go(n)方法中的n是一個具體的數字，等效於瀏覽器頁面中的“前進”或"後退"按鈕。
2.location物件
location物件提供當前的URL資訊，並且可以重新裝載當前頁面或者載入新頁面，
--location()物件的屬性
| 名稱 | 描述 |
| host | 設定或返回主機名和當前URL的埠號 |
| hostname | 設定或者返回當前URL的主機名 |
| href | 設定或返回完整的URL |
--location()物件的方法
| 名稱 | 描述 |
| reload() | 重新載入當前文件 （重新整理） |
| replace() | 用新的文件替換當前文件 （跳轉） |
1.實現重新整理頁面和跳轉至檢視鮮花詳情頁面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>主頁面</title>
<style type="text/css">
body{
margin: 0px auto;
text-align:center;
}
</style>
</head>
<body>
<img src="images/flow.jpg" alt="鮮花" /><br />
<a href=" javascript:location.replace('flower.html')" >檢視鮮花詳情</a>
<a href=" javascript:location.reload()" >重新整理本頁</a>
</body>
</html>4.document物件
document物件既是window物件的一部分，又代表整個HTML文件，可用來訪問頁面中的所有元素.
1.doucment物件的常用屬性
| 屬性 | 描述 |
| referrer | 返回載入當前文件的URL |
| URL | 返回當前文件的URL |
1.referrer的語法
document.referrer //當前文件如果不是通過超連結訪問的，則返回值為null;
2.URL的語法
document.URL1.使用document.referrer屬性獲得連結進入本頁的頁面地址，判斷是否從登入頁面進入
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>領獎頁面</title>
<style type="text/css">
body,h1{margin: 0;padding: 0;}
.prize{text-align: center;}
</style>
</head>
<body>
<div class="prize">
<img src="images/d1.jpg" alt="中獎" />
<h1><a href="praise.html" onclick="zhongjiang()">馬上去領獎啦！</a></h1>
</div>
<script>
function zhongjiang(){
var reurl=document.referrer;
if(reurl=="" )
{
document.write("您不是從登入頁面進入，五秒中後自動跳轉登入頁面");
setTimeout("location.href='login.html'",5000);
}else
{
document.write("恭喜您中了大獎")
}
}
</script>
</body>
</html>2.document物件的常用方法
| 方法 | 描述 |
| getIElementById() | 返回對擁有指定ID的第一個物件的引用 |
| getIElementByName() | 返回對帶有指定名稱的物件的引用 |
| getIElementByTagName() | 返回對帶有指定標籤名的物件的集合 |
| write() | 向文件寫文字，HTML表示式或者JavaScript程式碼 |
--getIElementById() 方法一般用來訪問DIv,圖片，表單元素，網頁標籤等,但要求訪問物件的id是唯一的。
--getIElementByName()方法與getIElementById()方法相似，但他訪問的是具有name屬性的元素，由於一個文件中的name屬性不可能是唯一的，因此getIElementByName()訪問的是具有相同name屬性的元素，如具有相同的name屬性的單選按鈕，複選框。
--getIElementByTagName()方法是按照標籤來訪問頁面元素的，一般用於訪問一組相同的元素如一組<input>，一組的圖片等。
1.document物件方法的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用document物件操作頁面</title>
</head>
<body>
<div class="content">
<img src="images/book.jpg" alt="島上書店"/>
<div class="r">
<div id="book">書名：島上書店</div>
<input name="changeBook" value="換換名稱" type="button" onclick="tihuan()"/><br>
四季名稱：
<input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" /><br><br>
<input name="b2" type="button" value="input內容" onclick="input()" />
<input name="b3" type="button" value="四季名稱" onclick="sijiname()"/>
<input name="b4" type="button" value="清空頁面內容" onclick="clears()" />
<p id="replace"></p>
</div>
</div>
<script>
//替換書名
function tihuan()
{
document.getElementById("book").innerHTML="書名:你好Low啊";
}
//輸出input標籤中的內容
function input()
{
var inputs=document.getElementsByTagName("input");
var p=document.getElementById("replace");
p.innerHTML=null;
for(var i=0;i<inputs.length;i++){
p.innerHTML+= inputs[i].value+"<br/>";
}
}
//輸出屬性名稱為season的元素中的內容
function sijiname()
{
var inputs=document.getElementsByName("season");
var p=document.getElementById("replace");
p.innerHTML=null;
for(var i=0;i<inputs.length;i++){
p.innerHTML+= inputs[i].value+"<br/>";
}
}
//清除頁面所有內容
function clears()
{
document.write("")
}
</script>
</body>
</html>--innerHTML是所有的HTML元素都有得屬性，他是一個文字串，用來設定獲取當前物件的開始標籤和結束標籤之間的HTML。
5.JavaScript內建物件
在Javascript中，系統的內建物件有Date物件，array物件，String物件和Math物件。
--Date：用於操作日期和時間。
--Array:用於在單獨的變數名中儲存一系列的值。
--String：用於支援對字串的處理
--Math：使我們有能力執行常用的數學任務。
1.Date物件
1.語法
var 日期例項=new Date(引數);
--日期例項中儲存Date物件的變數，可以省略引數
var time=new Date();
--引數的字串格式“MM DD,YYYYY,hh:mm:ss” 表示日期和時間
var time =new Date("july 15,2013,16:34:"13);
--Date物件的常用方法
| 方法 | 說明 |
| getDate() | 返回Date物件的一個月中的每一天，其值為1~31 |
| getDay() | 返回Date物件的星期中的每一天，其值為0~6 |
| getHours() | 返回Date物件的小時數，其值為0~23 |
| getMinutes() | 返回Date物件的分鐘數，其值為0~59 |
| getSeconds() | 返回Date物件的秒數，其值為0~59 |
| getMonth() | 返回Date物件的月份，其值為0~11 |
| getFullYear() | 返回Date物件的年份，其值為四位數 |
| getTime() | 返回自某一個時刻（1970年1月1日）以來的毫秒數 |
--getFullYear()返回四位數的年份,getlYear()返回二位或四位的年份，常用於獲取年份getFullYear()；
--獲取星期幾使用getDay()；0表示週日，1表示週一，6表示週六。
--各部分時間表示的範圍：除號數（一個月中的每一天）外，其他均從0開始計數。
2.Math物件
math物件提供了許多與數學相關的功能。
| 方法 | 說明 | 示例 |
| ceil() | 對數進行上舍入 | Math.ceil(25.5) 返回26 Math.ceil(-25.5) 返回-25 |
| floor() | 對數進行下舍入 | Math.floor(25.5) 返回25 Math.floor(-25.5) 返回-26 |
| round() | 把數四捨五入為最接近的數 | Math.round(25.5) 返回26 Math.round(-25.5) 返回-26 |
| random() | 返回0~1中的隨機數 | Math.round() 列如0.1254545454 |
5.定時函式
1.常用定時函式
JavaScript中提供了兩個定時函式SetTimeout()和setInterval()。
1.setTimeout()
1.語法（用於在指定的毫秒數後呼叫函式或者計算表示式）
setTimeout("呼叫函式名稱",等待的毫秒數)
2.setInterval()
1.語法（可按照指定的週期來呼叫函式或者計算表示式）
setInterval("呼叫的函式名稱","週期性呼叫函式之間間隔的毫秒數");3.clearTimeout()和clearInterval()
1.語法（用於清除兩種定時函式設定的定時器）
clearTimeout(setTimeout()返回的ID值)
clearInterval(setInterval()返回的ID值)