JS知識總結之BOM對象
window對象
window對象是BOM的核心，window對象指當前的瀏覽器窗口。javascript
window對象方法:html
警告消息對話框---alert
語法:java
alert(字符串或變量); 複製代碼
確認消息對話框---confirm
confirm 消息對話框一般用於容許用戶作選擇的動做，如：「你對嗎？」等。彈出對話框(包括一個肯定按鈕和一個取消按鈕)。瀏覽器
語法:bash
confirm(str);複製代碼
參數說明:app
str：在消息對話框中要顯示的文本
返回值: Boolean值複製代碼
返回值:框架
當用戶點擊"肯定"按鈕時，返回true
當用戶點擊"取消"按鈕時，返回false複製代碼
注: 經過返回值能夠判斷用戶點擊了什麼按鈕ide
提問消息對話框---prompt
prompt彈出消息對話框,一般用於詢問一些須要與用戶交互的信息。彈出消息對話框（包含一個肯定按鈕、取消按鈕與一個文本輸入框）。函數
語法:工具
prompt(str1, str2);複製代碼
參數說明：
str1: 要顯示在消息對話框中的文本，不可修改
str2：文本框中的內容，能夠修改複製代碼
返回值:
1. 點擊肯定按鈕，文本框中的內容將做爲函數返回值
2. 點擊取消按鈕，將返回null複製代碼
打開新窗口---window.open
open() 方法能夠查找一個已經存在或者新建的瀏覽器窗口。
語法：
window.open([URL], [窗口名稱], [參數字符串])複製代碼
參數說明:
URL：可選參數，在窗口中要顯示網頁的網址或路徑。若是省略這個參數，或者它的值是空字符串，那麼窗口就不顯示任何文檔。
窗口名稱：可選參數，被打開窗口的名稱。
1.該名稱由字母、數字和下劃線字符組成。
2."_top"、"_blank"、"_self"具備特殊意義的名稱。
_blank：在新窗口顯示目標網頁
_self：在當前窗口顯示目標網頁
_top：框架網頁中在上部窗口中顯示目標網頁
3.相同 name 的窗口只能建立一個，要想建立多個窗口則 name 不能相同。
4.name 不能包含有空格。
參數字符串：可選參數，設置窗口參數，各參數用逗號隔開。複製代碼
參數表:
例如:打開http://www.baidu.com網站，大小爲300px * 200px，無菜單，無工具欄，無狀態欄，有滾動條窗口：
<script type="text/javascript"> window.open('http://www.baidu.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>複製代碼
關閉窗口---window.close
close()關閉窗口
用法：
window.close(); //關閉本窗口複製代碼
或
<窗口對象>.close(); //關閉指定的窗口複製代碼
例如:關閉新建的窗口。
<script type="text/javascript">
var mywin=window.open('http://www.imooc.com'); //將新打的窗口對象，存儲在變量mywin中
mywin.close();
</script>複製代碼
注意:上面代碼在打開新窗口的同時，關閉該窗口，看不到被打開的窗口。
JavaScript 計時器
在JavaScript中，咱們能夠在設定的時間間隔以後來執行代碼，而不是在函數被調用後當即執行。
計時器類型：
一次性計時器：僅在指定的延遲時間以後觸發一次。
間隔性觸發計時器：每隔必定的時間間隔就觸發一次。
計時器方法：
計時器每隔指定的時間執行代碼---setInterval()
在執行時,從載入頁面後每隔指定的時間執行代碼。
語法:
setInterval(代碼,交互時間);複製代碼
參數說明：
1. 代碼：要調用的函數或要執行的代碼串。
2. 交互時間：週期性執行或調用表達式之間的時間間隔，以毫秒計（1s=1000ms）。
返回值:
一個能夠傳遞給 clearInterval() 從而取消對"代碼"的週期性執行的值。
調用函數格式(假設有一個clock()函數):
setInterval("clock()",1000)
或
setInterval(clock,1000)複製代碼
咱們設置一個計時器，每隔100毫秒調用clock()函數，並將時間顯示出來，代碼以下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計時器</title>
<script type="text/javascript">
var int=setInterval(clock, 100)
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
</form>
</body>
</html>複製代碼
取消計時器---clearInterval()
clearInterval() 方法可取消由 setInterval() 設置的交互時間。
語法：
clearInterval(id_of_setInterval)複製代碼
參數說明:
id_of_setInterval：由 setInterval() 返回的 ID 值。
每隔 100 毫秒調用 clock() 函數,並顯示時間。當點擊按鈕時，中止時間,代碼以下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計時器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
// 每隔100毫秒調用clock函數，並將返回值賦值給i
var i=setInterval("clock()",100);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(i)" />
</form>
</body>
</html>複製代碼
計時器延遲指定時間後執行一次表達式---setTimeout()
setTimeout()計時器，在載入後延遲指定時間後,去執行一次表達式,僅執行一次。
語法:
setTimeout(代碼,延遲時間);複製代碼
參數說明：
1. 要調用的函數或要執行的代碼串。
2. 延時時間：在執行代碼前需等待的時間，以毫秒爲單位（1s=1000ms)。
當咱們打開網頁3秒後，在彈出一個提示框，代碼以下:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>複製代碼
當按鈕start被點擊時，setTimeout()調用函數，在5秒後彈出一個提示框。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
var t=setTimeout("alert('Hello!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>複製代碼
要建立一個運行於無窮循環中的計數器，咱們須要編寫一個函數來調用其自身。在下面的代碼，當按鈕被點擊後，輸入域便從0開始計數。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
document.getElementById('txt').value=num;
num=num+1;
setTimeout("numCount()",1000);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>複製代碼
取消計時器---clearTimeout()
setTimeout()和clearTimeout()一塊兒使用，中止計時器。
語法:
clearTimeout(id_of_setTimeout)複製代碼
參數說明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行代碼塊。
下面的例子和上節的無窮循環的例子類似。惟一不一樣是，如今咱們添加了一個 "Stop" 按鈕來中止這個計數器：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0,i;
function timedCount(){
document.getElementById('txt').value=num;
num=num+1;
i=setTimeout(timedCount,1000);
}
setTimeout(timedCount,1000);
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt">
<input type="button" value="Stop" onClick="stopCount()">
</form>
</body>
</html>複製代碼
History 對象
history對象記錄了用戶曾經瀏覽過的頁面(URL)，並能夠實現瀏覽器前進與後退類似導航的功能。
注意:從窗口被打開的那一刻開始記錄，每一個瀏覽器窗口、每一個標籤頁乃至每一個框架，都有本身的history對象與特定的window對象關聯。
語法：
window.history.[屬性|方法]複製代碼
注意：window能夠省略。
History 對象屬性
History 對象方法
使用length屬性，當前窗口的瀏覽歷史總長度，代碼以下：
<script type="text/javascript">
var HL = window.history.length;
document.write(HL);
</script>
複製代碼
返回前一個瀏覽的頁面---back()
back()方法，加載 history 列表中的前一個 URL。
語法：
window.history.back();複製代碼
好比，返回前一個瀏覽的頁面，代碼以下：
window.history.back();複製代碼
注意：等同於點擊瀏覽器的倒退按鈕。
back()至關於go(-1),代碼以下:
window.history.go(-1);複製代碼
返回下一個瀏覽的頁面---forward()
forward()方法，加載 history 列表中的下一個 URL。
若是倒退以後，再想回到倒退以前瀏覽的頁面，則可使用forward()方法,代碼以下:
window.history.forward();複製代碼
注意：等價點擊前進按鈕。
forward()至關於go(1),代碼以下:
window.history.go(1);複製代碼
返回瀏覽歷史中的其餘頁面---go()
go()方法，根據當前所處的頁面，加載 history 列表中的某個具體的頁面。
語法：
window.history.go(number);複製代碼
參數：
瀏覽器中，返回當前頁面以前瀏覽過的第二個歷史頁面，代碼以下：
window.history.go(-2);複製代碼
注意：和在瀏覽器中單擊兩次後退按鈕操做同樣。
同理，返回當前頁面以後瀏覽過的第三個歷史頁面，代碼以下：
window.history.go(3);複製代碼
Location對象
location用於獲取或設置窗體的URL，而且能夠用於解析URL。
語法:
location.[屬性|方法]複製代碼
location對象屬性圖示:
location 對象屬性：
location 對象方法:
Navigator對象
Navigator 對象包含有關瀏覽器的信息，一般用於檢測瀏覽器與操做系統的版本。
對象屬性:
查看瀏覽器的名稱和版本，代碼以下:
<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
document.write("Browser name"+browser);
document.write("<br>");
document.write("Browser version"+b_version);
</script>複製代碼
userAgent
返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)
語法
navigator.userAgent複製代碼
幾種瀏覽的user_agent.，像360的兼容模式用的是IE、極速模式用的是chrom的內核。
使用userAgent判斷使用的是什麼瀏覽器(假設使用的是IE8瀏覽器),代碼以下:
function validB(){
var u_agent = navigator.userAgent;
var B_name="Failed to identify the browser";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
B_name="IE(8-10)";
}
document.write("B_name:"+B_name+"<br>");
document.write("u_agent:"+u_agent+"<br>");
}
複製代碼
screen對象
screen對象用於獲取用戶的屏幕信息。
語法：
window.screen.屬性複製代碼
對象屬性:
屏幕分辨率的高和寬
window.screen 對象包含有關用戶屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的寬
注意:
1.單位以像素計。
2. window.screen 對象在編寫時能夠不使用 window 這個前綴。
咱們來獲取屏幕的高和寬，代碼以下:
<script type="text/javascript">
document.write( "屏幕寬度："+screen.width+"px<br />" );
document.write( "屏幕高度："+screen.height+"px<br />" );
</script>複製代碼
屏幕可用高和寬度
1. screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，好比任務欄。
2. screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，好比任務欄。
注意:
不一樣系統的任務欄默認高度不同，及任務欄的位置可在屏幕上下左右任何位置，因此有可能可用寬度和高度不同。
咱們來獲取屏幕的可用高和寬度，代碼以下：
<script type="text/javascript">
document.write("可用寬度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>複製代碼
- 1. JS總結--------BOM經常使用對象
- 2. JS知識總結以內置對象
- 3. JS中BOM相關知識點總結
- 4. JS-BOM對象
- 5. BOM知識簡易總結
- 6. BOM知識點總結
- 7. js bom location對象
- 8. JS 總結之對象
- 9. JS面向對象知識點彙總
- 10. BOM對象之location對象
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • ADO Parameter 對象 - ADO 教程
- • 算法總結-雙指針
- • 算法總結-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. JS總結--------BOM經常使用對象
- 2. JS知識總結以內置對象
- 3. JS中BOM相關知識點總結
- 4. JS-BOM對象
- 5. BOM知識簡易總結
- 6. BOM知識點總結
- 7. js bom location對象
- 8. JS 總結之對象
- 9. JS面向對象知識點彙總
- 10. BOM對象之location對象