目录
一、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()