系统带你学习 WebAPIs 第五讲
生活随笔
收集整理的這篇文章主要介紹了
系统带你学习 WebAPIs 第五讲
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Web APIs
本篇學(xué)習(xí)目標:
能夠說出常見 offset 系列屬性的作用
能夠說出常見 client 系列屬性的作用
能夠說出常見 scroll 系列屬性的作用
能夠封裝簡單動畫函數(shù)
**1.1. **元素偏移量 offset 系列
1.1.1 offset 概述
offset 翻譯過來就是偏移量， 我們使用 offset系列相關(guān)屬性可以動態(tài)的得到該元素的位置（偏移）、大小等。
獲得元素距離帶有定位父元素的位置
獲得元素自身的大小（寬度高度）
注意：返回的數(shù)值都不帶單位
1.1.2 offset 與 style 區(qū)別
offset
-
offset 可以得到任意樣式表中的樣式值
-
offset 系列獲得的數(shù)值是沒有單位的
-
offsetWidth 包含padding+border+width
-
offsetWidth 等屬性是只讀屬性，只能獲取不能賦值
-
所以，我們想要獲取元素大小位置，用offset更合適
style
-
style 只能得到行內(nèi)樣式表中的樣式值
-
style.width 獲得的是帶有單位的字符串
-
style.width 獲得不包含padding和border 的值
-
style.width 是可讀寫屬性，可以獲取也可以賦值
-
所以，我們想要給元素更改值，則需要用style改變
1.1.3 案例：獲取鼠標在盒子內(nèi)的坐標
1.1.4 案例：盒子拖拽
1.1.5. 案例分析:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.box {position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background-color: green;}</style> </head><body><div class="box"></div><script>/*1) 鼠標在盒子上按下2）鼠標在文檔中移動3）盒子跟著鼠標拖動4）松開鼠標，盒子停止移動*/var box = document.querySelector('.box')// 為box添加mousedown事件，在這個事件中，首先獲取鼠標在盒子中的坐標box.addEventListener('mousedown', function (e) {// 分別獲取鼠標按下時在盒子中的坐標var mouse_x = e.pageX - this.offsetLeftvar mouse_y = e.pageY - this.offsetTop// 鼠標按下之后為文檔添加鼠標移動事件document.addEventListener('mousemove', moveBox)function moveBox(e) {// 不斷獲取盒子距離頁面左側(cè)和頂部的距離var box_left = e.pageX - mouse_xvar box_top = e.pageY - mouse_ybox.style.left = box_left + 'px'box.style.top = box_top + 'px'}// 為盒子添加鼠標松開事件，在此事件中為document移除mousemove事件box.addEventListener('mouseup', function () {document.removeEventListener('mousemove', moveBox)})})</script> </body></html>1.1.6 案例：仿京東放大鏡
1.1.7. 案例分析:
1.2. 元素可視區(qū) client 系列
1.2.1 client概述
client 翻譯過來就是客戶端，我們使用 client 系列的相關(guān)屬性來獲取元素可視區(qū)的相關(guān)信息。通過 client
系列的相關(guān)屬性可以動態(tài)的得到該元素的邊框大小、元素大小等。
1.2.2. 淘寶 flexible.js 源碼分析
立即執(zhí)行函數(shù) (function(){})() 或者 (function(){}())
主要作用： 創(chuàng)建一個獨立的作用域。 避免了命名沖突問題
下面三種情況都會刷新頁面都會觸發(fā) load 事件。
1.a標簽的超鏈接
2.F5或者刷新按鈕（強制刷新）
3.前進后退按鈕
但是 火狐中，有個特點，有個“往返緩存”，這個緩存中不僅保存著頁面數(shù)據(jù)，還保存了DOM和JavaScript的狀態(tài)；實際上是將整個頁面都保存在了內(nèi)存里。
所以此時后退按鈕不能刷新頁面。
此時可以使用 pageshow事件來觸發(fā)。，這個事件在頁面顯示時觸發(fā)，無論頁面是否來自緩存。在重新加載頁面中，pageshow會在load事件觸發(fā)后觸發(fā)；根據(jù)事件對象中的persisted來判斷是否是緩存中的頁面觸發(fā)的pageshow事件
注意這個事件給window添加。
1.3.元素滾動 scroll 系列
1.3.1. scroll 概述
scroll 翻譯過來就是滾動的，我們使用 scroll 系列的相關(guān)屬性可以動態(tài)的得到該元素的大小、滾動距離等。
1.3.2. 頁面被卷去的頭部
如果瀏覽器的高（或?qū)?#xff09;度不足以顯示整個頁面時，會自動出現(xiàn)滾動條。當滾動條向下滾動時，頁面上面被隱藏掉的高度，我們就稱為頁面被卷去的頭部。滾動條在滾動時會觸發(fā) onscroll事件。
1.3.3.案例：仿淘寶固定右側(cè)側(cè)邊欄
1.3.4.案例分析:
1.3.5.頁面被卷去的頭部兼容性解決方案
需要注意的是，頁面被卷去的頭部，有兼容性問題，因此被卷去的頭部通常有如下幾種寫法：
1.4. 三大系列總結(jié)
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;background-color: #fff;border: 10px solid #000;margin-top: 100px;/* overflow: scroll; */}</style> </head><body><div class="box"><p>什么時候開學(xué)啊</p><p>什么時候開學(xué)啊</p><p>什么時候開學(xué)啊</p><p>什么時候開學(xué)啊</p><p>什么時候開學(xué)啊</p><p>什么時候開學(xué)啊</p><p>什么時候開學(xué)啊</p><p>什么時候開學(xué)啊</p><p>什么時候開學(xué)啊</p><p>什么時候開學(xué)啊</p><p>什么時候開學(xué)啊</p><p>什么時候開學(xué)啊</p></div><script>var box = document.querySelector('.box')// 元素的上邊框距離具有定位的父元素的上邊框的距離console.log(box.offsetTop)// 元素的上邊框的大小console.log(box.clientTop)// 元素被卷去的距離console.log(box.scrollTop)// 測試scrollTop// box.addEventListener('scroll',function(){// console.log(box.scrollTop)// })console.log('-----------------')// 獲取的時元素的高度：width+padding+borderconsole.log(box.offsetHeight)// 獲取元素的高度，width+padding（只獲取元素的可視區(qū)域的高度）console.log(box.clientHeight)// 獲取元素的高度，width+padding（只獲取元素的實際的高度）console.log(box.scrollHeight)</script> </body></html>他們主要用法：
1.offset系列 經(jīng)常用于獲得元素位置 offsetLeft offsetTop
2.client經(jīng)常用于獲取元素大小 clientWidth clientHeight
3.scroll 經(jīng)常用于獲取滾動距離 scrollTop scrollLeft
4.注意頁面滾動的距離通過 window.pageXOffset 獲得
1.5. mouseenter 和mouseover的區(qū)別
- 當鼠標移動到元素上時就會觸發(fā)mouseenter 事件
- 類似 mouseover，它們兩者之間的差別是
- mouseover 鼠標經(jīng)過自身盒子會觸發(fā)，經(jīng)過子盒子還會觸發(fā)。mouseenter 只會經(jīng)過自身盒子觸發(fā)
- 之所以這樣，就是因為mouseenter不會冒泡
- 跟mouseenter搭配鼠標離開 mouseleave 同樣不會冒泡
1.6. 動畫函數(shù)封裝
1.6.1. 動畫實現(xiàn)原理
核心原理：通過定時器 setInterval() 不斷移動盒子位置。
實現(xiàn)步驟：
1.6.2. 動畫函數(shù)給不同元素記錄不同定時器
如果多個元素都使用這個動畫函數(shù)，每次都要var 聲明定時器。我們可以給不同的元素使用不同的定時器（自己專門用自己的定時器）。
核心原理：利用 JS 是一門動態(tài)語言，可以很方便的給當前對象添加屬性。
function animate(obj, target) {// 當我們不斷的點擊按鈕，這個元素的速度會越來越快，因為開啟了太多的定時器// 解決方案就是 讓我們元素只有一個定時器執(zhí)行// 先清除以前的定時器，只保留當前的一個定時器執(zhí)行clearInterval(obj.timer);obj.timer = setInterval(function() {if (obj.offsetLeft >= target) {// 停止動畫 本質(zhì)是停止定時器clearInterval(obj.timer);}obj.style.left = obj.offsetLeft + 1 + 'px';}, 30);}重點：
更多前端硬核技術(shù) 總結(jié) 分享 交流 前端大佬社區(qū)誠邀各位加入討論
https://bbs.csdn.net/forums/JHXL
總結(jié)
以上是生活随笔為你收集整理的系统带你学习 WebAPIs 第五讲的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 系统带你学习 WebAPIs 第四讲
- 下一篇： 系统带你学习 WebAPIs —— 动画