admin管理员组文章数量:1588386
WebAPIs
- BOM
- 一、使js代码在确保页面加载完成后再进行(onload)
- 二、调整窗口事件
- 三、定时器(自动循环工具)
- 四、同步 / 异步
- 五、location对象
- 1.URL
- 2.获取URL参数数据
- 3、location对象常用方法
- 六、navigator对象
- 七、history对象
- 八、PC端网页特效
- 1、元素偏移量 offset 系列
- 2、offset 与 style 的区别
- 3、元素可视区 client 系列
- 4、元素滚动 scroll 系列
- 九、立即调用函数
- 十、实现动画的原理
- 1、动画封装
- 2、缓动动画(变速运动)
- 3、动画效果通用 js 代码
- 十一、复制
- 十二、手动调用鼠标键盘事件
- 十三、节流阀
- 十四、滚动到页面某个地方(例如返回顶部)
- 十五、移动端
- 1、触屏事件
- 2、触摸事件对象
- 3、拖动元素
- 4、移动端轮播图
- 5、移动端功能插件
BOM
BOM是浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window
也是JS的一个接口
这里要注意:不可以用 name 作为声明名字,因为 window.name本身是有定义的。
一、使js代码在确保页面加载完成后再进行(onload)
1、一般写一个然后全包含:
window.onload = () => {
这里写 js 操作代码
}
2、如果需要写多个 load ,则使用监听函数
window.addEventListener('load',function(){ ... });
3、在页面图片太多的情况下,使用这种这种写法可以先加载页面出来,再加载图片,flash,css等,加载速度比 load 更快些。
document.addEventListener('DOMContentLoaded', function () { })
二、调整窗口事件
只要窗口发生变化,就会触发 resize 事件,所以一般配合 window.innerWidth 窗口宽度高度来响应变化
window.addEventListener('resize', () => {
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
三、定时器(自动循环工具)
1、一次性定时器
后面的数字是毫秒,不写的话默认是0
setTimeout(function(){ ... }, 2000)
2、停止定时器 clearTimeout( … )
首先定时器应该有名字
var time1 = setTimeout(function(){ ... }, 2000)
xxx.addEventListener(' 触发类型 ',()=>{
clearTimeout( time1 )
})
3、重复定时器
后面的数字表示,每隔2秒执行一次函数
setInterval(function(){ ... }, 2000)
4、停止重复定时器
首先定时器应该有名字
var time2 = setInterval(function(){ ... }, 2000)
xxx.addEventListener(' 触发类型 ',()=>{
clearInterval( time2 )
})
四、同步 / 异步
JS是单线程语言。为了解决这个问题,HTML5 提出了 Web Worker 标准,允许建立多线程。于是出现了同步和异步
系统自动分为同步任务和异步任务
1、同步任务指的就是直接的执行语句,放在执行栈中,优先执行
2、异步任务指的是子语句、回调函数、条件方法体等,放在异步处理进程中,分别处理执行
系统优先执行同步任务,再到异步处理进程中,寻找执行语句,并依次执行,在寻找再执行,形成事件循环。
五、location对象
1.URL
统一资源定位符,是互联网上标准资源的地址。互联网上每个文件都有一个唯一的URL,包含信息指出文件的位置以及浏览器应该怎么处理它。
语法格式为如下:
protocol://host [:port]/path/[?query]#fragment
http://www.itcast/index.html?name=andy&age=18#link
组成 | 说明 |
---|---|
protocol | 通信协议常用的 http,ftp,maitos等 |
host | 主机(域名) www.itheima |
port | 端口号 可选,省略时使用方案默认端口 如http的默认端口为80 |
path | 路径 由 零或多个 ’ / ’ 符号隔开的字符串,一般用来表示主机上的一个目录或文件地址 |
query | 参数 以 键值对 的形式通过&符号分隔开来 |
fragment | 片段 #后面内容 常见于链接 锚点 |
2.获取URL参数数据
① 举一个例子:
前面有一个表单:
经过输入并点击登录之后 (这里注意,中文字符会被编译成乱码,需要翻译,后面学好了补回来)
index.html网页中就收到了location参数,此时如果直接输出,则会输出带 “?” 的参数
使用 substr 截取掉?并使用 split(’=’) 识别分割成字符串,就可以提取其中的数据信息了
3、location对象常用方法
location对象方法 | 返回值 |
---|---|
location.assign() | 跟href一样,可以跳转页面(支持记录历史,可以实现后退功能) |
location.assign() | 替换当前页面(不记录历史,所以无法后退页面) |
location.assign() | 刷新页面,如果里面的参数为true,就相当于强制刷新 |
六、navigator对象
navigator对象包含有关浏览器的信息,有很多属性
最常用的就是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值
七、history对象
history对象用于网页的历史记录交互功能。
history对象 | 作用 |
---|---|
back() | 可以后退功能 |
forward() | 前进功能 |
go(参数) | 前进后退功能,尝试如果是1 => 前进1个页面,如果是-1 => 后退1个页面 |
八、PC端网页特效
1、元素偏移量 offset 系列
使用offset系列的相关属性可以动态得到该元素的位置、大小等信息
、获得元素距离带有定位父元素的位置
、获得元素自身的大小(宽度高度)
、返回的素质都不带单位
offset系列常用属性:
offset系列属性 | 作用 |
---|---|
element.offsetParent | 返回作为该元素带有定位的父级元素 如果父级都没有定位这返回 body |
element.offsetTop | 返回元素相对带有定位的父元素上方的偏移 |
element.offsetLeft | 返回元素相对带有定位的父元素左边框的偏移 |
element.offsetWidth | 返回自身包括padding、边框、内容区的宽度,返回数值不带单位 |
element.offsetHeight | 返回自身包括padding、边框、内容区的高度,返回数值不带单位 |
2、offset 与 style 的区别
简而言之就是,用 offset 来获取元素大小,用 style 来更改值
3、元素可视区 client 系列
通过 client 的相关属性来获取元素可视区的相关信息,该元素的边框大小、元素大小等
注意的是:clientWidth 的获取和 offsetWidth 获取的区别,一个带单位带边框,另一个不带边框
4、元素滚动 scroll 系列
主要适用于内容大于盒子大小的情况,此时内容会有滚动效果
如果单纯使用 clientHeight 只会返回可视区的大小,并非内容
如果是页面被卷去头部,用 window.pageYOffset 来获取
九、立即调用函数
# 常规:
function fn(){
......
}
fn();
# 立即调用:
(function(){
......
})()
//这里加个小括号表示立即调用,括号内也可以用来传递参数,但需要和前面的括号里面的参数格式对应
十、实现动画的原理
1、获得盒子当前位置
2、让盒子在当前位置加上1个移动距离
3、用定时器不断重复这个操作
4、加一个结束定时器的条件
5、注意此元素需要添加定位,才能使用 element.style.left。
1、动画封装
① 要有两个参数,(目标对象,目标位置)
② 将整个动画过程,用一个带参数的方法封装起来,使用参数调用方法的方式调用方法。
③为了避免事件重复触发造成死循环,一般方法内加上调用前先清除原方法的方式
2、缓动动画(变速运动)
① 加回调函数:
回调函数需写在定时器里面;
回调函数可以作为参数写在实参里面。
② 减速运动的算法:(目标值 - 现在的位置)/ 10 = 每次移动的距离
(需要加个停止条件,否则就会不断移动成为死循环)
建议把步长取整数,不要出现小数的情况,正数向上取整(Math.ceil),负数向下取整(Math.floor)
3、动画效果通用 js 代码
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(() => {
let step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
if (callback) {
callback();
}
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 30)
}
十一、复制
xxx.cloneNode(); 克隆函数,复制并返回副本
括号内是 true,则复制 xxx 节点的所有子孙节点
若是flase,则只是复制 xxx 节点的所有子节点
十二、手动调用鼠标键盘事件
例如,一个鼠标点击事件
arrowL.addEventListener(‘click’, () => { … }
我们可以直接手动调用
arrowL.click();
十三、节流阀
为了防止点击过快造成动画异常
思路是建立一个锁(true / false),在动画的前后进行锁住和打开,并结合回调函数
function xxx(){
flag = false; //关锁
......
animate(obj,target,()=>{
flag = true; //开锁
});
}
十四、滚动到页面某个地方(例如返回顶部)
window.scroll(x,y);
(普通页面只需要y值的具体大小即可)
想在跳转页面中加上动画效果
① 把原本的动画中的 obj.offsetLeft 改成 window.pageYOffset (垂直页面距离)
② obj.style.left = obj.offsetLeft + step + ‘px’; 改成 window.scroll(0, window.pageYOffset + step);
③ 调用对象设置为 window
十五、移动端
1、触屏事件
2、触摸事件对象
① touchstrat 对象
3、拖动元素
① 使用 touchstart 、 touchmove 、touchend 结合实现拖动元素的操作
② 手指坐标用 targetTouches[0] 里面的 pageX 和pageY
③ 手指移动距离+盒子原来的位置=盒子拖动后位置
④ 手指移动距离:手指滑动中的位置 - 手指刚开始的位置
⑤ 格外注意,考虑是否要阻止屏幕滚动事件,否则移动模块屏幕也会影响
var div = document.querySelector('div');
var startX = 0; //手指的初始坐标
var startY = 0;
var x = 0; //盒子的初始位置
var y = 0;
div.addEventListener('touchstart', (e) => {
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
x = div.offsetLeft;
y = div.offsetTop;
})
div.addEventListener('touchmove', (e) => {
//手指移动距离
let moveX = e.targetTouches[0].pageX - startX;
let moveY = e.targetTouches[0].pageY - startY;
//移动盒子
div.style.left = x + moveX + 'px';
div.style.top = y + moveY + 'px';
//阻止屏幕滚动的默认行为
e.preventDefault();
})
4、移动端轮播图
5、移动端功能插件
www.swiper
www.superslide2
github/cubiq/iscroll
① 引入相关 swiper 文件
<link rel="stylesheet" href="../../swiper-bundle.min.css">
<script src="../../swiper-bundle.min.js"></script>
② 按规定使用插件
1.打开想要的功能插件的相关网页
2.原封不动的复制里面的结构样式及js
3.再在上面进行一定基础的修改即可
本文标签: JavaScript
版权声明:本文标题:JavaScript(三) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1728025637a1142642.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论