JavaScript

BOM介紹

概念

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

BOM頂級對象

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

頁面加載事件

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

定時器

• setTimeout()

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

• setInterval()

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

location對象

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

屬性

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

方法

? reload() 重新加載： 類似于 F5 備注：location.reload(true) 強制從服務(wù)器獲取頁面location.reload(false) 從瀏覽器本地緩存中獲取頁面

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

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

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

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

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

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

案例練習(xí)

• 拖拽

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

• 放大鏡

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

• 封裝動畫

  animate.js

``

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。