JavaScript核心 DOM BOM操作——part3

文章目錄

• 一、PC端網頁特效
• • 1. 元素偏移量 offset 系列
  • • 1.1 offset 概述
    • 1.2 offset 與 style 差別
  • 2. 元素可視區 client 系列
  • • 2.1 client概述
  • 3.元素滾動 scroll 系列
  • • 3.1. scroll 概述
    • 3.2. 頁面被卷去的頭部
    • 3.3 頁面被卷去的頭部相容性解決方案
    • 3.4 三大系列總結
    • 3.5 mouseenter 和mouseover的差別
  • 4. 動畫函數封裝
  • • 4.1 動畫實作原理
    • 4.2 動畫函數簡單封裝
    • 4.3 動畫函數給不同元素記錄不同定時器
    • 4.4 緩動效果原理
    • 4.5 動畫函數多個目标值之間移動
    • 4.6 動畫函數給不同元素記錄不同定時器
    • 4.7 緩動效果原理
    • 4.8 動畫函數多個目标值之間移動
    • 4.9 動畫函數添加回調函數
    • 4.10 動畫函數封裝到單獨JS檔案裡面
• 二、移動端網頁特效
• • 1. 觸屏事件
  • • 1.1 觸屏事件概述
    • 1.2 觸摸事件對象（TouchEvent）
    • 1.3 移動端拖動元素
  • 2. 移動端常見特效
  • • 2.1 classList 屬性
    • 2.2 click 延時解決方案
  • 3. 移動端常用開發插件
  • • 3.1 什麼是插件
    • 3.2 插件的使用
    • 3.3 Swiper 插件的使用
    • 3.4 其他移動端常見插件
    • 3.5 插件的使用總結
  • 4. 移動端常用開發架構
  • • 4.1 移動端視訊插件 zy.media.js
    • 4.2 Bootstrap
• 三、本地存儲
• • 1. 本地存儲特性
  • 2. window.sessionStorage
  • 3. window.localStorage

一、PC端網頁特效

1. 元素偏移量 offset 系列

1.1 offset 概述

offset 翻譯過來就是偏移量， 我們使用 offset系列相關屬性可以動态的得到該元素的位置（偏移）、大小等。

1、獲得元素距離帶有定位父元素的位置

2、獲得元素自身的大小（寬度高度）

3、注意：傳回的數值都不帶機關

1.2 offset 與 style 差別

offset

• offset 可以得到任意樣式表中的樣式值
• offset 系列獲得的數值是沒有機關的
• offsetWidth 包含padding+border+width
• offsetWidth 等屬性是隻讀屬性，隻能擷取不能指派
• 是以，我們想要擷取元素大小位置，用offset更合适

style

• style 隻能得到行内樣式表中的樣式值
• style.width 獲得的是帶有機關的字元串
• style.width 獲得不包含padding和border 的值
• style.width 是可讀寫屬性，可以擷取也可以指派
• 是以，我們想要給元素更改值，則需要用style改變

因為平時我們都是給元素注冊觸摸事件，是以重點記住 targetTocuhes

2. 元素可視區 client 系列

2.1 client概述

client 翻譯過來就是用戶端，我們使用 client 系列的相關屬性來擷取元素可視區的相關資訊。通過 client

系列的相關屬性可以動态的得到該元素的邊框大小、元素大小等。

3.元素滾動 scroll 系列

3.1. scroll 概述

scroll 翻譯過來就是滾動的，我們使用 scroll 系列的相關屬性可以動态的得到該元素的大小、滾動距離等。

3.2. 頁面被卷去的頭部

如果浏覽器的高（或寬）度不足以顯示整個頁面時，會自動出現滾動條。當滾動條向下滾動時，頁面上面被隐藏掉的高度，我們就稱為頁面被卷去的頭部。滾動條在滾動時會觸發 onscroll事件。

3.3 頁面被卷去的頭部相容性解決方案

