JavaScript(4)---BOM詳解

時間 2020-02-10

標籤 javascript bom 詳解欄目 JavaScript 简体版

原文原文鏈接

JavaScript(4)---BOM詳解

以前寫過一篇有關DOM的博客：JavaScript(2)---DOM詳解javascript

DOM有個頂級對象叫：document。一樣BOM中也有頂級對象叫 window。css

它們的區別在於： DOM是一套操做HTML標籤的API。 BOM是一套操做瀏覽器的API。html

1、概念

一、什麼是BOM

概念 BOM(瀏覽器對象模型) 提供了獨立於內容而與瀏覽器窗口進行交互的對象。描述了與瀏覽器進行交互的方法和接口，能夠對瀏覽器窗口進行訪問和操做。java

從這幅圖能夠看出,document也是window的子對象。由於頁面中的全部內容也是屬於瀏覽器的一部分，因此document也是屬於window。瀏覽器

二、常見的BOM對象

一、window:     # 表明整個瀏覽器窗口（window是BOM中的一個對象，而且是頂級的對象）
二、Navigator:  # 表明瀏覽器當前的信息，經過Navigator咱們能夠獲取用戶當前使用的是什麼瀏覽器
三、Location:   # 表明瀏覽器當前的地址信息，經過Location咱們能夠獲取或者設置當前的地址信息
四、History:    # 表明瀏覽器的歷史信息，經過History咱們能夠實現上一步/刷新/下一步操做
五、Screen:     # 表明用戶的屏幕信息

2、window對象

概念 window對象表示的是瀏覽器中打開的窗口，至關因而瀏覽器中的最頂層對象。服務器

一、window經常使用方法

一、open():          # 在一個窗口中打開頁面
二、setInterval():   # 設置定時器（執行n次）
三、clearInterval(): # 清除定時器
四、setTimeout():    # 設置定時器(只執行1次)
五、clearTimeout():  # 清除定時器
六、alert():    # 提示框
七、confirm():  # 確認提示框
八、propmt():   # 輸入提示框
九、console():  # 瀏覽器控制檯打印
十、onload():  # 頁面加載完才觸發的事件

注意：由於window對象使用很是頻繁，因此當調用js中的window對象的方法時，能夠省略對象名(window)不寫。dom

二、示例

代碼測試

<style type="text/css">
    input{
        display:block;
        width: 120px;
        height: 25px;
        background-color: #cddc39;
        margin-left: 250px;
        margin-top:10px;      
    }
</style>

<script type="text/javascript">
    function testAlert(){
        window.alert("彈出alert");    
    }

    /*
     * 參數1:dialog中顯示的內容
     * 參數2,3:可點擊的按鈕(默認沒有就是"ok","cancle")
     * 返回值: ok->true cancle->false
     */
    function testConfirm(){
        var flag;
        flag = window.confirm("請選擇是否?","是","否");
        if (flag)
            window.alert("你點擊的是-'肯定'");
        else
            window.alert("你點擊的是-'取消'");
    }
    
    /*
     * 參數1：能夠是一個資源地址（圖片，本地地址...）
     * 參數2：target of links
     * 參數3：窗口特色......
     */
    function testOpen (){
        window.open("http://www.baidu.com","_blank","height=400px,width=400px,left=10px");
    }

    /*
     * 參數1：提示語
     * 返回值：在輸入框中輸入的內容
     */
    function testPrompt (){
        var str;
        str = window.prompt("請輸入您手機號碼：");    
        window.alert("您剛纔輸入了："+str);
    }
    
    /*
     * 參數1：定時器要執行的方法（每隔必定時間執行）
     * 參數2：定時器時間
     */
    var intervalID;
    function testInterval (){
        intervalID = window.setInterval("testAlert()",2000);
    }

    /*
     * 清除定時器
     */
    function removeInterval (){ 
        window.clearInterval(intervalID);   
        console.log("定時任務ID="  + intervalID);
      
    }
    
    /*
    參數1：定時器要執行的方法（只執行一次）
    參數2：定時器時
    */
    var timeoutID;
    function testTimeout (){
        timeoutID = window.setTimeout("testAlert()",2000);   
    } 
    
    /*
     * 清除定時器
     */
    function removeTimeout (){
        window.clearTimeout(timeoutID); 
        console.log("定時任務ID="+ timeoutID);
    }
 
</script>
</head>
<body>
    <input type="button" value="測試alert" onclick="testAlert()" />
    <input type="button" value="測試open" onclick="testOpen()" />
    <input type="button" value="測試Confirm" onclick="testConfirm()" />
    <input type="button" value="測試testPrompt" onclick="testPrompt()" />
    <input type="button" value="測試Interval" onclick="testInterval()" />
    <input type="button" value="測試清除Interval" onclick="removeInterval()" />
    <input type="button" value="測試Timeout" onclick="testTimeout()" />
    <input type="button" value="測試清除Timeout" onclick="removeTimeout()" />
</body>

運行結果3d

3、location對象

概念 location對象提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航的功能，它既是window對象的屬性，也是document對象的屬性。code

一、location經常使用屬性

屬性

