一、BOM介紹

BOM：Browser Object Model，瀏覽器物件模型，BOM的結構圖：

從上圖可以看出來：

（1）DOM物件也是BOM的一部分

（2）window物件是BOM的頂層（核心）物件

注意：

（1）在呼叫window物件的方法和屬性時，可以省略window，例如：window.document.location可以簡寫為document.location

（2）全域變數也是windows物件的屬性，全域的函式是window物件的方法

二、物件history、navigator、screen

#1、history物件包不包含瀏覽器的歷史
history.back() //后退一頁，等同于history.go(-1)
history.forward() //前進一頁，等同于history.go(1)
history.go(0) //0是重繪
用的不多，因為瀏覽器中已經自帶了這些功能的按鈕：

#2、navigator物件包含了瀏覽器相關資訊，
navigator.appName　　// Web瀏覽器全稱
navigator.userAgent　　// 客戶端絕大部分資訊
navigator.platform　　　// 瀏覽器運行所在的作業系統

#3、可以用screen物件得到可用的螢屏寬度和高度
screen.availWidth  //可用的螢屏寬度
screen.availHeight  //可用的螢屏高度

三、localtion物件

location.href  //獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() //重新加載頁面

location.href

練習1：點擊盒子，跳轉頁面

<body>
<div id="div1">點我一下</div>
<script>
    var oDiv = document.getElementById('div1');
    oDiv.onclick = function () {
        window.location.href = 'https://www.baidu.com';
    }
</script>
</body>

練習2：3s后，自動跳轉頁面

<body>
<div>這天下，本就是大爭之世，孤的兒子，不僅要爭，而且要爭的光芒萬丈</div>
<script>
    setTimeout(function () {
        location.href = 'https://www.baidu.com';
    }, 3000)
</script>
</body>

練習3：3s后讓網頁整個重繪

<body>
<div>這天下，本就是大爭之世，孤的兒子，不僅要爭，而且要爭的光芒萬丈</div>
<script>
    setTimeout(function () {
        location.reload();
    }, 3000)
</script>
</body>

四、彈出系統對話框

alert(1)是window.alert(1)的簡寫，因為它是window的子方法，

系統對話框有三種：

    alert("人丑還不讀書，是找不到女朋友的"); //不同瀏覽器中的外觀是不一樣的
    confirm("你真的要這么做嗎小伙子");  //兼容不好
    prompt("輸入用戶名：");   //不推薦使用

# 示例
var x=confirm("你真到要這么做嗎")
console.log(x)

var username=prompt("輸入用戶名：")
console.log(username);

五、打開關閉視窗

#1、open("url地址","新視窗的位置_blank或者_self"，"新視窗的特征")
window.open("http://www.w3school.com.cn","_blank", "width=400, height=400")

#2、close()關閉當前視窗
var x=window.open("http://www.w3school.com.cn","_blank", "width=400, height=400")
x.close()

六、瀏覽器視窗內部的高度和寬度

window.innerHeight - 瀏覽器視窗的內部高度
window.innerWidth - 瀏覽器視窗的內部寬度

七、定時器

#1.setTimeOut()
只在指定時間后執行一次，通常用于延遲執行某方法或功能，

//定時器 異步運行  
function say(){  
    alert("hello");  
}  
//使用方法名字執行方法  
var t1 = setTimeout(hello,1000);  
var t2 = setTimeout("hello()",3000); //使用字串執行方法  
clearTimeout(t2); //去掉定時器


#2.setInterval()
在指定時間為周期回圈執行，通常用于重繪表單，對于一些表單的假實時指定時間重繪同步，影片效果等，

//實時重繪時間單位為毫秒  
var t3 = setInterval(say,3000);   
var t4 = setInterval('say()',3000);   

clearInterval(t3);
clearInterval(t4);

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/107713.html

標籤：其他

上一篇：[javascript] elementui和vue下復制粘貼上傳圖片

下一篇：[javascript] elementui和vue下復制粘貼上傳圖片

JS——BOM操作