需要注意的是，頁面被卷去的頭部，有相容性問題，是以被卷去的頭部通常有如下幾種寫法：

1、聲明了 DTD，使用 document.documentElement.scrollTop

2、未聲明 DTD，使用 document.body.scrollTop

3、新方法 window.pageYOffset和 window.pageXOffset，IE9 開始支援

function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
使用的時候  getScroll().left

           

3.4 三大系列總結

他們主要用法：

1、offset系列 經常用于獲得元素位置 offsetLeft offsetTop

2、client經常用于擷取元素大小 clientWidth clientHeight

3、scroll 經常用于擷取滾動距離 scrollTop scrollLeft

4、注意頁面滾動的距離通過 window.pageXOffset 獲得

3.5 mouseenter 和mouseover的差別

• 當滑鼠移動到元素上時就會觸發mouseenter 事件
• 類似 mouseover，它們兩者之間的差别是
• mouseover 滑鼠經過自身盒子會觸發，經過子盒子還會觸發。mouseenter 隻會經過自身盒子觸發
• 之是以這樣，就是因為mouseenter不會冒泡
• 跟mouseenter搭配滑鼠離開 mouseleave 同樣不會冒泡

4. 動畫函數封裝

4.1 動畫實作原理

核心原理：通過定時器 setInterval() 不斷移動盒子位置。

實作步驟：

1、獲得盒子目前位置

2、讓盒子在目前位置加上1個移動距離

3、利用定時器不斷重複這個操作

4、加一個結束定時器的條件

5、注意此元素需要添加定位，才能使用element.style.left

4.2 動畫函數簡單封裝

注意函數需要傳遞2個參數，動畫對象和移動到的距離.

4.3 動畫函數給不同元素記錄不同定時器

如果多個元素都使用這個動畫函數，每次都要var 聲明定時器。我們可以給不同的元素使用不同的定時器（自己專門用自己的定時器）。

核心原理：利用 JS 是一門動态語言，可以很友善的給目前對象添加屬性。

