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、以键值对的形式存储使用

存储数据：

获取数据：

删除数据：

清空数据：(所有都清除掉)