2. 程式人生 > 其它 >JavaScript核心 DOM BOM操作——part3

JavaScript核心 DOM BOM操作——part3

阿新 • • 發佈：2021-02-08

技術標籤：前端javascript

文章目錄

一、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（’類名’）;

focus.classList.add('current');

移除類：

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

focus.classList.remove('current');

切換類：

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

focus.classList.toggle('current');

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

2.2 click 延時解決方案

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

解決方案：

​1、禁用縮放。 瀏覽器禁用預設的雙擊縮放行為並且去掉300ms 的點選延遲。

  <meta name="viewport" content="user-scalable=no">

​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、以鍵值對的形式儲存使用

儲存資料：

sessionStorage.setItem(key, value)

獲取資料：

sessionStorage.getItem(key)

刪除資料：

sessionStorage.removeItem(key)

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

sessionStorage.clear()

3. window.localStorage

1、宣告週期永久生效，除非手動刪除 否則關閉頁面也會存在

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

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

儲存資料：

localStorage.setItem(key, value)

獲取資料：

localStorage.getItem(key)

刪除資料：

localStorage.removeItem(key)

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

localStorage.clear()

相關推薦

JavaScript核心 DOM BOM操作——part3

技術標籤：前端javascript 文章目錄 一、PC端網頁特效1. 元素偏移量 offset 系列1.1 offset 概述1.2 offset 與 style 區別

前端基礎進階-JavaScript核心 DOM BOM操作-第一天課後作業

技術標籤：JS課後作業-Pinkjavascript 第一天 世紀佳緣 使用者名稱 顯示隱藏內容功能描述程式碼實現注意事項

前端之JavaScript函式以及BOM、DOM操作等相關內容-57

函式與BOM、DOM操作 1.函式 1.javascript中的變數提升和函式提升 1、在js中只有兩種作用域

JavaScript——BOM操作、DOM操作

JavaScript——BOM操作、DOM操作 一、BOM操作 1.1 window相關操作 /* BOM（Browser Object Model）是指瀏覽器物件模型，它使 JavaScript 有能力與瀏覽器進行“對話”

JavaScript HTML DOM 元素 (節點)新增，編輯，刪除操作例項分析

本文例項講述了JavaScript HTML DOM 元素 (節點)新增，編輯，刪除操作。分享給大家供大家參考，具體如下：

JavaScript DOM常用操作程式碼彙總

1.理解DOM： 　　DOM（Document Object Model ，文件物件模型）一種獨立於語言，用於操作xml，html文件的應用程式設計介面。

js-API 03 DOM節點操作，BOM

DOM 一，節點 HTML 文件中的所有內容都是節點： 整個文件是一個文件節點document，每個 HTML 元素是元素節點，HTML 元素內的文字是文字節點，每個 HTML 屬性是屬性節點，註釋是註釋節點

JavaScript DOM-事件操作

事件 註冊事件 給元素新增事件，為註冊事件或者繫結事件 註冊事件兩種方式 傳統方式

javascript DOM節點操作

javascript DOM節點操作 DOM節點示意圖： 簡單來說就是通過一些屬性 獲取html中的節點 進行操作

前端基礎學習（4） BOM DOM 節點操作 事件

前端基礎學習（4） BOM DOM 節點操作 事件 一、今日內容 BOM (Browser Object Model) DOM (Documentaty Object Model)

JavaScript的DOM，BOM簡單介紹

技術標籤：JavaScriptjs JavaScript能幹什麼 html：決定網頁的結構（腦袋，身體，手腳）

JavaScript之DOM操作

技術標籤：前端 DOM簡介 是什麼？    DOM，全稱 Document Object Model，文件物件模型。

再談BOM和DOM(3):DOM節點操作-元素樣式修改及DOM內容增刪改查

web前端開發，JS修改頁面，首選就是的頁面元素查詢，節點遍歷。DOM通過建立樹來表示文件，描述了處理網頁內容的方法和介面，從而使開發者對文件的內容和結構具有空前的控制力，用DOM API可以輕鬆地刪除、新增和替換

JavaScript：DOM操作 - 簡介

在一個html頁面中，會使用很多標籤來規劃製作頁面。 每個標籤都有它存在的意義，如果我們想要動態的修改某個標籤的值。那我們就需要在頁面中查詢 到這個標籤元素

原生 JavaScript 的 DOM 操作彙總

經常有人講在 IDE 中寫 C#、Java 會越來越手殘，那麼經常用 jQuery 也會讓我們忘記 JavaScript 是如何操作 DOM 的。 JavaScript的DOM操作也是面試中的常見問題，尤其是當你需要回答jQuery的效能問題時，便需要再次回

DOM節點操作、事件物件與BOM

------------恢復內容開始------------ 節點型別 通過noteType屬性可以獲取節點的型別

JavaScript DOM 基礎操作

JavaScript DOM 基礎操作 一、獲取元素的六方式 document.getElementById(\'id名稱\')//根據id名稱獲取

BOM操作及DOM操作

BOM（brower object model） 瀏覽器物件模型 常用物件 windowwindow的子物件document 文件物件（表示整個html文件的內容）location （位址列url物件）

前端開發 5 BOM操作與DOM操作

今日內容詳細 目錄 今日內容詳細 BOM操作 window的子物件 navigator物件 screeen物件 history物件

常用BOM操作 DOM操作 事件 jQuery類庫

目錄 BOM操作 常用BOM操作 三種彈出框 alert confirm prompt 定時任務 setTimeout迴圈定時 setInterval