前端--JS.3

目录

一、BOM

二、PC端网页特效

三、移动端网页特效

一、BOM

BOM 概述：window 对象是浏览器的顶级对象，它具有双重角色，它是JS 访问浏览器窗口的一个接口，它是一个全局对象。定义在全局作用域中的变量、函数都会变成window 对象的属性和方法

在调用的时候可以省略 window，前面学习的对话框都属于window对象方法，如alert()、prompt()等

注意: window下的一个特殊属性 window.name

window 对象的常见事件：

窗口加载事件：window.onload 是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)，就调用的处理函数

window.onload = function () {}
// 或者
window.addEventlistener("load", function (){});

注意：

• 有了 window.onload 就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕再去执行处理函数
• window.onload 传统注册事件方式只能写一次，如有多个，会以最后一个window.onload为准
• 如果使用 addEventListener 则没有限制

document .addEventListener('DOMContentLoaded' , function(){}) // le9以上才支持

• DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等,速度比 load 快
• 如果页面的图片很多的话,从用户访问到 onload 触发可能需要较长的时间,交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适

窗口调整事件：window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数，我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

window.onresize = function(){}
// 或者
window.addEventListener ("resize", function () {});

注意：只要窗口大小发生像素变化，就会触发这个事件

定时器：

setTimeout()定时器：

window.setTimeout(调用函数，[延迟的毫秒数]);

setTimeout() 方法：用于设置一个定时器，该定时器在定时器到期后执行调用函数

注意：

• window 可以省略
• 这个调用函数可以直接写函数，或者写函数名或者采取字符串 '函数名()' 三种形式。第三种不推荐
• 延迟的毫秒数省略默认是0，如果写，必须是毫秒
• 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

停止 setTimeout() 定时器：

window.clearTimeout (timeoutID),

clearTimeout() 方法 ：取消了先前通过调用 setTimeout()建立的定时器

注意：

• window 可以省略
• 里面的参数就是定时器的标识符（名字）

setInterval() 定时器：

window.setInterval(回调函数，[间隔的毫秒数]);

setInterval() 方法 ：重复调用一个函数，每隔这个时间，就去调用一次回调函数

注意事项与 setTimeout() 定时器一样

停止 setInterval() 定时器：

window.clearInterval(intervalID);

clearInterva1() 方法 ：取消了先前通过调用 setInterva1() 建立的定时器

注意事项与停止 setTimeout() 定时器一样

JS 执行机制：由于主线程不断地重复获得任务、执行任务、再获取任务再执行，故此机制被称为事件循环（event loop）

同步任务与异步任务：同步任务都在主线程上执行，形成一个执行栈；异步任务,JS的异步是通过回调函数实现的

一般而言，异步任务有以下三种类型：

• 普通事件：如click、resize等
• 资源加载：如load、error等
• 定时器：包括setInterval、setTimeout等

执行机制原理：先执行执行栈中的同步任务，异步任务(回函数)放入任务队列中，一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

location 对象：

对象属性：重点记住 href 和 search ：

location.href  ：获取或者设置 整个URL

location.host  ：返回主机 (域名) www.itheima.com

location.port  ：返回端口号 如果未写返回 空字符串

location.pathname  ：返回路径

location.search  ：返回参数

location. hash  ：返回片段 #后面内容 常见于链接 锚点

对象方法：

location.assign()  ：跟 href 一样，可以跳转页面 (也称为重定向页面),记录历史，可以实现后退功能

location.replace()  ：替换当前页面，因为不记录历史，所以不能后退页面

location.reload()  ：重新加载页面，相当于刷新按钮或者 f5 如果参数为true 强制刷新 ctrl+f5

navigator对象：

history对象：

history对象方法

back()  ：后退功能</li>

forward()  ：前进功能</li>

go(参数)  ：前进后退功能 参数如果是 1 前进1个页面 如果是-1 后退1个页面

二、PC端网页特效

元素偏移量 offset ：offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。获得元素距离带有定位父元素的位置，获得元素自身的大小(宽度高度)。注意：返回的数值都不带单位

element.offsetParent：返回作为该元素带有定位的父级元素如果父级都没有定位则返回body

element.offsetTop  ：返回元素相对带有定位父元素上方的偏移

element.offsetLeft  ：返回元素相对带有定位父元素左边框的偏移

element.offsetWidth  ：返回自身包括padding 、 边框、内容区的宽度，返回数值不带单位

