JavaScript

BOM介紹

概念

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

BOM頂級(jí)對(duì)象

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

頁(yè)面加載事件

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

定時(shí)器

• setTimeout()

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

• setInterval()

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

location對(duì)象

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

屬性

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

方法

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

其他屬性

• url組成

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

• 詳解

• protocol

通信協(xié)議，常用的http，ftp

• host

主機(jī)，服務(wù)器域名系統(tǒng)（DNS）或者IP地址

• port

端口號(hào)，默認(rèn)端口號(hào) 8080

• pathname

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

屬性介紹

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

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

? dom.offsetLeft ---> 水平偏移 ? dom.offsetTop ---> 垂直偏移 備注：1.offsetLeft默認(rèn)是相對(duì)整個(gè)HTML標(biāo)簽，如果其父元素是一個(gè)定位元素那么就相對(duì)其父元素（類(lèi)似于css中的絕對(duì)定位）? dom.offsetWidth ---> 獲取當(dāng)前元素在瀏覽器中的實(shí)際寬度（內(nèi)容+邊框+內(nèi)邊距） ? dom.offsetHeight ---> 獲取當(dāng)前元素在瀏覽器中的實(shí)際高度（內(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 --->滾動(dòng)條向上滾動(dòng)的距離【內(nèi)容滾出去的距離】 [滾動(dòng)事件 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)移動(dòng)事件： onmousemove案例思路：1. 鼠標(biāo)按下時(shí)候的位置和鼠標(biāo)離開(kāi)時(shí)候的位置是相同的2. 鼠標(biāo)按下時(shí)候的位置 = 鼠標(biāo)在頁(yè)面中的位置（e.pagex） - 當(dāng)前元素在頁(yè)面中的位置（offsetLeft）3. 元素最后移動(dòng)的位置 = 鼠標(biāo)移動(dòng)后的位置 - 鼠標(biāo)按下時(shí)候的位置

• 彈出登錄窗口（模擬模態(tài)窗口）

• 放大鏡

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

• 封裝動(dòng)畫(huà)

  animate.js

素最后移動(dòng)的位置 = 鼠標(biāo)移動(dòng)后的位置 - 鼠標(biāo)按下時(shí)候的位置

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

• 封裝動(dòng)畫(huà)

  animate.js

總結(jié)

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

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