JavaScript

BOM介紹

概念

BOM（Browser Object Model）即瀏覽器對象模型。 本質： 通過對象抽象瀏覽器中的一些功能 例如：（刷新頁面，alert,confirm,pormpt,跳轉 ...）

BOM頂級對象

window對象是js中的頂級對象，定義在全局作用域中的變量、函數都會變成window對象的屬性和方法，在調用的時候可以省略window。?備注：1.文檔document也屬于window對象中的一個2.window代表整個窗口

頁面加載事件

1. window.onload = function() {} ===> 頁面加載完成：頁面上的所有元素都創建完成，并且引用的外部資源都下載完畢（js,css）

定時器

• setTimeout()

隔一段時間執行，只執行一次 ==》定時炸彈? 使用window.setTimeout(function, time)；function： 處理程序，可以是匿名函數time： 間隔時間，毫秒? 清除定時器1. setTimeout有一個返回值,代表當前定時器的標識2. clearTimeOut(定時器標識)案例：刪除提示效果過程：點擊按鈕，顯示一個層，3秒以后自動消失

• setInterval()

隔一段時間執行，并且會重復執行 ===》 類似于鬧鐘? 使用 window.setInterval(function, time); function: 處理程序，可以是匿名函數 time：時間，毫秒? 清除定時器clearInterval(定時器id)；? 課堂案例： 1.時鐘案例 2.動畫效果 offsetLeft: 水平偏移量相對HTMLoffsetTop： 垂直偏移量相對HTML

location對象

location對象是window對象下的一個屬性，使用location可以設置或者獲取瀏覽器地址欄中的url

屬性

href：實現頁面跳轉 獲取地址 ：location.href 設置地址 ：location.href = "http://www.baidu.com"如果希望在新窗口中打開頁面：window.open('url路徑');

方法

? assign() 委派 ： 作用于href的作用一樣，可以實現頁面跳轉 location.assign("http://www.baidu.com")? replace() 替換： 跳轉頁面，瀏覽器不記錄歷史，瀏覽器中后退按鈕無法使用 location.replace("http://www.baidu.com")? reload() 重新加載： 類似于 F5 備注：location.reload(true) 強制從服務器獲取頁面location.reload(false) 從瀏覽器本地緩存中獲取頁面F5，刷新頁面從緩存中加載Ctrl + F5 強制刷新頁面（從服務器獲取頁面）

其他屬性

• url組成

統一資源定位符（網站地址）scheme://host:port/path?query#fragment 例如：http://www.baidu.com:port/index.html?name=zs&age=18#bottom

• 詳解

• protocol

通信協議，常用的http，ftp

• host

主機，服務器域名系統（DNS）或者IP地址

• port

端口號，默認端口號 8080

• pathname

路徑，代表一個具體的文件目錄或者一個文件夾

屬性介紹

location.host --> 主機名(域名) location.pathname ---> 文件路徑 location.protocol ---> 協議 location.port ----> 端口

offset【獲取元素位置和大小】

? dom.offsetLeft ---> 水平偏移 ? dom.offsetTop ---> 垂直偏移 備注：1.offsetLeft默認是相對整個HTML標簽，如果其父元素是一個定位元素那么就相對其父元素（類似于css中的絕對定位）? dom.offsetWidth ---> 獲取當前元素在瀏覽器中的實際寬度（內容+邊框+內邊距） ? dom.offsetHeight ---> 獲取當前元素在瀏覽器中的實際高度（內容+邊框+內邊距）

client【獲取元素位置和大小】

? dom.clientLeft --> 獲取元素邊框的左邊框的寬度 ? dom.clientTop ---> 獲取元素上邊框的寬度? dom.clientWidth --> 元素寬度【不包括邊框，但是包括內邊距】 ? dom.clientHeight --> 元素高度【不包括邊框，但是包括內邊距】總結：clientHeight = 內容區域 + paddingclientWidth = 內容區域 + padding

scroll【獲取元素位置和大小】

? dom.scrollLeft ---> ? dom.scrollTop --->滾動條向上滾動的距離【內容滾出去的距離】 [滾動事件 onscroll]? dom.scrollWidth ---> 1. 如果內容區域小于當前元素，那么scrollWidth就代表當前元素大小【算內邊距，不算邊框】2. 如果內容區域大于當前元素，那么scrollWidth就等于內容區域大小 + 左內邊距? dom.scrollHeight --->

案例練習

• 拖拽

  鼠標按下事件： onmousedown鼠標抬起事件： onmouseup鼠標移動事件： onmousemove案例思路：1. 鼠標按下時候的位置和鼠標離開時候的位置是相同的2. 鼠標按下時候的位置 = 鼠標在頁面中的位置（e.pagex） - 當前元素在頁面中的位置（offsetLeft）3. 元素最后移動的位置 = 鼠標移動后的位置 - 鼠標按下時候的位置

• 彈出登錄窗口（模擬模態窗口）

• 放大鏡

  1. onmouseenter 和 onmouseleave 屬于一組，不會有事件冒泡2. onmouseover 和 onmouseout 屬性一組，有事件冒泡

• 封裝動畫

  animate.js

素最后移動的位置 = 鼠標移動后的位置 - 鼠標按下時候的位置

- ### 彈出登錄窗口（模擬模態窗口）- ### 放大鏡```js1. onmouseenter 和 onmouseleave 屬于一組，不會有事件冒泡2. onmouseover 和 onmouseout 屬性一組，有事件冒泡

• 封裝動畫

  animate.js

總結

以上是生活随笔為你收集整理的js(Dom+Bom)第七天（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。