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