function animate(obj, target) {
            // 當我們不斷的點選按鈕，這個元素的速度會越來越快，因為開啟了太多的定時器
            // 解決方案就是 讓我們元素隻有一個定時器執行
            // 先清除以前的定時器，隻保留目前的一個定時器執行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止動畫 本質是停止定時器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }

           

4.4 緩動效果原理

緩動動畫就是讓元素運動速度有所變化，最常見的是讓速度慢慢停下來

思路：

1、讓盒子每次移動的距離慢慢變小，速度就會慢慢落下來。

2、核心算法： (目标值 - 現在的位置) / 10 做為每次移動的距離步長

3、停止的條件是： 讓目前盒子位置等于目标位置就停止定時器

4、注意步長值需要取整

4.5 動畫函數多個目标值之間移動

可以讓動畫函數從 800 移動到 500。

當我們點選按鈕時候，判斷步長是正值還是負值

​1、如果是正值，則步長往大了取整

​2、如果是負值，則步長 向小了取整

4.6 動畫函數給不同元素記錄不同定時器

如果多個元素都使用這個動畫函數，每次都要var 聲明定時器。我們可以給不同的元素使用不同的定時器（自

己專門用自己的定時器）。

核心原理：利用 JS 是一門動态語言，可以很友善的給目前對象添加屬性。

4.7 緩動效果原理

緩動動畫就是讓元素運動速度有所變化，最常見的是讓速度慢慢停下來

思路：

1、讓盒子每次移動的距離慢慢變小，速度就會慢慢落下來。

2、核心算法： (目标值 - 現在的位置 ) / 10 做為每次移動的距離 步長

3、停止的條件是： 讓目前盒子位置等于目标位置就停止定時器

4、注意步長值需要取整

4.8 動畫函數多個目标值之間移動

可以讓動畫函數從 800 移動到 500。

當我們點選按鈕時候，判斷步長是正值還是負值

1、如果是正值，則步長往大了取整

2、如果是負值，則步長向小了取整

4.9 動畫函數添加回調函數

回調函數原理：函數可以作為一個參數。将這個函數作為參數傳到另一個函數裡面，當那個函數執行完之後，再執行傳進去的這個函數，這個過程就叫做回調。

回調函數寫的位置：定時器結束的位置。

4.10 動畫函數封裝到單獨JS檔案裡面

因為以後經常使用這個動畫函數，可以單獨封裝到一個JS檔案裡面，使用的時候引用這個JS檔案即可。

1、單獨建立一個JS檔案。

2、HTML檔案引入 JS 檔案。

二、移動端網頁特效

1. 觸屏事件

1.1 觸屏事件概述

移動端浏覽器相容性較好，我們不需要考慮以前 JS 的相容性問題，可以放心的使用原生 JS 書寫效果，但是移動端也有自己獨特的地方。比如觸屏事件 touch（也稱觸摸事件），Android 和 IOS 都有。touch 對象代表一個觸摸點。觸摸點可能是一根手指，也可能是一根觸摸筆。觸屏事件可響應使用者手指（或觸控筆）對螢幕或者觸控闆操作。

常見的觸屏事件如下：

1.2 觸摸事件對象（TouchEvent）

TouchEvent 是一類描述手指在觸摸平面（觸摸屏、觸摸闆等）的狀态變化的事件。這類事件用于描述一個或多個觸點，使開發者可以檢測觸點的移動，觸點的增加和減少，等等

touchstart、touchmove、touchend 三個事件都會各自有事件對象。

觸摸事件對象重點我們看三個常見對象清單：

因為平時我們都是給元素注冊觸摸事件，是以重點記住 targetTocuhes

1.3 移動端拖動元素

1、touchstart、touchmove、touchend 可以實作拖動元素

2、但是拖動元素需要目前手指的坐标值 我們可以使用 targetTouches[0] 裡面的pageX 和 pageY

3、移動端拖動的原理：手指移動中，計算出手指移動的距離。然後用盒子原來的位置 + 手指移動的距離

4、手指移動的距離：手指滑動中的位置 減去 手指剛開始觸摸的位置

拖動元素三步曲：

（1）觸摸元素 touchstart： 擷取手指初始坐标，同時獲得盒子原來的位置

（2）移動手指 touchmove： 計算手指的滑動距離，并且移動盒子

（3）離開手指 touchend:

注意： 手指移動也會觸發滾動螢幕是以這裡要阻止預設的螢幕滾動 e.preventDefault();

2. 移動端常見特效

2.1 classList 屬性

classList屬性是HTML5新增的一個屬性，傳回元素的類名。但是ie10以上版本支援。

該屬性用于在元素中添加，移除及切換 CSS 類。有以下方法

添加類：

element.classList.add（’類名’）;

移除類：

element.classList.remove（’類名’）;

切換類：

element.classList.toggle（’類名’）;

注意:以上方法裡面，所有類名都不帶點

2.2 click 延時解決方案

移動端 click 事件會有 300ms 的延時，原因是移動端螢幕輕按兩下會縮放(double tap to zoom) 頁面。

解決方案：

​1、禁用縮放。 浏覽器禁用預設的輕按兩下縮放行為并且去掉300ms 的點選延遲。

​2、利用touch事件自己封裝這個事件解決300ms 延遲。

​原理就是：

• 當我們手指觸摸螢幕，記錄目前觸摸時間
• 當我們手指離開螢幕， 用離開的時間減去觸摸的時間
• 如果時間小于150ms，并且沒有滑動過螢幕， 那麼我們就定義為點選

代碼如下:

//封裝tap，解決click 300ms 延時
function tap (obj, callback) {
        var isMove = false;
        var startTime = 0; // 記錄觸摸時候的時間變量
        obj.addEventListener('touchstart', function (e) {
            startTime = Date.now(); // 記錄觸摸時間
        });
        obj.addEventListener('touchmove', function (e) {
            isMove = true;  // 看看是否有滑動，有滑動算拖拽，不算點選
        });
        obj.addEventListener('touchend', function (e) {
            if (!isMove && (Date.now() - startTime) < 150) {  // 如果手指觸摸和離開時間小于150ms 算點選
                callback && callback(); // 執行回調函數
            }
            isMove = false;  //  取反 重置
            startTime = 0;
        });
}
//調用  
  tap(div, function(){   // 執行代碼  });

           

3、使用插件。fastclick 插件解決300ms 延遲。

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-irsMzzyW-1612670777615)(images\1551797533(1)].jpg)

3. 移動端常用開發插件

3.1 什麼是插件

移動端要求的是快速開發，是以我們經常會借助于一些插件來幫我完成操作，那麼什麼是插件呢？

JS 插件是 js 檔案，它遵循一定規範編寫，友善程式展示效果，擁有特定功能且友善調用。如輪播圖和瀑布流插件。

特點：它一般是為了解決某個問題而專門存在，其功能單一，并且比較小。

我們以前寫的animate.js 也算一個最簡單的插件

fastclick 插件解決 300ms 延遲。 使用延時

GitHub官網位址： https://github.com/ftlabs/fastclick

3.2 插件的使用

1、引入 js 插件檔案。

2、按照規定文法使用。

3、fastclick 插件解決 300ms 延遲。 使用延時

4、GitHub官網位址： https://github.com/ftlabs/fastclick

if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
            }, false);
}
           

