首页
友链
统计
留言
更多
直播
壁纸
推荐
我的毛线
院长科技
Search
1
本站官方群:894703859------|诚邀各位大佬的入驻!
418 阅读
2
pxe 自动化安装系统
348 阅读
3
新款螺旋帽子编织#夏凉帽#合股线夏凉帽编织
308 阅读
4
10 个Linux Awk文本处理经典案例
306 阅读
5
软件安装
293 阅读
Linux
yaml
iptables
shell
ansible
ssl
命令
文件管理
用户权限
综合集群架构
三剑客
awk
sed
自动化
pxe
编织
编织视频
监控
prometheus
go
go占位符
vue
vue基础
vue项目
web
Nginx
html
vscode
html标签
html表格
css基础
css定位
css精灵图
code
html5
项目
js
jQuery
面向对象
kubernetes
k8s命令
k8s
k8s搭建
database
clickhouse
常用工具
微软
登录
/
注册
Search
标签搜索
基础
js
Nginx
css
webapi
jQuery
面向对象
command
项目
ansible
用户权限
go
html
文件管理
命令
综合集群架构
k8s
pxe
awk
vscode
JustDoIt
累计撰写
112
篇文章
累计收到
4
条评论
首页
栏目
Linux
yaml
iptables
shell
ansible
ssl
命令
文件管理
用户权限
综合集群架构
三剑客
awk
sed
自动化
pxe
编织
编织视频
监控
prometheus
go
go占位符
vue
vue基础
vue项目
web
Nginx
html
vscode
html标签
html表格
css基础
css定位
css精灵图
code
html5
项目
js
jQuery
面向对象
kubernetes
k8s命令
k8s
k8s搭建
database
clickhouse
常用工具
微软
页面
友链
统计
留言
直播
壁纸
推荐
我的毛线
院长科技
搜索到
8
篇与
的结果
2022-05-27
Web APIs本地存储
# Web APIs本地存储## **1.1. 触屏事件**### 1.1.1 触屏事件概述移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。常见的触屏事件如下:![图片1](https://cdn.wangmanyuan.com/wmy/2022/05/27/16536432898481/tu-pian1.png)### 1.1.2 触摸事件对象(TouchEvent)TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等touchstart、touchmove、touchend 三个事件都会各自有事件对象。触摸事件对象重点我们看三个常见对象列表:![图片2](https://cdn.wangmanyuan.com/wmy/2022/05/27/16536432898489/tu-pian2.png)> **因为平时我们都是给元素注册触摸事件,所以重点记住 targetTocuhes**### 1.1.3 移动端拖动元素1. touchstart、touchmove、touchend 可以实现拖动元素 2. 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY 3. 移动端拖动的原理: 手指移动中,计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离 4. 手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置拖动元素三步曲:(1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置(2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子(3) 离开手指 touchend:> **注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();**## 1.2. 移动端常见特效### 1.2.1 案例: 移动轮播图`移动端轮播图功能和基本PC端一致。`1. 可以自动播放图片 2. 手指可以拖动播放轮播图### 1.2.2. 案例分析:1. 自动播放功能 2. 开启定时器 3. 移动端移动,可以使用translate 移动 4. 想要图片优雅的移动,请添加过渡效果![1551795152(1)](https://cdn.wangmanyuan.com/wmy/2022/05/27/16536432898492/15517951521.jpg)1. 自动播放功能-无缝滚动2. 注意,我们判断条件是要等到图片滚动完毕再去判断,就是过渡完成后判断3. 此时需要添加检测过渡完成事件 transitionend 4. 判断条件:如果索引号等于 3 说明走到最后一张图片,此时 索引号要复原为 05. 此时图片,去掉过渡效果,然后移动6. 如果索引号小于0, 说明是倒着走, 索引号等于27. 此时图片,去掉过渡效果,然后移动![1551795483(1)](https://cdn.wangmanyuan.com/wmy/2022/05/27/16536432898495/15517954831.jpg)## 1.2.3 classList 属性classList属性是HTML5新增的一个属性,返回元素的类名。但是ie10以上版本支持。该属性用于在元素中添加,移除及切换 CSS 类。有以下方法**添加类:**element.classList.add(’类名’);```javascript focus.classList.add('current'); ```**移除类:**element.classList.remove(’类名’);```javascript focus.classList.remove('current'); ```**切换类:**element.classList.toggle(’类名’);```javascript focus.classList.toggle('current'); ````注意:以上方法里面,所有类名都不带点`### 1.2.4. 案例分析1. 小圆点跟随变化效果2. 把ol里面li带有current类名的选出来去掉类名 remove3. 让当前索引号的小li 加上 current add4. 但是,是等着过渡结束之后变化,所以这个写到 transitionend 事件里面![1551796072(1)](https://cdn.wangmanyuan.com/wmy/2022/05/27/16536432898498/15517960721.jpg)1. 手指滑动轮播图 2. 本质就是ul跟随手指移动,简单说就是移动端拖动元素 3. 触摸元素touchstart: 获取手指初始坐标 4. 移动手指touchmove: 计算手指的滑动距离,并且移动盒子 5. 离开手指touchend: 根据滑动的距离分不同的情况 6. 如果移动距离小于某个像素 就回弹原来位置 7. 如果移动距离大于某个像素就上一张下一张滑动。 8. 滑动也分为左滑动和右滑动判断的标准是 移动距离正负 如果是负值就是左滑 反之右滑 9. 如果是左滑就播放下一张 (index++) 10. 如果是右滑就播放上一张 (index--)![1551796363(1)](https://cdn.wangmanyuan.com/wmy/2022/05/27/16536432898503/15517963631.jpg)![1551796502(1)](https://cdn.wangmanyuan.com/wmy/2022/05/27/16536432898508/15517965021.jpg)### 1.3.1. 案例:返回顶部当页面滚动某个地方,就显示,否则隐藏点击可以返回顶部### 1.3.2.案例分析1. 滚动某个地方显示 2. 事件:scroll页面滚动事件 3. 如果被卷去的头部(window.pageYOffset )大于某个数值 4. 点击,window.scroll(0,0) 返回顶部![1551797003(1)](https://cdn.wangmanyuan.com/wmy/2022/05/27/16536432898514/15517970031.jpg)## 1.4. click 延时解决方案移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。解决方案: 1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。```html ``` 2.利用touch事件自己封装这个事件解决300ms 延迟。 原理就是:1. 当我们手指触摸屏幕,记录当前触摸时间 2. 当我们手指离开屏幕, 用离开的时间减去触摸的时间 3. 如果时间小于150ms,并且没有滑动过屏幕, 那么我们就定义为点击代码如下:```javascript //封装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 延迟。![1551797533(1)](https://cdn.wangmanyuan.com/wmy/2022/05/27/16536432898519/15517975331.jpg)## 1.5. 移动端常用开发插件### 1.5.1. 什么是插件移动端要求的是快速开发,所以我们经常会借助于一些插件来帮我完成操作,那么什么是插件呢?JS 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。特点:它一般是为了解决某个问题而专门存在,其功能单一,并且比较小。我们以前写的animate.js 也算一个最简单的插件fastclick 插件解决 300ms 延迟。 使用延时GitHub官网地址: [https://](https://github.com/ftlabs/fastclick)[github.com/ftlabs/fastclick](https://github.com/ftlabs/fastclick)### 1.5.2. 插件的使用1. 引入 js 插件文件。2. 按照规定语法使用。3. fastclick 插件解决 300ms 延迟。 使用延时4. GitHub官网地址: https://github.com/ftlabs/fastclick```javascript if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } ```### 1.5.3. Swiper 插件的使用中文官网地址: https://www.swiper.com.cn/1. 引入插件相关文件。 2. 按照规定语法使用### 1.5.4. 其他移动端常见插件lsuperslide: http://www.superslide2.com/l iscroll: https://github.com/cubiq/iscroll### 1.5.5. 插件的使用总结1.确认插件实现的功能2.去官网查看使用说明3.下载插件4.打开demo实例文件,查看需要引入的相关文件,并且引入5.复制demo实例文件中的结构html,样式css以及js代码### 1.5.6. 移动端视频插件 zy.media.jsH5 给我们提供了 video 标签,但是浏览器的支持情况不同。不同的视频格式文件,我们可以通过source解决。但是外观样式,还有暂停,播放,全屏等功能我们只能自己写代码解决。这个时候我们可以使用插件方式来制作。我们可以通过 JS 修改元素的大小、颜色、位置等样式。## 1.6. 移动端常用开发框架### 1.6.1. 移动端视频插件 zy.media.js框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。插件一般是为了解决某个问题而专门存在,其功能单一,并且比较小。前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端,也能开发移动端前端常用的移动端插件有 swiper、superslide、iscroll等。框架: 大而全,一整套解决方案插件: 小而专一,某个功能的解决方案### 1.6.2. BootstrapBootstrap 是一个简洁、直观、强悍的前端开发框架,它让 web 开发更迅速、简单。它能开发PC端,也能开发移动端Bootstrap JS插件使用步骤:1.引入相关js 文件2.复制HTML 结构3.修改对应样式4.修改相应JS 参数## 1.7. 本地存储随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。### 1.7.1.本地存储特性1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3、容量较大,sessionStorage约5M、localStorage约20M4、只能存储字符串,可以将对象JSON.stringify() 编码后存储### 1.7.2.window.sessionStorage1、生命周期为关闭浏览器窗口2、在同一个窗口(页面)下数据可以共享3、以键值对的形式存储使用存储数据:```javascript sessionStorage.setItem(key, value) ```获取数据:```javascript sessionStorage.getItem(key) ```删除数据:```javascript sessionStorage.removeItem(key) ```清空数据:(所有都清除掉)```javascript sessionStorage.clear() ```### 1.7.3.window.localStorage1、声明周期永久生效,除非手动删除 否则关闭页面也会存在2、可以多窗口(页面)共享(同一浏览器可以共享)3. 以键值对的形式存储使用存储数据:```javascript localStorage.setItem(key, value) ```获取数据:```javascript localStorage.getItem(key) ```删除数据:```javascript localStorage.removeItem(key) ```清空数据:(所有都清除掉)```javascript localStorage.clear() ```### 1.7.4.案例:记住用户名如果勾选记住用户名, 下次用户打开浏览器,就在文本框里面自动显示上次登录的用户名#### 案例分析1. 把数据存起来,用到本地存储2. 关闭页面,也可以显示用户名,所以用到localStorage3. 打开页面,先判断是否有这个用户名,如果有,就在表单里面显示用户名,并且勾选复选框4. 当复选框发生改变的时候change事件5. 如果勾选,就存储,否则就移除![1551800263(1)](https://cdn.wangmanyuan.com/wmy/2022/05/27/16536432898524/15518002631.jpg)
2022年05月27日
52 阅读
0 评论
0 点赞
2022-05-21
Web APIS 练习
**1.1. **动画函数封装1.1.1 缓动效果原理缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来思路: 让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。 核心算法: (目标值 - 现在的位置) / 10 做为每次移动的距离步长 停止的条件是: 让当前盒子位置等于目标位置就停止定时器 注意步长值需要取整 1.1.2 动画函数多个目标值之间移动可以让动画函数从 800 移动到 500。当我们点击按钮时候,判断步长是正值还是负值 1.如果是正值,则步长往大了取整 2.如果是负值,则步长 向小了取整1.1.3 动函数添加回调函数回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调。回调函数写的位置:定时器结束的位置。1.1.4 动画完整版代码:function animate(obj, target, callback) { // console.log(callback); callback = function() {} 调用的时候 callback() // 先清除以前的定时器,只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 // 把我们步长值改为整数 不要出现小数的问题 // var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); // 回调函数写到定时器结束里面 // if (callback) { // // 调用函数 // callback(); // } callback && callback(); } // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); } 1.2. 常见网页特效案例1.2.1 案例:网页轮播图轮播图也称为焦点图,是网页中比较常见的网页特效。功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 3.图片播放的同时,下面小圆圈模块跟随一起变化。 4.点击小圆圈,可以播放相应图片。 5.鼠标不经过轮播图,轮播图也会自动播放图片。 6.鼠标经过,轮播图模块, 自动播放停止。window.addEventListener('load', function() { // 1. 获取元素 var arrow_l = document.querySelector('.arrow-l'); var arrow_r = document.querySelector('.arrow-r'); var focus = document.querySelector('.focus'); var focusWidth = focus.offsetWidth; // 2. 鼠标经过focus 就显示隐藏左右按钮 focus.addEventListener('mouseenter', function() { arrow_l.style.display = 'block'; arrow_r.style.display = 'block'; clearInterval(timer); timer = null; // 清除定时器变量 }); focus.addEventListener('mouseleave', function() { arrow_l.style.display = 'none'; arrow_r.style.display = 'none'; timer = setInterval(function() { //手动调用点击事件 arrow_r.click(); }, 2000); }); // 3. 动态生成小圆圈 有几张图片,我就生成几个小圆圈 var ul = focus.querySelector('ul'); var ol = focus.querySelector('.circle'); // console.log(ul.children.length); for (var i = 0; i < ul.children.length; i++) { // 创建一个小li var li = document.createElement('li'); // 记录当前小圆圈的索引号 通过自定义属性来做 li.setAttribute('index', i); // 把小li插入到ol 里面 ol.appendChild(li); // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件 li.addEventListener('click', function() { // 干掉所有人 把所有的小li 清除 current 类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } // 留下我自己 当前的小li 设置current 类名 this.className = 'current'; // 5. 点击小圆圈,移动图片 当然移动的是 ul // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值 // 当我们点击了某个小li 就拿到当前小li 的索引号 var index = this.getAttribute('index'); // 当我们点击了某个小li 就要把这个li 的索引号给 num num = index; // 当我们点击了某个小li 就要把这个li 的索引号给 circle circle = index; // num = circle = index; console.log(focusWidth); console.log(index); animate(ul, -index * focusWidth); }) } // 把ol里面的第一个小li设置类名为 current ol.children[0].className = 'current'; // 6. 克隆第一张图片(li)放到ul 最后面 var first = ul.children[0].cloneNode(true); ul.appendChild(first); // 7. 点击右侧按钮, 图片滚动一张 var num = 0; // circle 控制小圆圈的播放 var circle = 0; // flag 节流阀 var flag = true; arrow_r.addEventListener('click', function() { if (flag) { flag = false; // 关闭节流阀 // 如果走到了最后复制的一张图片,此时 我们的ul 要快速复原 left 改为 0 if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, -num * focusWidth, function() { flag = true; // 打开节流阀 }); // 8. 点击右侧按钮,小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放 circle++; // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原 if (circle == ol.children.length) { circle = 0; } // 调用函数 circleChange(); } }); // 9. 左侧按钮做法 arrow_l.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; }); // 点击左侧按钮,小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放 circle--; // 如果circle < 0 说明第一张图片,则小圆圈要改为第4个小圆圈(3) // if (circle < 0) { // circle = ol.children.length - 1; // } circle = circle < 0 ? ol.children.length - 1 : circle; // 调用函数 circleChange(); } }); function circleChange() { // 先清除其余小圆圈的current类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } // 留下当前的小圆圈的current类名 ol.children[circle].className = 'current'; } // 10. 自动播放轮播图 var timer = setInterval(function() { //手动调用点击事件 arrow_r.click(); }, 2000); }) 1.2.2. 节流阀防止轮播图按钮连续点击造成播放过快。节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。核心实现思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数。 开始设置一个变量var flag= true;If(flag){flag = false; do something} 关闭水龙头利用回调函数动画执行完毕, flag = true 打开水龙头1.2.3. 案例:返回顶部 带有动画的返回顶部 此时可以继续使用我们封装的动画函数 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了 页面滚动了多少,可以通过 window.pageYOffset 得到 最后是页面滚动,使用 window.scroll(x,y) //1. 获取元素 var sliderbar = document.querySelector('.slider-bar'); var banner = document.querySelector('.banner'); // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面 var bannerTop = banner.offsetTop // 当我们侧边栏固定定位之后应该变化的数值 var sliderbarTop = sliderbar.offsetTop - bannerTop; // 获取main 主体元素 var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var mainTop = main.offsetTop; // 2. 页面滚动事件 scroll document.addEventListener('scroll', function() { // console.log(11); // window.pageYOffset 页面被卷去的头部 // console.log(window.pageYOffset); // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位 if (window.pageYOffset >= bannerTop) { sliderbar.style.position = 'fixed'; sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '300px'; } // 4. 当我们页面滚动到main盒子,就显示 goback模块 if (window.pageYOffset >= mainTop) { goBack.style.display = 'block'; } else { goBack.style.display = 'none'; } }) // 3. 当我们点击了返回顶部模块,就让窗口滚动的页面的最上方 goBack.addEventListener('click', function() { // 里面的x和y 不跟单位的 直接写数字即可 // window.scroll(0, 0); // 因为是窗口滚动 所以对象是window animate(window, 0); }); 1.2.4. 案例:筋头云案例 利用动画函数做动画效果 原先筋斗云的起始位置是0 鼠标经过某个小li,把当前小li的offsetLeft 位置做为目标值即可 鼠标离开某个小li,就把目标值设为 0 如果点击了某个小li, 就把li当前的位置存储起来,做为筋斗云的起始位置 window.addEventListener('load', function() { // 1. 获取元素 var cloud = document.querySelector('.cloud'); var c_nav = document.querySelector('.c-nav'); var lis = c_nav.querySelectorAll('li'); // 2. 给所有的小li绑定事件 // 这个current 做为筋斗云的起始位置 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; }); } }) 1.3. 触屏事件1.3.1. 触屏事件概述移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。常见的触屏事件如下:1.3.2. 触摸事件对象(TouchEvent)TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等touchstart、touchmove、touchend 三个事件都会各自有事件对象。触摸事件对象重点我们看三个常见对象列表:因为平时我们都是给元素注册触摸事件,所以重点记住 targetTocuhes1.3.3.案例:移动端拖动元素 touchstart、touchmove、touchend可以实现拖动元素 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY 移动端拖动的原理: 手指移动中,计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离 手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置拖动元素三步曲:(1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置(2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子(3) 离开手指 touchend:注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();
2022年05月21日
34 阅读
0 评论
0 点赞
2022-05-04
JavaScript内置对象
1 - 内置对象1.1 内置对象 JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象 前面两种对象是JS 基础 内容,属于 ECMAScript; 第三个浏览器对象属于 JS 独有的, JS API 讲解内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法),内置对象最大的优点就是帮助我们快速开发 JavaScript 提供了多个内置对象:Math、 Date 、Array、String等1.2 查文档 查找文档:学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN/W3C来查询。 Mozilla 开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括 HTML、CSS 和万维网及 HTML5 应用的 API。 MDN:https://developer.mozilla.org/zh-CN/1.3 Math对象 Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用 Math 中的成员。 属性、方法名 功能 Math.PI 圆周率 Math.floor() 向下取整 Math.ceil() 向上取整 Math.round() 四舍五入版 就近取整 注意 -3.5 结果是 -3 Math.abs() 绝对值 Math.max()/Math.min() 求最大和最小值 Math.random() 获取范围在[0,1)内的随机值 注意:上面的方法使用时必须带括号 获取指定范围内的随机整数:function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } 1.4 日期对象 Date 对象和 Math 对象不一样,Date是一个构造函数,所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间 使用Date实例化日期对象 获取当前时间必须实例化: var now = new Date(); 获取指定时间的日期对象 var future = new Date('2019/5/1'); 注意:如果创建实例时并未传入参数,则得到的日期对象是当前时间对应的日期对象 使用Date实例的方法和属性 通过Date实例获取总毫米数 总毫秒数的含义 基于1970年1月1日(世界标准时间)起的毫秒数 获取总毫秒数// 实例化Date对象 var now = new Date(); // 1. 用于获取对象的原始值 console.log(date.valueOf()) console.log(date.getTime()) // 2. 简单写可以这么做 var now = + new Date(); // 3. HTML5中提供的方法,有兼容性问题 var now = Date.now(); 1.5 数组对象创建数组的两种方式 字面量方式 示例代码如下:var arr = [1,"test",true]; new Array() 示例代码如下:var arr = new Array(); 注意:上面代码中arr创建出的是一个空数组,如果需要使用构造函数Array创建非空数组,可以在创建数组时传入参数 参数传递规则如下: 如果只传入一个参数,则参数规定了数组的长度 如果传入了多个参数,则参数称为数组的元素 检测是否为数组 instanceof 运算符 instanceof 可以判断一个对象是否是某个构造函数的实例var arr = [1, 23]; var obj = {}; console.log(arr instanceof Array); // true console.log(obj instanceof Array); // false Array.isArray() Array.isArray()用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法var arr = [1, 23]; var obj = {}; console.log(Array.isArray(arr)); // true console.log(Array.isArray(obj)); // false 添加删除数组元素的方法 数组中有进行增加、删除元素的方法,部分方法如下表注意:push、unshift为增加元素方法;pop、shift为删除元素的方法 数组排序 数组中有对数组本身排序的方法,部分方法如下表注意:sort方法需要传入参数来设置升序、降序排序 如果传入“function(a,b){ return a-b;}”,则为升序 如果传入“function(a,b){ return b-a;}”,则为降序 数组索引方法 数组中有获取数组指定元素索引值的方法,部分方法如下表 数组转换为字符串 数组中有把数组转化为字符串的方法,部分方法如下表注意:join方法如果不传入参数,则按照 “ , ”拼接元素 其他方法 数组中还有其他操作方法,同学们可以在课下自行查阅学习 1.6 字符串对象基本包装类型 为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。 基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。// 下面代码有什么问题? var str = 'andy'; console.log(str.length); 按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面代码却可以执行,这是因为 js 会把基本数据类型包装为复杂数据类型,其执行过程如下 :// 1. 生成临时变量,把简单类型包装为复杂数据类型 var temp = new String('andy'); // 2. 赋值给我们声明的字符变量 str = temp; // 3. 销毁临时变量 temp = null; 字符串的不可变 指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。 当重新给字符串变量赋值的时候,变量之前保存的字符串不会被修改,依然在内存中重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变。 由于字符串的不可变,在大量拼接字符串的时候会有效率问题根据字符返回位置 字符串通过基本包装类型可以调用部分方法来操作字符串,以下是返回指定字符的位置的方法: 案例:查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数 先查找第一个o出现的位置 然后 只要indexOf 返回的结果不是 -1 就继续往后查找 因为indexOf 只能查找到第一个,所以后面的查找,利用第二个参数,当前索引加1,从而继续查找 根据位置返回字符 字符串通过基本包装类型可以调用部分方法来操作字符串,以下是根据位置返回指定位置上的字符: 在上述方法中,charCodeAt方法返回的是指定位置上字符对应的ASCII码,ASCII码对照表如下: 案例:判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数 核心算法:利用 charAt() 遍历这个字符串 把每个字符都存储给对象, 如果对象没有该属性,就为1,如果存在了就 +1 遍历对象,得到最大值和该字符 注意:在遍历的过程中,把字符串中的每个字符作为对象的属性存储在对象总,对应的属性值是该字符出现的次数 字符串操作方法 字符串通过基本包装类型可以调用部分方法来操作字符串,以下是部分操作方法:replace()方法 replace() 方法用于在字符串中用一些字符替换另一些字符,其使用格式如下:字符串.replace(被替换的字符串, 要替换为的字符串); split()方法 split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。 其使用格式如下:字符串.split("分割字符") 2 - 简单数据类型和复杂数据类型2.1 简单数据类型 简单类型(基本数据类型、值类型):在存储时变量中存储的是值本身,包括string ,number,boolean,undefined,null2.2 复杂数据类型 复杂数据类型(引用类型):在存储时变量中存储的仅仅是地址(引用),通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等;2.3 堆栈 堆栈空间分配区别: 1、栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;简单数据类型存放到栈里面 2、堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。 简单数据类型的存储方式 值类型变量的数据直接存放在变量(栈空间)中 复杂数据类型的存储方式 引用类型变量(栈空间)里存放的是地址,真正的对象实例存放在堆空间中 2.4 简单类型传参 函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参时,其实是把变量在栈空间里的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量。function fn(a) { a++; console.log(a); } var x = 10; fn(x); console.log(x); 运行结果如下:2.5 复杂数据类型传参 函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。function Person(name) { this.name = name; } function f1(x) { // x = p console.log(x.name); // 2. 这个输出什么 ? x.name = "张学友"; console.log(x.name); // 3. 这个输出什么 ? } var p = new Person("刘德华"); console.log(p.name); // 1. 这个输出什么 ? f1(p); console.log(p.name); // 4. 这个输出什么 ? 运行结果如下:
2022年05月04日
46 阅读
0 评论
0 点赞
2022-05-04
JavaScript作用域
1 - 作用域1.1 作用域概述通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。 JavaScript(es6前)中的作用域有两种: 全局作用域 局部作用域(函数作用域) 1.2 全局作用域作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。 1.3 局部作用域作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。 1.4 JS没有块级作用域 块作用域由 { } 包括。 在其他编程语言中(如 java、c#等),在 if 语句、循环语句中创建的变量,仅仅只能在本 if 语句、本循环语句中使用,如下面的Java代码:java有块级作用域:if(true){ int num = 123; system.out.print(num); // 123 } system.out.print(num); // 报错 以上java代码会报错,是因为代码中 { } 即一块作用域,其中声明的变量 num,在 “{ }” 之外不能使用;而与之类似的JavaScript代码,则不会报错:Js中没有块级作用域(在ES6之前)if(true){ var num = 123; console.log(123); //123 } console.log(123); //123 2 - 变量的作用域在JavaScript中,根据作用域的不同,变量可以分为两种: 全局变量 局部变量 2.1 全局变量在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。 全局变量在代码的任何位置都可以使用 在全局作用域下 var 声明的变量 是全局变量 特殊情况下,在函数内不使用 var 声明的变量也是全局变量(不建议使用) 2.2 局部变量在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量) 局部变量只能在该函数内部使用 在函数内部 var 声明的变量是局部变量 函数的形参实际上就是局部变量 2.3 全局变量和局部变量的区别 全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存 局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间 3 - 作用域链只要是代码都一个作用域中,写在函数内部的局部作用域,未写在任何函数内部即在全局作用域中;如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域;根据在**[内部函数可以访问外部函数变量]**的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链 案例分析1: function f1() { var num = 123; function f2() { console.log( num ); } f2(); } var num = 456; f1(); 作用域链:采取就近原则的方式来查找变量最终的值。 var a = 1; function fn1() { var a = 2; var b = '22'; fn2(); function fn2() { var a = 3; fn3(); function fn3() { var a = 4; console.log(a); //a的值 ? console.log(b); //b的值 ? } } } fn1(); 4 - 预解析4.1 预解析的相关概念JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。 预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。 代码执行: 从上到下执行JS语句。预解析会把变量和函数的声明在代码执行之前执行完成。 4.2 变量预解析预解析也叫做变量、函数提升。 变量提升(变量预解析): 变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升。 console.log(num); // 结果是多少? var num = 10; // ? 结果:undefined 注意:**变量提升只提升声明,不提升赋值** 4.3 函数预解析函数提升: 函数的声明会被提升到当前作用域的最上面,但是不会调用函数。 fn(); function fn() { console.log('打印'); } 结果:控制台打印字符串 --- ”打印“ 注意:函数声明代表函数整体,所以函数提升后,函数名代表整个函数,但是函数并没有被调用! 4.4 函数表达式声明函数问题函数表达式创建函数,会执行变量提升,此时接收函数的变量名无法正确的调用: fn(); var fn = function() { console.log('想不到吧'); } 结果:报错提示 ”fn is not a function" 解释:该段代码执行之前,会做变量声明提升,fn在提升之后的值是undefined;而fn调用是在fn被赋值为函数体之前,此时fn的值是undefined,所以无法正确调用 5 - 对象5.1 对象的相关概念 什么是对象?在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。对象是由属性和方法组成的。 属性:事物的特征,在对象中用属性来表示(常用名词) 方法:事物的行为,在对象中用方法来表示(常用动词) 为什么需要对象?保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。如果要保存一个人的完整信息呢?例如,将“张三疯”的个人的信息保存在数组中的方式为:var arr = [‘张三疯’, ‘男', 128,154]; 上述例子中用数组保存数据的缺点是:数据只能通过索引值访问,开发者需要清晰的清除所有的数据的排行才能准确地获取数据,而当数据量庞大时,不可能做到记忆所有数据的索引值。为了让更好地存储一组数据,对象应运而生:对象中为每项数据设置了属性名称,可以访问数据更语义化,数据结构清晰,表意明显,方便开发者使用。使用对象记录上组数据为:var obj = { "name":"张三疯", "sex":"男", "age":128, "height":154 } JS中的对象表达结构更清晰,更强大。 5.2 创建对象的三种方式 利用字面量创建对象 使用对象字面量创建对象: 就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法;{ } 里面采取键值对的形式表示 键:相当于属性名 值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)代码如下:var star = { name : 'pink', age : 18, sex : '男', sayHi : function(){ alert('大家好啊~'); } }; 上述代码中 star即是创建的对象。 对象的使用 对象的属性 对象中存储具体数据的 "键值对"中的 "键"称为对象的属性,即对象中存储具体数据的项 对象的方法 对象中存储函数的 "键值对"中的 "键"称为对象的方法,即对象中存储函数的项 访问对象的属性 对象里面的属性调用 : 对象.属性名 ,这个小点 . 就理解为“ 的 ” 对象里面属性的另一种调用方式 : 对象[‘属性名’],注意方括号里面的属性必须加引号示例代码如下:console.log(star.name) // 调用名字属性 console.log(star['name']) // 调用名字属性 调用对象的方法 对象里面的方法调用:对象.方法名() ,注意这个方法名字后面一定加括号示例代码如下:star.sayHi(); // 调用 sayHi 方法,注意,一定不要忘记带后面的括号 变量、属性、函数、方法总结属性是对象的一部分,而变量不是对象的一部分,变量是单独存储数据的容器 变量:单独声明赋值,单独存在 属性:对象里面的变量称为属性,不需要声明,用来描述该对象的特征方法是对象的一部分,函数不是对象的一部分,函数是单独封装操作的容器 函数:单独存在的,通过“函数名()”的方式就可以调用 方法:对象里面的函数称为方法,方法不需要声明,使用“对象.方法名()”的方式就可以调用,方法用来描述该对象的行为和功能。 利用 new Object 创建对象 创建空对象var andy = new Obect(); 通过内置构造函数Object创建对象,此时andy变量已经保存了创建出来的空对象 给空对象添加属性和方法 通过对象操作属性和方法的方式,来为对象增加属性和方法示例代码如下: andy.name = 'pink'; andy.age = 18; andy.sex = '男'; andy.sayHi = function(){ alert('大家好啊~'); } 注意: Object() :第一个字母大写 new Object() :需要 new 关键字 使用的格式:对象.属性 = 值; 利用构造函数创建对象 构造函数 构造函数:是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。 构造函数的封装格式:function 构造函数名(形参1,形参2,形参3) { this.属性名1 = 参数1; this.属性名2 = 参数2; this.属性名3 = 参数3; this.方法名 = 函数体; } 构造函数的调用格式var obj = new 构造函数名(实参1,实参2,实参3) 以上代码中,obj即接收到构造函数创建出来的对象。 注意事项 构造函数约定首字母大写。 函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法。 构造函数中不需要 return 返回结果。 当我们创建对象的时候,必须用 new 来调用构造函数。 其他构造函数,如 Stars(),抽象了对象的公共部分,封装到了函数里面,它泛指某一大类(class)创建对象,如 new Stars(),特指某一个,通过 new 关键字创建对象的过程我们也称为对象实例化 new关键字的作用 在构造函数代码开始执行之前,创建一个空对象; 修改this的指向,把this指向创建出来的空对象; 执行函数的代码 在函数完成之后,返回this---即创建出来的对象 5.3 遍历对象 for...in 语句用于对数组或者对象的属性进行循环操作。其语法如下:for (变量 in 对象名字) { // 在此执行代码 } 语法中的变量是自定义的,它需要符合命名规范,通常我们会将这个变量写为 k 或者 key。for (var k in obj) { console.log(k); // 这里的 k 是属性名 console.log(obj[k]); // 这里的 obj[k] 是属性值 }
2022年05月04日
35 阅读
0 评论
0 点赞
2022-05-03
JavaScript循环
1 - 循环1.1 for循环 语法结构 for(初始化变量; 条件表达式; 操作表达式 ){//循环体} | 名称 | 作用 | | ---------- | ------------------------------------------------------------ | | 初始化变量 | 通常被用于初始化一个计数器,该表达式可以使用 var 关键字声明新的变量,这个变量帮我们来记录次数。 | | 条件表达式 | 用于确定每一次循环是否能被执行。如果结果是 true 就继续循环,否则退出循环。 | | 操作表达式 | 用于确定每一次循环是否能被执行。如果结果是 true 就继续循环,否则退出循环。 | 执行过程: 1. 初始化变量,初始化操作在整个 for 循环只会执行一次。 - 执行条件表达式,如果为true,则执行循环体语句,否则退出循环,循环结束。 1. 执行操作表达式,此时第一轮结束。 2. 第二轮开始,直接去执行条件表达式(不再初始化变量),如果为 true ,则去执行循环体语句,否则退出循环。 3. 继续执行操作表达式,第二轮结束。 4. 后续跟第二轮一致,直至条件表达式为假,结束整个 for 循环。 断点调试: 断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。断点调试可以帮助观察程序的运行过程 ```html 断点调试的流程: 1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点 2、Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。 3、摁下F11,程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。 for 循环重复相同的代码比如输出10句“媳妇我错了”// 基本写法 for(var i = 1; i <= 10; i++){ console.log('媳妇我错了~'); } // 用户输入次数 var num = prompt('请输入次数:'); for ( var i = 1 ; i <= num; i++) { console.log('媳妇我错了~'); } for 循环重复不相同的代码例如,求输出1到100岁: // 基本写法for (var i = 1; i <= 100; i++) {console.log('这个人今年' + i + '岁了');} 例如,求输出1到100岁,并提示出生、死亡 ```js // for 里面是可以添加其他语句的 for (var i = 1; i <= 100; i++) { if (i == 1) { console.log('这个人今年1岁了, 它出生了'); } else if (i == 100) { console.log('这个人今年100岁了,它死了'); } else { console.log('这个人今年' + i + '岁了'); } } for循环因为有了计数器的存在,还可以重复的执行某些操作,比如做一些算术运算。1.2 双重for循环 双重 for 循环概述 循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在for循环语句中,可以再嵌套一个for 循环,这样的 for 循环语句我们称之为双重for循环。 双重 for 循环语法for (外循环的初始; 外循环的条件; 外循环的操作表达式) { for (内循环的初始; 内循环的条件; 内循环的操作表达式) { 需执行的代码; } } 内层循环可以看做外层循环的循环体语句 内层循环执行的顺序也要遵循 for 循环的执行顺序 外层循环执行一次,内层循环要执行全部次数 打印五行五列星星var star = ''; for (var j = 1; j <= 3; j++) { for (var i = 1; i <= 3; i++) { star += '☆' } // 每次满 5个星星 就 加一次换行 star += '\n' } console.log(star); 核心逻辑:1.内层循环负责一行打印五个星星2.外层循环负责打印五行 for 循环小结 for 循环可以重复执行某些相同代码 for 循环可以重复执行些许不同的代码,因为我们有计数器 for 循环可以重复执行某些操作,比如算术运算符加法操作 随着需求增加,双重for循环可以做更多、更好看的效果 双重 for 循环,外层循环一次,内层 for 循环全部执行 for 循环是循环条件和数字直接相关的循环 1.3 while循环while语句的语法结构如下:while (条件表达式) { // 循环体代码 } 执行思路: 1 先执行条件表达式,如果结果为 true,则执行循环体代码;如果为 false,则退出循环,执行后面代码 2 执行循环体代码 3 循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为true,则会继续执行循环体,直到循环条件为 false 时,整个循环过程才会结束 注意: 使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环 1.4 do-while循环do... while 语句的语法结构如下:do { // 循环体代码 - 条件表达式为 true 时重复执行循环体代码 } while(条件表达式); 执行思路 1 先执行一次循环体代码 2 再执行条件表达式,如果结果为 true,则继续执行循环体代码,如果为 false,则退出循环,继续执行后面代码注意:先再执行循环体,再判断,do…while循环语句至少会执行一次循环体代码 1.5 continue、breakcontinue 关键字用于立即跳出本次循环,继续下一次循环(本次循环体中 continue 之后的代码就会少执行一次)。例如,吃5个包子,第3个有虫子,就扔掉第3个,继续吃第4个第5个包子,其代码实现如下: for (var i = 1; i <= 5; i++) { if (i == 3) { console.log('这个包子有虫子,扔掉'); continue; // 跳出本次循环,跳出的是第3次循环 } console.log('我正在吃第' + i + '个包子呢'); } 运行结果:break 关键字用于立即跳出整个循环(循环结束)。例如,吃5个包子,吃到第3个发现里面有半个虫子,其余的不吃了,其代码实现如下:for (var i = 1; i <= 5; i++) { if (i == 3) { break; // 直接退出整个for 循环,跳到整个for下面的语句 } console.log('我正在吃第' + i + '个包子呢'); } 运行结果:2 - 代码规范2.1 标识符命名规范 变量、函数的命名必须要有意义 变量的名称一般用名词 函数的名称一般用动词 2.2 操作符规范// 操作符的左右两侧各保留一个空格 for (var i = 1; i <= 5; i++) { if (i == 3) { break; // 直接退出整个 for 循环,跳到整个for循环下面的语句 } console.log('我正在吃第' + i + '个包子呢'); } 2.3 单行注释规范for (var i = 1; i <= 5; i++) { if (i == 3) { break; // 单行注释前面注意有个空格 } console.log('我正在吃第' + i + '个包子呢'); } 2.4 其他规范关键词、操作符之间后加空格
2022年05月03日
60 阅读
0 评论
0 点赞
1
2