element,offsetHeight  ：返回自身包括padding、边框、内容区的高度，返回数值不带单位

元素可视区 client ：client 翻译过来就是客户端，我们使用client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等

element.clientTop  ：返回元素上边框的大小

element.clientLeft  ：返回元素左边框的大小

element.clientWidth：返回自身包括padding ，内容区的宽度，不含边框，返回数值不带单位

element.clientHeight：返回自身包括padding ，内容区的高度，不含边框，返回数值不带单位

立即执行函数：

(function(){})()
// 或者
(function(){}())

元素滚动 scroll : scroll 翻译过来就是滚动的，我们使用 croll 系列的相关属性可以动态的得到该元素的大小、滚动距离等

element.scrollTop  ：返回被卷去的上侧距离，返回数值不带单位

element.scrollLeft  ：返回被卷去的左侧距离，返回数值不带单位

element.scrollWidth  ：返回内容实际的宽度，不含边框，返回数值不带单位

element.scrollHeight  ：返回内容实际的高度，不含边框，返回数值不带单位

mouseenter 和 mouseover 的区别：

• mouseenter 鼠标事件：当鼠标移动到元素上时就会触发
• mouseenter 事件：类似 mouseover
• mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发
• 因为 mouseenter 不会冒泡

动画实现原理：

核心原理：通过定时器 setlnterval() 不断移动盒子位置

实现步骤：

• 获得盒子当前位置
• 让盒子在当前位置加上1个移动距离
• 利用定时器不断重复这个操作
• 加一个结束定时器的条件
• 注意此元素需要添加定位，才能使用 element.style,left

clearInterva1(obj.timer);  清除以前的定时器，只保留当前的一个定时器执行

缓动效果原理：缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

步骤：

• 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
• 核心算法:(目标值-现在的位置)/ 10 做为每次移动的距离步长
• 停止的条件是:让当前盒子位置等于目标位置就停止定时器

三、移动端网页特效

触屏事件：touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作

常见的触屏事件：

touchstart  ：手指触摸到一个 DOM 元素时触发

touchmove  ：手指在一个 DOM 元素上滑动时触发

touchend  ：手指从一个 DOM 元素上移开时触发

触摸事件对象：

touches  ：正在触摸屏幕的所有手指的一个列表

targetTouches  ：正在触摸当前 DOM 元素上的手指的一个列表

changedTouches  ：手指状态发生了改变的列表，从无到有，从有到无变化

拖动元素：touchstart、touchmove、touchend 可以实现拖动元素，但是拖动元素需要当前手指的坐标值我们可以使用 targetTouches[0] 里面的 pageX 和 pageY

• 移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置+ 手指移动的距离
• 手指移动的距离: 手指滑动中的位置减去手指刚开始触摸的位置
• 拖动元素三步曲：

touchstart ：触摸元素，获取手指初始坐标，同时获得盒子原来的位置

touchmove ：移动手指，计算手指的滑动距离，并且移动盒子

touchend ：离开手指

• 注意：手指移动也会触发滚动屏幕所以这里要止默认的屏幕滚动  e.preventDefault0;

移动端常用开发插件：

什么是插件：JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件

特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小

fastclick 插件网址 ：https://github.com/ftlabs/fastclick   解决300ms延迟。使用延时

Swiper 插件网址 ：https://www.swiper.com.cn/   解决轮播图问题

superslide 插件网址 ：http://www.superslide2.com/ 

iscroll 插件网址 ：https://github.com/cubiq/iscroll

本地存储：

本地存储特性：数据存储在用户浏览器中，设置、读取方便、甚至页面刷新不丢失数据，容量较大，sessionStorage约5M、localStorage约20M，只能存储字符串，可以将对象 JSON.stringify() 编码后存储

window.sessionStorage 数据的存储以及获取：生命周期为关闭浏览器窗口，在同一个窗口(页面)下数据可以共享，以键值对的形式存储使用

存储数据：sessionStorage.setitem(key, value)

获取数据：sessionStoragegetltem(key)

删除数据：sessionStorage.removeltem(key)

删除所有数据：sessionStorage.clear()

window.localStorage 数据的存储以及获取：生命周期永久生效，除非手动删除否则关闭页面也会存在，可以多窗口(页面)共享(同一浏览器可以共享)，以键值对的形式存储使用

存储数据：localStorage.setItem(key, value)

获取数据：localStorage.getitem(key)

删除数据：localStorage.removeltem(key)

删除所有数据：localStorage.dear()