3.3 Swiper 插件的使用

中文官網位址： https://www.swiper.com.cn/

1、引入插件相關檔案。

2、按照規定文法使用

3.4 其他移動端常見插件

superslide： http://www.superslide2.com/

iscroll： https://github.com/cubiq/iscroll

3.5 插件的使用總結

1、确認插件實作的功能

2、去官網檢視使用說明

3、下載下傳插件

4、打開demo執行個體檔案，檢視需要引入的相關檔案，并且引入

5、複制demo執行個體檔案中的結構html，樣式css以及js代碼

4. 移動端常用開發架構

4.1 移動端視訊插件 zy.media.js

架構，顧名思義就是一套架構，它會基于自身的特點向使用者提供一套較為完整的解決方案。架構的控制權在架構本身，使用者要按照架構所規定的某種規範進行開發。

插件一般是為了解決某個問題而專門存在，其功能單一，并且比較小。

前端常用的架構有 Bootstrap、Vue、Angular、React 等。既能開發PC端，也能開發移動端

前端常用的移動端插件有 swiper、superslide、iscroll等。

架構：大而全，一整套解決方案

插件：小而專一，某個功能的解決方案

4.2 Bootstrap

Bootstrap 是一個簡潔、直覺、強悍的前端開發架構，它讓 web 開發更迅速、簡單。

它能開發PC端，也能開發移動端

Bootstrap JS插件使用步驟：

1、引入相關js 檔案

2、複制HTML 結構

3、修改對應樣式

4、修改相應JS 參數

三、本地存儲

随着網際網路的快速發展，基于網頁的應用越來越普遍，同時也變的越來越複雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的資料，HTML5規範提出了相關解決方案。

1. 本地存儲特性

1、資料存儲在使用者浏覽器中

2、設定、讀取友善、甚至頁面重新整理不丢失資料

3、容量較大，sessionStorage約5M、localStorage約20M

4、隻能存儲字元串，可以将對象JSON.stringify() 編碼後存儲

2. window.sessionStorage

1、生命周期為關閉浏覽器視窗

2、在同一個視窗(頁面)下資料可以共享

3、以鍵值對的形式存儲使用

存儲資料：

擷取資料：

删除資料：

清空資料：(所有都清除掉)

3. window.localStorage

1、聲明周期永久生效，除非手動删除 否則關閉頁面也會存在

2、可以多視窗（頁面）共享（同一浏覽器可以共享）

3、以鍵值對的形式存儲使用

存儲資料：

擷取資料：

删除資料：

清空資料：(所有都清除掉)