js(Dom+Bom)第七天(1)
生活随笔
收集整理的這篇文章主要介紹了
js(Dom+Bom)第七天(1)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
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()
-
setInterval()
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組成
-
詳解
-
protocol
-
host
-
port
-
pathname
屬性介紹
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ū)域 + paddingscroll【獲取元素位置和大小】
? 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)題。
- 上一篇: 最终的动画函数封装(2)
- 下一篇: js(Dom+Bom)第七天(2)