BOM模型
BOM:瀏覽器對象模型(Browser Object Model)
BOM提供了獨立於內容的、可以與瀏覽器窗口進行互動的對象結構
BOM可實現功能
- 彈出新的瀏覽器窗口
- 移動、關閉瀏覽器窗口以及調整窗口的大小
- 頁面的前進、後退
Window 對象
所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。
所有 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。
全局變量是 window 對象的屬性。
全局函數是 window 對象的方法。
甚至 HTML DOM 的 document 也是 window 對象的屬性之一。
Window對象的常用屬性
常用屬性
屬性名稱 | 說 明 |
---|---|
history | 有關客戶訪問過的 URL 的信息 |
location | 有關當前 URL 的信息 |
語法
window.屬性名="屬性值";
eg:
window.location="http://www.baidu.com";
常用方法
方法名稱 | 說 明 |
---|---|
prompt( ) | 顯示可提示用戶輸入的對話框 |
alert( ) | 顯示帶有一個提示信息和一個確定按鈕的警示框 |
confirm( ) | 顯示一個帶有提示信息、確定和取消按鈕的對話框 |
close( ) | 關閉瀏覽器窗口 |
open( ) | 打開一個新的瀏覽器窗口,加載給定 URL 所指定的文檔 |
setTimeOut( ) | 在指定的毫秒數後調用函數或計算表達式 |
setInterval( ) | 按照指定的週期(以毫秒計)來調用函數或表達式 |
confirm( )、alert( )和prompt( )區別
- alert( ):一個參數,僅顯示警告對話框的消息,無返回值,不能對腳本產生任何改變
- prompt( ):兩個參數,輸入對話框,用來提示用戶輸入一些信息,單擊 “取消” 按鈕則返回null,單擊 “確定” 按鈕則返回用戶輸入的值,常用於收集用戶關於特定問題而反饋的信息
- confirm( ):一個參數,確認對話框,顯示提示對話框的消息、“確定” 按鈕和 “取消” 按鈕,單擊 “確定” 按鈕返回true,單擊 " 取消" 按鈕返回false,因此常與if-else語句搭配使用
open( )方法
window.open(URL,name,features,replace)
參數 | 描述 |
---|---|
URL | 一個可選的字符串,聲明瞭要在新窗口中顯示的文檔的URL。如何省略了這個參數,或則它的值是空字符串,那麼新窗口就不會顯示任何文檔 |
name | 可選。指定target屬性或窗口的名稱。支持以下值_blank(加載到一個新的窗口,默認)、_parent(加載到父框架)、_self(替換當前頁面)、_top(替換任何可加載的框架集)、name(窗口名稱) |
features | 可選。一個逗號分隔的項目列表。支持以下值:在這不做詳細介紹,下面會提到 |
replace | Optional.Specifies規定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創建一個新條目,還是替換瀏覽歷史中的當前條目。支持下面的值:true- (URL替換瀏覽歷史中的當前條目)。false- (URL 在瀏覽歷史中創建新的條目) |
上面features會在接下來提到
窗口特徵(features)
history對象
常用方法
名稱 | 說 明 |
---|---|
back() | 加載 history 對象列表中的前一個URL |
forward() | 加載 history 對象列表中的下一個URL |
go() | 加載 history 對象列表中的某個具體URL |
注意:
history.back()——>history.go(-1)(等價)
history.forward()——>history.go(1)
location對象
常用屬性
名稱 | 說 明 |
---|---|
host | 設置或返回主機名和當前URL的端口號 |
hostname | 設置或返回當前URL的主機名 |
href | 設置或返回完整的URL |
常用方法
名稱 | 說 明 |
---|---|
reload() | 重新加載當前文檔 |
replace() | 用新的文檔替換當前文檔 |
Document 對象
常用屬性
名稱 | 說明 |
---|---|
referrer | 返回載入當前文檔的URL |
URL | 返回當前文檔的URL |
document對象的常用方法
名稱 | 說 明 |
---|---|
getElementById() | 返回對擁有指定id的第一個對象的引用 |
getElementsByName() | 返回帶有指定名稱的對象的集合 |
getElementsByTagName() | 返回帶有指定標籤名的對象的集合 |
write() | 向文檔寫文本、HTML表達式或JavaScript代碼 |
innerHTML
innerHTML在 JS 中是雙向功能,獲取對象的內容 或 向對象插入內容
innerHtml 屬性用於設置或返回指定標籤之間的 HTML內容。
語法
object.innerHTML="HTML";//設置
var html=object.innerHTML;//獲取
JavaScript 內置對象
Array:用於在單獨的變量名中存儲一系列的值
String:用於支持對字符串的處理
Math:用於執行常用的數學任務,它包含了若干個數字常量和函數
Date:用於操作日期和時間
Date對象
語法
var 日期對象=new Date(參數);
eg:
var today=new Date();//返回當前日期和時間
var today=new Date("June 28,2020,20:03:24");
常用方法
方法 | 說 明 |
---|---|
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 對象的年份,其值爲4位數 |
getTime() | 返回自某一時刻(1970年1月1日)以來的毫秒數 |
Math對象
常用方法
方法 | 說 明 | 示例 |
---|---|---|
ceil() | 對數進行上舍入 | Math.ceil(25.5);返回26 |
floor() | 把數進行下舍入 | Math.floor(25.5);返回25 |
round() | 把數四捨五入爲最接近的數 | Math.round(25.5);//返回26 |
random() | 返回0~1之間的隨機數(不含1) | Math.random();返回0.654598898665 |
定時函數
setTimeout()
語法
setTimeOut("調用的函數","等待的毫秒數");//只執行一次
eg:
var myTime=setTimeOut("disptime()",1000);//1秒後執行函數
disptime()一次
setInterval()
語法
setInterval("調用的函數",間隔的毫秒數);//每隔多少毫秒執行一次
eg:
var myTime=setInterval("disptime()",1000);//每隔1秒執行函數
disptime()一次
提示
如果要多次調用,使用setInterval()或者讓setTimeout()裏的函數自身再次調用
setTimeout()。
清除函數
clearTimeout
語法
clearTimeout(setTimeout()返回的ID值)
eg:
var myTime=setTimeout("disptime()",1000);
clearTimeout(myTime);
clearInterval()
語法
clearInterval(setInterval()返回的ID值)
eg:
var myTime=setInterval("disptime()",1000);
clearInterval(myTime);