- 博客(141)
- 收藏
- 关注
RSS订阅原创 vue指令-v-for
vue指令-v-for目标: 列表渲染, 所在标签结构, 按照数据数量, 循环生成v-for="(值, 索引) in 目标结构"v-for="值 in 目标结构"
2022-07-10 19:01:04
783
1
原创 vue指令 v-show和v-if
v-show和v-if控制标签的隐藏或出现v-show 用的display:none隐藏 (频繁切换使用)v-if 直接从DOM树上移除
2022-07-10 18:52:34
587
原创 vue基础指令：v-model
v-model绑定不同表单标签目标：value属性和Vue数据变量, 双向绑定到一起语法: v-model="Vue数据变量"v-model修饰符语法 : v-model.修饰符="vue数据变量".number 以parseFloat转成数字类型 感觉没啥用，不如直接表单直接改number.trim 去除首尾空白字符.lazy 在change时触发而非input时...
2022-07-04 19:51:54
799
原创 ES6 模块化
ES6 模块化规范是 浏览器端 与 服务器端 通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需要再额外学习 AMD(AMD yes !!! XD)、CMD 或 CommonJS等模块化规范。每个js脚本里面只能使用唯一一次 export default ，否则会报错 直接导入会执行被导入js脚本的程序...
2022-06-30 19:51:30
249
原创 node服务器 res.end()中写中文，客户端中乱码问题的解决方法
node服务器 res.end()中写中文，客户端中乱码问题的解决方法解决方法：在res.end之前添加设置一个utf8的响应头
2022-06-19 20:42:32
330
原创 用Node创建一个服务器
创建 web 服务器的基本步骤① 导入 http 模块② 创建 web 服务器实例③ 为服务器实例绑定 request 事件，监听客户端的请求④ 启动服务器
2022-06-19 20:34:20
343
原创 path.join() 、path.basename() 和 path.extname()
path.join() 方法，用来将多个路径片段拼接成一个完整的路径字符串path.basename() 方法，用来从路径字符串中，将文件名解析出来path.extname() 方法，可以获取路径中的扩展名部分
2022-06-19 19:55:35
418
原创 fs.readFile() 和 fs.writeFile()
fs.readFile() 方法，用来读取指定文件中的内容fs.writeFile() 方法，用来向指定的文件中写入内容 注意：fs.writeFile()是将目标文件里面的内容重写，并不会从原有的内容上添加
2022-06-19 19:19:52
5081
原创 案例：tab栏切换
案例说明：1、一个标题对应一个div内容栏 ；2、遍历标签，给标题创建自定义属性index；3、在遍历标签的循环内，将遍历所有的div都设为隐藏，只显示当前index对应的那个div。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini..
2022-05-16 20:13:36
329
2
原创 案例：全部选中 & 全部取消选中
案例说明：1、选中全选框，底下的子选择框全部选中。2、取消选中全选框，底下的子选择框全部取消选中。3、子选择框全部选中，全选框自动选中，如果有一个子选择框取消选中，则取消全选框选中。.<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * ..
2022-05-16 20:00:22
536
原创 Web-api学习 15：click 延时解决方案
移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。解决方案：1. 禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 <meta name="viewport" content="user-scalable=no">2.利用touch事件自己封装这个事件解决300ms 延迟。原理就是： 当我们手指触摸屏幕，记录当前触摸时间 当我们手指离开屏幕， 用离开的时间减.
2022-05-15 23:13:03
122
原创 Web-api学习 14：classList属性
classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。该属性用于在元素中添加，移除及切换 CSS 类。有以下方法添加类：element.classList.add（’类名’）； focus.classList.add('current');移除类：element.classList.remove（’类名’）;focus.classList.remove('current');切换类：element.classList.toggle
2022-05-15 23:04:14
174
原创 Web-api学习 13：触屏事件
触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件如下：2. 触摸事件对象（TouchEvent）TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。.
2022-05-15 22:56:39
222
原创 Web-api学习 12：动画函数封装
动画函数封装缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来思路： 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。 核心算法： (目标值 - 现在的位置) /10 做为每次移动的距离步长 停止的条件是： 让当前盒子位置等于目标位置就停止定时器 注意步长值需要取整 动画函数多个目标值之间移动可以让动画函数从 800 移动到 500。当我们点击按钮时候，判断步长是正值还是负值1.如果是正值，则步长往大了取整2....
2022-05-15 22:14:05
73
原创 案例：仿淘宝固定侧边栏
效果图：案例分析: 需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是document 滚动到某个位置，就是判断页面被卷去的上部值。 页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧window.pageXOffset 注意，元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset 其实这个值 可以通过盒子的 offsetT...
2022-05-12 23:54:39
186
原创 案例：仿京东淘宝商品放大镜
效果图：项目需求：使鼠标移动到商品图上，有一层遮罩显示范围，并将其显示的范围放大显示到右侧主要涉及到的知识：1、获取元素2、注册事件3、鼠标监听事件 mousemove、mouseover、mouseout4、通过获取元素修改css样式5、获取鼠标在页面的坐标（e.pageX,e.pageY）6、获取子元素在有相对定位（relative）里的偏移量 xxx.offsetLeft xxx.offsetTop用到的素材代码：<!..
2022-05-12 23:44:18
334
原创 案例：登录框拖拽
效果图：主要涉及到的知识：1、获取元素2、鼠标监听事件 click、mousedown、mousemove、mouseup3、注册事件，删除事件4、通过获取元素修改css样式5、获取鼠标在页面的坐标（e.pageX,e.pageY）6、获取子元素在有相对定位（relative）里的偏移量 xxx.offsetLeft xxx.offsetTop代码：<!DOCTYPE html><html lang="en"><head>.
2022-05-12 22:01:56
203
原创 Web-api学习 11：元素偏移量 offset
offset 概述offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 案例：获取鼠标在盒子内的坐标<head> <style> .box { margin: 100px auto; width: 300..
2022-05-12 19:46:46
311
原创 Web-api学习 10：onload 和 DOMContentLoaded 的区别
onloadwindow.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。DOMContentLoadedDOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。IE9以上才支持！！！需要兼容请使用onload如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMCon.
2022-05-12 19:21:21
128
原创 Web-api学习 09：e.target 和 this 的区别
this 是事件绑定的元素（绑定这个事件处理函数的元素） 。 e.target 是事件触发的元素。 只有一个元素的时候this 和 e.target都指向了函数调用（绑定）者 div <div>123</div> <script> var div = document.querySelector('div'); div.addEventListener('click', function(e) {..
2022-05-12 19:09:52
120
原创 Web-api学习 08：DOM的核心总结
1、创建2、增3、删4、改5、查6、属性操作7、事件操作7.1 注册事件（2种方式）7.2 事件监听7.2.1 addEventListener()事件监听（IE9以后支持）7.2.2attacheEvent()事件监听（IE678支持）7.2.3事件监听兼容性解决方案7.3 删除事件（解绑事件）删除事件兼容性解决方案7.4 DOM事件流
2022-05-12 18:31:52
168
原创 Web-api学习 07：DOM事件流
html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。DOM 事件流会经历3个阶段： 捕获阶段 当前目标阶段 冒泡阶段 我们向水里面扔一块石头..
2022-05-12 18:29:16
97
原创 Web-api学习 06：节点操作
1. 父级节点 2. 子节点 3. 兄弟节点 4. 创建节点 5. 添加节点 6.删除节点 7.复制（克隆）节点
2022-05-11 17:39:56
121
原创 Web-api学习 05：自定义属性操作
1.获取属性值 <div id="demo" index="1" class="nav"></div> <script> var div = document.querySelector('div'); // 1. 获取元素的属性值 // (1) element.属性 console.log(div.id); // demo //(2) element.getAttri
2022-05-11 17:27:41
103
原创 Web-api学习 04：样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式。常用方式通过操作style属性元素对象的style属性也是一个对象！元素对象.style.样式属性 = 值;案例代码 <body> <div></div> <script> // 1. 获取元素 var div = document.querySelector('div'); // 2. 注册事件 处理..
2022-05-11 16:44:38
82
原创 Web-api学习 03：innerText 和 innerHTML的区别
innerText和innerHTML的区别 获取内容时的区别： innerText会去除空格和换行，而innerHTML会保留空格和换行 设置内容时的区别： innerText不会识别html，而innerHTML会识别案例代码<body> <div></div> <p> 我是文字 <span>123</span> </p> ...
2022-05-11 16:14:58
395
原创 Web-api学习 02：常见的鼠标事件
案例代码onclick点击事件<body> <div>123</div> <script> // 执行事件步骤 // 点击div 控制台输出 我被选中了 // 1. 获取事件源 var div = document.querySelector('div'); // 2.绑定事件 注册事件 // div.onclick ..
2022-05-11 16:07:11
352
原创 Web-api学习 01：H5新增获取元素方式
document.querySelector('选择器'); // 选中的是单个选择器document.querySelectorAll('选择器'); // 选中的是一类选择器，类似于数组一样存储起来// 虽然 h5 新增的不止这两个，但是这两个已经完完全全够用了<body> <div class="box">盒子1</div> <div class="box">盒子2</div> <div id.
2022-05-11 16:01:41
195
原创 JS学习28：replace() 和 split()方法
replace()方法replace() 方法用于在字符串中用一些字符替换另一些字符，其使用格式如下：replace(oldStr,newStr)；//将oldStr替换为newStrsplit()方法split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。 其使用格式如下： 字符串.split("分割字符")// 1. 替换字符 replace('被替换的字符', '替换为的字符') 它只会替换第一个字符var str = '
2022-05-11 15:53:04
743
原创 JS学习27：indexOf() 和 charAt()
方法名 说明 使用 indexOf('要查找的字符',开始的位置) 返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是 index 索引号 str.indexOf('要查找的字符',开始的位置) charAt(index) 返回指定位置的字符(index 字符串的索引号) str.charAt(0) 注意：字符串可以通过str[index]方式获取指定位置字符，因为字符串是字符数组。// 字符串对象 根据字符返回位置 str.inde
2022-05-11 15:49:24
569
原创 JS学习26：数组对象 之 数组转换为字符串
数组中有把数组转化为字符串的方法，部分方法如下表注意：join方法如果不传入参数，则按照 “ , ”拼接元素 // 数组转换为字符串 // 1. toString() 将我们的数组转换为字符串var arr = [1, 2, 3];console.log(arr.toString()); // 1,2,3// 2. join(分隔符) var arr1 = ['green', 'blue', 'pink'];console.log(arr1.join()); // green,b.
2022-05-11 15:34:16
4996
原创 JS学习24：数组对象 之 检测是否为数组
instanceof 运算符 instanceof 可以判断一个对象是否是某个构造函数的实例 语法： A instanceof B : 判断A是否是B的一个实例（对象）举个栗子；var arr = [1, 23];var obj = {};console.log(arr instanceof Array); // true，arr是不是Array的实例？是的console.log(obj instanceof Array); // false，obj是不是Array的实
2022-05-10 23:56:59
114
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人