bom詳解

BOM的概念

BOM(Browser Object Model) 是指瀏覽器對象模型，瀏覽器對象模型提供了獨立於內容的、能夠與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成，其中表明瀏覽器窗口的Window對象是BOM的頂層對象，其餘對象都是該對象的子對象。

咱們在瀏覽器中的一些操做均可以使用BOM的方式進行編程處理，

好比：刷新瀏覽器、後退、前進、在瀏覽器中輸入URL等

BOM的頂級對象window

window是瀏覽器的頂級對象，當調用window下的屬性和方法時，能夠省略window 注意：window下一個特殊的屬性 window.name

對話框

• alert()

• prompt()

• confirm()

頁面加載事件

• onload

window.onload = function () {
  // 當頁面加載完成執行
  // 當頁面徹底加載全部內容（包括圖像、腳本文件、CSS 文件等）執行
}

• onunload

window.onunload = function () {
  // 當用戶退出頁面時執行
}

定時器

setTimeout()和clearTimeout()

在指定的毫秒數到達以後執行指定的函數，只執行一次

// 建立一個定時器，1000毫秒後執行，返回定時器的標示
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);
​
// 取消定時器的執行
clearTimeout(timerId);

setInterval()和clearInterval()

定時調用的函數，能夠按照給定的時間(單位毫秒)週期調用函數

// 建立一個定時器，每隔1秒調用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);
​
// 取消定時器的執行
clearInterval(timerId);

案例：

定時器
簡單動畫

location對象

location對象是window對象下的一個屬性，時候的時候能夠省略window對象

location能夠獲取或者設置瀏覽器地址欄的URL

URL

統一資源定位符 (Uniform Resource Locator, URL)

• URL的組成

scheme://host:port/path?query#fragment
scheme:通訊協議
 經常使用的http,ftp,maito等
host:主機
 服務器(計算機)域名系統 (DNS) 主機名或 IP 地址。
port:端口號
 整數，可選，省略時使用方案的默認端口，如http的默認端口爲80。
path:路徑
 由零或多個'/'符號隔開的字符串，通常用來表示主機上的一個目錄或文件地址。
query:查詢
 可選，用於給動態網頁傳遞參數，可有多個參數，用'&'符號隔開，每一個參數的名和值用'='符號隔開。例如：name=zs
fragment:信息片段
 字符串，錨點.

location有哪些成員？

• 使用chrome的控制檯查看

• 查MDN

  MDN

• 成員

  • assign()/reload()/replace()

  • hash/host/hostname/search/href……

案例

解析URL中的query，並返回對象的形式

function getQuery(queryStr) {
  var query = {};
  if (queryStr.indexOf('?') > -1) {
    var index = queryStr.indexOf('?');
    queryStr = queryStr.substr(index + 1);
    var array = queryStr.split('&');
    for (var i = 0; i < array.length; i++) {
      var tmpArr = array[i].split('=');
      if (tmpArr.length === 2) {
        query[tmpArr[0]] = tmpArr[1];
     }
   }
 }
  return query;
}
console.log(getQuery(location.search));
console.log(getQuery(location.href));

history對象

• back()

• forward()

• go()

navigator對象

• userAgent

經過userAgent能夠判斷用戶瀏覽器的類型

• platform

經過platform能夠判斷瀏覽器所在的系統平臺類型.

特效

偏移量

• offsetParent用於獲取定位的父級元素

• offsetParent和parentNode的區別

var box = document.getElementById('box');
console.log(box.offsetParent);
console.log(box.offsetLeft);
console.log(box.offsetTop);
console.log(box.offsetWidth);
console.log(box.offsetHeight);

客戶區大小

var box = document.getElementById('box');
console.log(box.clientLeft);
console.log(box.clientTop);
console.log(box.clientWidth);
console.log(box.clientHeight);

滾動偏移

var box = document.getElementById('box');
console.log(box.scrollLeft)
console.log(box.scrollTop)
console.log(box.scrollWidth)
console.log(box.scrollHeight)

案例

• 勻速動畫函數

• 變速動畫函數

• 回到頂部

• 無縫輪播圖

• 模擬滾動條

• 拖拽案例

• 放大鏡案例

附錄

元素的類型