本笔记整理自pink老师前端课程【JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续】 https://www.bilibili.com/video/BV1Sy4y1C7ha/?share_source=copy_web
| 🔥前端三件套之 JavaScript 基础与进阶 | 地址 |
|---|---|
| （一）JavaScript基础语法汇总 | https://blog.csdn.net/weixin_42771853/article/details/129170328 |
| （二）数组、函数、作用域与预解析 | https://blog.csdn.net/weixin_42771853/article/details/129170608 |
| （三）对象与内置对象 | https://blog.csdn.net/weixin_42771853/article/details/129170714 |
| （四）DOM技术 | https://blog.csdn.net/weixin_42771853/article/details/129170976 |
| （五）BOM技术 | https://blog.csdn.net/weixin_42771853/article/details/129171073 |
一、元素偏移量 offset 系列
1. offset 概述
offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
- 注意：返回的数值都不带单位
offset 系列常用属性：
2. offset 与 style 区别
| offset | style |
|---|---|
offset 可以得到任意样式表中的样式值 | style 只能得到行内样式表（内嵌样式表等不行）中的样式值 |
offset 系列获得的数值是没有单位的 | style.width 获得的是带有单位的字符串 |
offsetWidth 包含 padding+border+width | style.width 获得不包含 padding 和 border 的值 |
offsetWidth 等属性是只读属性，只能获取不能赋值 | style.width 是可读写属性，可以获取也可以赋值 |
所以，我们想要获取元素大小位置，用 offset更合适 | 所以，我们想要给元素更改值，则需要用 style 改变 |
3. 案例
3.1 获取鼠标在盒子内部的坐标
- 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。
- 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）
- 其次得到盒子在页面中的距离( box.offsetLeft, box.offsetTop)
- 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标
- 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件mousemove
<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
box.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x的坐标为' + x + ' y的坐标为' + y;
})
</script>
</body>
3.2 模态框拖拽
- 点击弹出层， 会弹出模态框， 并且显示灰色半透明的遮挡层。
- 点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。
- 鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。
- 鼠标松开，可以停止拖动模态框移动。
- 在页面中拖拽的原理： 鼠标按下mousedown并且移动mousemove，之后松开鼠标mouseup
- 鼠标按下触发的事件源是 最上面一行，就是 id 为 title
- 拖拽过程: 鼠标移动过程中，获得最新的值赋值给模态框的left和top值， 这样模态框可以跟着鼠标走了
- 鼠标的坐标 - 鼠标在盒子内的坐标， 才是模态框真正的位置。
- 鼠标按下，我们要得到鼠标在盒子的坐标。
- 鼠标移动，就让模态框的坐标设置为 ： 鼠标坐标 - 盒子坐标即可，注意移动事件写到按下事件里面。
- 鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除
- 鼠标的坐标 - 鼠标在盒子内的坐标， 才是模态框真正的位置。
//1. 鼠标按下时，获取鼠标在盒子中的位置
title.addEventListener('mousedown', function (e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
//2. 鼠标移动过程中，获取鼠标实时位置，盒子跟随移动
document.addEventListener('mousemove', move);
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
//3. 鼠标弹起，移动事件解除
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move);
})
})
3.3 仿京东放大镜
整个案例可以分为三个功能模块：
- 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能
- 黄色的遮挡层跟随鼠标功能。
- 移动黄色遮挡层，大图片跟随移动功能。
- 黄色的遮挡层跟随鼠标功能
- 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。
- 首先是获得鼠标在盒子的坐标。
- 之后把数值给遮挡层做为left 和top值。
- 发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。
- 遮挡层不能超出小图片盒子范围
- 如果小于零，就把坐标设置为0
- 如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
- 遮挡层的最大移动距离：小图片盒子宽度 - 遮挡层盒子宽度
- 移动黄色遮挡层，大图片跟随移动功能
- 遮挡层移动距离 / 遮挡层最大移动距离 = 大图片移动距离 / 大图片最大移动距离
- 大图片移动距离 = 遮挡层移动距离* 大图片最大移动距离 / 遮挡层最大移动距离
- 遮挡层移动距离 / 遮挡层最大移动距离 = 大图片移动距离 / 大图片最大移动距离
// 1. 鼠标移动，mask跟随移动
preview_img.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 遮挡层移动距离
var maskX = x - mask.offsetWidth / 2; // 再减去盒子自身宽度的一半
var maskY = y - mask.offsetHeight / 2; // 再减去盒子自身高度的一半
// 遮挡层的最大移动距离
var maskMaxX = this.offsetWidth - mask.offsetWidth;
var maskMaxY = this.offsetHeight - mask.offsetHeight;
// 大图片最大移动距离
var bigMaxX = bigImg.offsetWidth - big.offsetWidth;
var bigMaxY = bigImg.offsetHeight - big.offsetHeight;
// 限制mask的移动范围在图片框内
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMaxX) {
maskX = maskMaxX;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMaxY) {
maskY = maskMaxY;
}
mask.style.left = maskX + 'px'; // 赋坐标值给 mask
mask.style.top = maskY + 'px';
// 3. 鼠标移动，大图跟随移动
// 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
var bigX = maskX * bigMaxX / maskMaxX;
var bigY = maskY * bigMaxY / maskMaxY;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
})
二、元素可视区 client 系列
1. 系列属性
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
| client系列属性 | 作用 |
|---|---|
element.clientTop | 返回元素上边框的大小 |
element.clientLeft | 返回元素左边框的大小 |
element.clientWidth | 返回自身包括 padding、内容区的宽度，不含边框，返回数值不带单位 |
element.clientHeight | 返回自身包括 padding、内容区的高度，不含边框，返回数值不带单位 |
2. 案例
淘宝 flexible.js 源码分析
2.1 立即执行函数
立即执行函数是指函数定义好后，不需要调用直接执行。即一引入 JS 文件，则该函数自动执行。
语法：(function() {})() 或者 (function(){}())
主要作用：
- 创建一个独立的作用域
- 避免了命名冲突问题
<body>
<script>
(function (a, b) {
console.log(a + b);
})(1, 2);
(function sum(a, b) {
console.log(a + b);
}(2, 3));
</script>
</body>
2.2 pageShow 事件
pageShow 是加载页面功能
下面三种情况都会刷新页面都会触发load 事件。
- a标签的超链接
- F5或者刷新按钮（强制刷新）
- 前进后退按钮
但是火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了 DOM 和 JavaScript 的状态；实际上是将整个页面都保存在了内存里。
所以此时后退按钮不能刷新页面。
- 此时可以使用
pageshow事件来触发。这个事件在页面显示时触发，无论页面是否来自缓存。注意这个事件给window添加。 - 在重新加载页面中，
pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件（为true 则是缓存取过来的）。
三、元素 scroll 系列属性
1. 系列属性
scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
| scroll系列属性 | 作用 |
|---|---|
element.scrollTop | 返回被卷上去的上侧距离，返回数值不带单位 |
element.scrollLeft | 返回被卷上去的左侧距离，返回数值不带单位 |
element.scrollWidth | 返回自身实际宽度，不含边框，返回数值不带单位 |
element.scrollHeight | 返回自身实际高度，不含边框，返回数值不带单位 |
2. 页面被卷去的头部
如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏 掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。
获取页面被卷去的头部：
- 页面 被卷去的头部：可以通过
window.pageYOffset获得，如果是被卷去的左侧window.pageXOffset - 注意，元素被卷去的头部是
element.scrollTop，左侧element.scrollLeft
3. 案例
仿淘宝固定右侧侧边栏
- 原先侧边栏是绝对定位
- 当页面滚动到一定位置，侧边栏改为固定定位
- 页面继续滚动，会让 ‘返回顶部’ 显示出来
- 需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是 document
- 滚动到某个位置，就是判断页面被卷去的上部值。
- 页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧 window.pageXOffset
document.addEventListener('scroll', function () {
if (window.pageYOffset >= banner.offsetTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '300px';
}
if (window.pageYOffset >= main.offsetTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
offset系列经常用于获得元素位置offsetLeft、offsetTopclient经常用于获取元素大小clientWidth、clientHeightscroll经常用于获取滚动距离scrollTop、scrollLeft- 注意页面滚动的距离通过
window.pageXOffset获得
四、动画函数封装
1. 动画实现原理
核心原理：通过定时器 setInterval() 不断移动盒子位置。 实现步骤：
- 获得盒子当前位置
- 让盒子在当前位置加上 1 个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位（
position: absolute），才能使用element.style.left
2. 动画函数简单封装
函数需要传递 2 个参数，动画对象和移动到的距离。
- 如果多个元素都使用这个动画函数，每次都要
var声明定时器。可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。 - 核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。
function animate(obj, target) {
// 给不同节点对象 obj 设置定时器
obj.timer = setInterval(function () {
if (obj.offsetLeft <= target) {
obj.style.left = obj.offsetLeft + 1 + 'px';
} else {
// 清除对象自己的定时器
clearInterval(timer);
}
}, 30);
}
3. 缓动动画效果原理
之前讲的是匀速动画：盒子当前位置 = 盒子当前位置 + 固定值
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
- 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
- 核心算法：
每次移动的距离步长 = (目标值 - 现在的位置) / 10 - 停止的条件是：让当前盒子位置等于目标位置就停止定时器
- 注意步长值需要取整
PS：
可以让动画函数从 800 移动到 500。 当我们点击按钮时候，判断步长是正值还是负值：
- 如果是正值，则步长往大了取整（
Math.ceil()） - 如果是负值，则步长向小了取整（
Math.floor()）
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 缓冲动画核心算法
var step = (target - obj.offsetLeft) / 10;
// 左右移动步值正负处理
step = step >= 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft === target) {
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
4. 动画函数添加回调函数
-
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后， 再执行传进去的这个函数，这个过程就叫做 回调（
callback）。 -
回调函数写的位置：定时器结束的位置。
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 缓冲动画核心算法
var step = (target - obj.offsetLeft) / 10;
// 左右移动步值正负处理
step = step >= 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft === target) {
clearInterval(obj.timer);
// 判断，回调函数 callback 存在则调用
if (callback) {
callback();
}
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
// 回调函数作为实参传入
animate(span, 800, function () {
span.style.backgroundColor = 'pink';
});
五、常见网页特效
1. 网页轮播图
轮播图也称为焦点图，是网页中比较常见的网页特效。
功能需求：
- 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
- 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。
- 图片播放的同时，下面小圆圈模块跟随一起变化。
- 点击小圆圈，可以播放相应图片。
- 鼠标不经过轮播图，轮播图也会自动播放图片。
- 鼠标经过，轮播图模块，自动播放停止。
案例分析：
- 因为 js 较多，我们单独新建 js 文件夹，再新建 js 文件，引入页面中。
- 此时需要添加
load事件。
1.1 动态生成小圆圈
- 核心思路：小圆圈的个数要跟图片张数一致
- 所以首先先得到
ul里面图片的张数（图片放入li里面，所以就是li的个数） - 利用循环动态生成小圆圈（这个小圆圈要放入
ol里面） - 创建节点
createElement('li') - 插入节点
ol.appendChild(li) - 第一个小圆圈需要添加
current类
1.2 给小圆圈绑定点击事件
1.2.1 点击圆圈选中圆圈
- 点击当前小圆圈，就添加
current类 - 其余的小圆圈就移除这个
current类 - 注意：我们在刚才生成小圆圈的同时，就可以直接绑定这个点击事件了。
1.2.2 点击小圆圈跳转到相应图片
- 此时用到
animate动画函数，将 js 文件引入（注意，因为 index.js 依赖 animate.js 所以，animate.js 要写到index.js 上面） - 使用动画函数的前提，该元素必须有定位
- 注意是
ul移动而不是小li - 滚动图片的核心算法：点击某个小圆圈，就让图片滚动小圆圈的索引号乘以图片的宽度做为
ul移动距离- 此时需要知道小圆圈的索引号，我们可以在生成小圆圈的时候，给它设置一个自定义属性，点击的时候获取这个自定义属性即可。
// 2.动态生成小圆圈，几张轮播图就生成几个小圆圈
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
// 在生成小圆圈时，同步新增index属性
li.setAttribute('index', i);
ol.appendChild(li);
// 3.在创建小圆圈时绑定点击事件，这样所有的li都能绑定到事件
li.addEventListener('click', function () {
// 3.1点击圆圈选中圆圈
// 排他
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
// 3.2点击小圆圈，跳转到相应图片
var index = this.getAttribute('index');
// 当我们点击小li，就要把li的索引号赋给num(后续用)
// 这样以后点击任一圆圈后，再点击左右侧按钮时，就可以从圆圈对应的图片处跳到下或上一张图片了
num = index;
// 当我们点击小li，就要把li的索引号赋给circle(后续用)
circle = index;
animate(ul, -index * focusWidth);
})
}
ol.children[0].className = 'current';
1.3 右侧按钮功能
1.3.1 点击右侧按钮图片滚动
- 声明一个变量
num，点击一次，自增 1，让这个变量乘以图片宽度，就是ul 的滚动距离。 - 图片无缝滚动原理：
- 把
ul第一个li克隆一份，放到ul的最后面 - 当图片滚动到克隆的最后一张图片时，让
ul快速的、不做动画的跳到最左侧：left为0 - 同时
num赋值为0，可以重新开始滚动图片了
- 把
1.3.2 点击右侧按钮小圆圈跟随变化
- 最简单的做法是再声明一个变量
circle，每次点击自增1，注意，左侧按钮也需要这个变量，因此要声明全局变量。 - 但是图片有5张，我们小圆圈只有4个少一个，必须加一个判断条件
- 如果
circle == 4就从新复原为 0
1.3.3 节流阀
- 功能：防止轮播图按钮连续点击造成播放过快。
- 原理：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
- 思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
- 开始设置一个变量：
var flag = true; if(flag) {flag = false; do something}：关闭水龙头- 利用回调函数动画执行完毕：
flag = true打开水龙头
- 开始设置一个变量：
// 4.克隆第一张图片
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 5.点击右侧按钮，图片移动一张
var num = 0;
var circle = 0;
// 节流阀
var flag = true;
arrowr.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth, function () {
flag = true;
});
// 6.点击右侧按钮，小圆圈跟随一起变化
circle++;
if (circle == ol.children.length) {
circle = 0;
}
circleChange();
}
})
function circleChange() {
// 清除其他小圆圈的current类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 留下当前小圆圈类名
ol.children[circle].className = 'current';
}
// 7.左侧按钮
arrowl.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth, function () {
flag = true;
});
// 点击左侧按钮，小圆圈跟随一起变化
if (circle == 0) {
circle = ol.children.length;
}
circle--;
circleChange();
}
})
1.4 自动播放功能
- 添加一个定时器
- 自动播放轮播图，实际就类似于点击了右侧按钮
- 此时我们使用手动调用右侧按钮点击事件
arrowr.click() - 鼠标经过
focus就停止定时器 - 鼠标离开
focus就开启定时器
// 8.自动播放图片
var timer = setInterval(function () {
arrowr.click();
}, 2000);
2. 返回顶部
- 此时可以继续使用我们封装的动画函数
- 只需要把所有的
left相关的值改为跟页面垂直滚动距离相关就可以了 - 页面滚动了多少，可以通过
window.pageYOffset得到 - 页面滚动事件，使用
window.scroll(x, y)
document.addEventListener('scroll', function () {
if (window.pageYOffset >= banner.offsetTop) {
// 侧边盒子固定住，不受页面滑动影响
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbar.offsetTop - banner.offsetTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '300px';
}
if (window.pageYOffset >= main.offsetTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
// 点击返回顶部模块，页面滚动至最上方
goBack.addEventListener('click', function () {
animate(window, 0);
})
3. 筋斗云
- 鼠标经过某个小
li，筋斗云跟这到当前小li位置 - 鼠标离开这个小
li，筋斗云复原为原来的位置 - 鼠标点击了某个小
li，筋斗云就会留在点击这个小li的位置
- 利用动画函数做动画效果
- 原先筋斗云的起始位置是
0 - 鼠标经过某个小
li，把当前小li的offsetLeft位置做为目标值即可 - 鼠标离开某个小
li，就把目标值设为起始位置 - 如果点击了某个小
li，就把li当前的位置存储起来，作为筋斗云的起始位
var current = 0;
for (var i = 0; i < lis.length; i++) {
// (1) 鼠标经过把当前小li 的位置做为目标值
lis[i].addEventListener('mouseenter', function() {
animate(cloud, this.offsetLeft);
});
// (2) 鼠标离开就回到起始的位置
lis[i].addEventListener('mouseleave', function() {
animate(cloud, current);
});
// (3) 当我们鼠标点击，就把当前位置做为目标值
lis[i].addEventListener('click', function() {
current = this.offsetLeft;
});
}
六、本地存储
本地存储特性
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大，
sessionStorage约5M、localStorage约20M - 只能存储字符串，可以将对象
JSON.stringify()编码后存储
1. window.sessionStorage
1.1 特点
- 生命周期为 关闭浏览器窗口
- 在同一个窗口（页面）下数据可以共享
- 以键值对的形式存储使用
1.2 相关操作
- 存储数据：
sessionStorage.setItem(key, value)
- 获取数据：
sessionStorage.getItem(key)
- 删除数据：
sessionStorage.removeItem(key)
- 删除所有数据：
sessionStorage.clear()
- 返回一个整数，表示存储在Storage对象中的数据项数量：
sessionStorage.length
- 返回存储中的第n个key名称：
sessionStorage.key(n)
2. window.localStorage
1.1 特点
- 生命周期 永久生效，除非手动删除否则关闭页面也会存在
- 可以多窗口（页面）共享（同一浏览器可以共享）
- 以键值对的形式存储使用
1.2 相关操作
- 存储数据：
localStorage.setItem(key, value)
- 获取数据：
localStorage.getItem(key)
- 删除数据：
loaclStorage.removeItem(key)
- 删除所有数据：
localStorage.clear()
- 返回一个整数，表示存储在Storage对象中的数据项数量：
localStorage.length
- 返回存储中的第n个key名称：
localStorage.key(n)
3. 案例：记住用户名
如果勾选记住用户名，下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名。
- 把数据存起来，用到本地存储
- 关闭页面，也可以显示用户名，所以用到
localStorage - 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框
- 当复选框发生改变的时候
change事件 - 如果勾选，就存储，否则就移除
var nameInput = document.querySelector('#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')) {
nameInput.value = localStorage.getItem('username');
remember.checked = true;
}
remember.addEventListener('change', function () {
if (remember.checked) {
localStorage.setItem('username', nameInput.value);
} else {
localStorage.removeItem('username');
}
})
扫一扫
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