一、location.href  # 返回當前加載頁面的完整URL
二、location.hash  # 返回URL中的hash（#號後跟零或多個字符），若是不包含則返回空字符串。
三、location.host  # 返回服務器名稱和端口號（若是有）
四、location.hostname  # 返回不帶端口號的服務器名稱。
五、location.pathname  # 返回URL中的目錄和（或）文件名。
六、location.port      # 返回URL中指定的端口號，若是沒有，返回空字符串。
七、location.protocol  # 返回頁面使用的協議。
八、location.search    # 返回URL的查詢字符串。這個字符串以問號開頭。

位置操做

一、location.href = '網址'   # 當前頁面跳轉到新的網址  <a href="網址"></a>
二、location.replace('網址') # 跳轉但不會在歷史記錄中生成新紀錄
三、location.reload()       # 刷新當前頁面
四、window.open('網址')      # 會新建一個窗口打開頁面<a href="網址" target='_blank'></a>

4、history對象

概念 history對象保存着用戶上網的歷史記錄，在窗口打開的那一刻算起。由於history是window對象因此每一個瀏覽器窗口都有本身的history對象與特定的window對象關聯。

一、經常使用方法

一、history.back()    # 後退一頁
  二、history.forward() # 前進一頁
  三、history.go(n)     # 前進n頁
  四、history.go(-2)    # 後退n頁
  五、history.go(0)     # 至關於刷新

二、示例

爲了實現 返回上一頁和 返回下一頁功能，這裏須要兩個簡單頁面

首頁

<!DOCTYPE html>
<html lang="en">
  <style type="text/css">
    input{
      width: 120px;
      height: 25px;
      background-color: #cddc39;
      margin-top:10px;      
    }
</style>
<body>
<input type="button" value="跳轉頁面" id="btn1"/>
<input type="button" value="前進" id="btn2"/>
<script src="common.js"></script>
<script>
  //跳轉的
  document.getElementById("btn1").onclick = function () {
    window.location.href = "test.html";
  };
  //前進 前進一步就會又到跳轉的頁面
  document.getElementById("btn2").onclick = function () {
    window.history.forward();
  };
</script>
</body>
</html>

test.html

<!DOCTYPE html>
<html lang="en">
  <style type="text/css">
    input{
      width: 120px;
      height: 25px;
      background-color: #cddc39;     
    }
</style>
<body>
<input type="button" value="後退" id="btn"/>
<script src="common.js"></script>
<script>
  //後退 後退一步就是到上一個頁面
  document.getElementById("btn").onclick = function () {
    window.history.back();
  };
</script>
</body>
</html>

運行結果

5、綜合示例

一、一塊兒搖起來

實現原理 ：設置定時器 + 取消定時器 + 設置隨機邊距實現

效果

代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    img {  width: 150px; height: 150px; }
    div {  margin-top: 15px;  position: absolute;  }
  input {  width: 120px; height: 25px; background-color: #cddc39; }
  </style>
</head>
<body>
<input type="button" value="搖起來" id="btn1"/>
<input type="button" value="中止" id="btn2"/> <br>
<div id="dv">
  <img src="11.jpg" alt=""/>
  <img src="12.jpg" alt=""/>
</div>
<script src="common.js"></script>
<script>
  //定時器ID 用於解除定時
  var timeId="";
  my$("btn1").onclick = function () {
    clearInterval(timeId); //先清一次,由於不先清，若是用戶屢次點擊「搖起來」 那麼Id已經被覆蓋 以前的定時任務不可能中止
    timeId= setInterval(function () {
      var x = parseInt(Math.random() * 100 + 1);   //隨機數
      var y = parseInt(Math.random() * 100 + 1);
      my$("dv").style.left = x + "px";    //設置元素的left和top屬性值
      my$("dv").style.top = y + "px";
    }, 50); //定時時間50毫秒
  };

  my$("btn2").onclick=function () {  //清除定時任務
    clearInterval(timeId);
  };

/**
 * 獲取指定標籤對象
 */
function my$(id) {
    return document.getElementById(id);
}
</script>
</body>
</html>

二、用戶協議

使用場景 咱們在閱讀一些協議的時候，每每不能直接點贊成，而是幾秒後才能點贊成。

效果

代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<textarea name="texta" id="" cols="30" rows="10">
  請仔細閱讀協議,請仔細閱讀協議,請仔細閱讀協議,請仔細閱讀協議.
</textarea>
<input type="button" value="請仔細閱讀協議(5)" id="btn" disabled="disabled" />
<script>
var time=5; //5秒倒計時
 var timeId= setInterval(function () {
   time--;
   my$("btn").value="請仔細閱讀協議("+time+")";
    if(time <= 0){
      //中止定時器就能夠
      clearInterval(timeId);
      //按鈕能夠被點擊了
      my$("btn").disabled=false;
      my$("btn").value="贊成";
    }

  },1000);

 /**
 * 獲取指定標籤對象
 */
function my$(id) {
    return document.getElementById(id);
}
</script>
</body>
</html>

參考

一、js bom 四大對象

二、JavaScript BOM

你若是願意有所做爲，就必須善始善終。(23)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。