- 博客(39)
- 收藏
- 关注
RSS订阅原创 移动端网页开发进阶
事件PC端事件：鼠标事件、键盘事件移动端事件 : 触摸事件移动端事件有哪些触摸事件touch事件pointer事件手势(gesture)事件传感器(sensor)事件touch事件touchstart/touchmove/touchendtouches/targetTouches/changedTouchespageX pageY/clientX clientY幻灯片案例核心逻辑：to(index)操控逻辑：拖动、滑动移动端动画：translate3d(x, y
2021-09-08 17:00:37
166
原创 移动端网页开发基础
什么是Web开发针对移动端的Web开发手机平板电脑前端开发分类PC端开发移动端开发移动Web开发混合式开发(Hybrid App)微信小程序/公众号开发我们要学什么移动Web开发基础概念移动Web开发基础知识响应式布局移动端屏幕适配移动端事件移动端调试终端检测移动端常见问题移动端性能优化像素分辨率物理像素CSS像素设备像素比（dpr）物理像素物理像素（physical pixel）设备像素（dp：device pixel）CSS像素
2021-09-08 16:37:04
179
原创 Ajax、Fetch和跨域请求
初识 AjaxAjax 是什么搭建 Ajax 开发环境Ajax 的基本用法XMLHttpRequestAjax 的使用步骤使用 Ajax 完成前后端通信GET 请求携带数据数据编码POST 请求携带数据数据编码JSON 是什么初识 JSON 为什么需要 JSONJSON 的 3 种形式简单值形式对象形式数组形式JSON 的常用方法JSON.parse()JSON.stringify()使用 JSON.parse() 和 JSON.stri
2021-09-07 23:39:54
180
原创 HTTP与本地存储
初识 HTTPHTTP 是什么HTTP 请求响应的过程HTTP 报文HTTP 报文是什么HTTP 报文格式HTTP 方法常用的 HTTP 方法HTTP 方法的语义RESTful 接口设计GET 和 POST 方法的对比语义发送数据缓存安全性HTTP 状态码HTTP 状态码是什么HTTP 状态码的语义初识前后端通信前后端通信是什么后端向前端发送数据前端向后端发送数据前后端通信的过程与概念解释前后端通信的过程概念解释前后端的通信方式
2021-09-07 22:44:04
646
原创 Module Babel Webpack
Module 是什么什么是模块什么是模块系统Module 的基本用法使用 Module 模块化之前的例子使用 script 标签加载模块分析 Module 解决的问题Module 的两种导出和导入export default 导出和对应的 import 导入export 导出和对应的 import 导入模块顶层的 this 指向export default 和对应的 import认识导出和导入基本用法export 和对应的 import基本用法多个导出导出
2021-09-07 22:38:19
89
原创 Promise与Class
Promise 的基本用法实例化构造函数生成实例对象Promise 的状态then 方法resolve 和 reject 函数的参数Promise 的实例方法then()什么时候执行执行后的返回值then 方法返回的 Promise 对象的状态改变向后传值使用 Promise 解决回调地狱catch()有什么用基本用法finally()什么时候执行本质Promise.resolve() 和 Promise.reject()本质参数在 then 方法
2021-09-07 22:31:19
74
原创 ES6语法拓展（一）
剩余参数是什么认识剩余参数剩余参数的本质注意事项箭头函数的剩余参数使用剩余参数替代 arguments 获取实际参数剩余参数的位置区分剩余参数和展开运算符根本区别区分剩余参数和展开运算符基本用法展开对象合并对象注意事项空对象的展开非对象的展开对象中对象属性的展开Set 是什么什么是 Set理解 SetSet 实例的方法和属性方法属性Set 构造函数的参数数组字符串、arguments、NodeList、Set 等Set 的注意事项判断重复
2021-09-06 23:56:07
67
原创 ES6的一些知识
解构赋值是什么模式（结构）匹配索引值相同的完成赋值默认值的基本用法默认值的生效条件默认值表达式对象解构赋值的原理模式（结构）匹配属性名相同的完成赋值对象解构赋值的默认值将一个已经声明的变量用于解构赋值可以取到继承的属性字符串的解构赋值数值和布尔值的解构赋值undefined 和 null 的解构赋值对象字面量的增强属性和方法的简洁表示法对象字面量是什么属性的简洁表示法方法的简洁表示法方括号语法方括号语
2021-09-06 23:50:11
55
原创 模板字符和箭头函数
模板字符串是什么认识模板字符串模板字符串与一般字符串的区别模板字符串的注意事项输出多行字符串输出 ` 和 \ 等特殊字符模板字符串的注入箭头函数是什么认识箭头函数箭头函数的结构如何将一般函数改写成箭头函数单个参数单行函数体单行对象this 指向全局作用域中的 this 指向一般函数（非箭头函数）中的 this 指向箭头函数中的 this 指向不适用箭头函数的场景作为构造函数需要 this 指向调用对象的时候需要使用 argu
2021-09-06 23:36:26
70
原创 ES的简介
ECMAScript 6ECMAScript 是语言的标准6 是版本号ES6 = ECMAScript 这门语言的第 6 代标准ECMA欧洲计算机制造商协会标准化组织ECMAScript = 由 ECMA 这个标准化组织制定的一个语言标准具体是什么语法API历史版本ES1-3、ES5-6ES4 被废弃了ES3ES 与 JavaScript 的关系JavaScript(浏览器端) = ECMAScript(语法+API) + DOM+ BOMES6 的兼容
2021-09-06 21:43:34
114
原创 正则表达式
什么是正则表达式正则表达式（regular expression）描述了字符串的“构成模式”，经常被用于检查字符串是否符合预定的格式要求// 要检查的字符串var str = '456789';// 正则表达式规则var regexp = /^\d{6}$/;// 检查if (regexp.test(str)) {alert('符合规则');} else {alert('不符合规则');}用一个例子快速演示正则表达式基本使用方法：检查某个字符串是否是6位数字正则表达式“按位
2021-09-06 21:38:22
156
原创 JS对象（三）
call和apply能指定函数的上下文function sum() {alert(this.chinese + this.math + this.english);}var xiaoming = {chinese: 80,math: 95,english: 93};sum. call(xiaoming);sum. apply( xiaoming);函数.call(上下文);函数.apply(上下文);call和apply的区别function sum(b1, b2) {ale
2021-09-06 21:27:44
92
原创 JS对象（二）
函数的上下文由调用函数的方式决定函数的上下文（this关键字）由调用函数的方式决定，function是“运行时上下文”策略函数如果不调用，则不能确定函数的上下文规则1：对象打点调用它的方法函数，则函数的上下文是这个打点的对象规则1题目举例 - 第1小题function fn() {console.log(this.a + this.b);}var obj = {a: 66,b: 33,fn: fn};obj.fn();规则1题目举例 - 第2小题构成对象.方法()的形式，
2021-09-05 23:37:23
174
原创 JS对象（一）
认识对象对象（object）是“键值对”的集合，表示属性和值的映射关系var xiaoming = {name: '小明',age: 12,sex: '男',hobbies: ['足球', '编程']};k和v之间用冒号分隔，每组k:v之间用逗号分隔，最后一个k:v对后可以不书写逗号var obj = {k: v,k: v,k: v,k: v};如果对象的属性键名不符合JS标识符命名规范，则这个键名必须用引号包裹var xiaoming = {name: '
2021-09-05 23:30:19
494
原创 BOM基础
BOM是什么 BOM（Browser Object Model，浏览器对象模型）是JS与浏览器窗口交互的接口 一些与浏览器改变尺寸、滚动条滚动相关的特效，都要借助BOM技术window对象 window对象是当前JS脚本运行所处的窗口，而这个窗口中包含DOM结构，window.document属性就是document对象 在有标签页功能的浏览器中，每个标签都拥有自己的window 对象；也就是说，同一个窗口的标签页之间不会共享一个 window 对象全局变量是window的属性 全局
2021-09-04 23:55:09
61
原创 DOM事件
事件监听DOM允许我们书写JavaScript代码以让HTML元素对事件作出反应什么是“事件”：用户与网页的交互动作“监听”，顾名思义，就是让计算机随时能够发现这个事件发生了，从而执行程序员预先编写的一些程序设置事件监听的方法主要有onxxx和addEventListener()两种，二者的区别将在“事件传播”一课中介绍最简单的给元素设置事件监听的方法就是设置它们的onxxx属性，像这样：|事件名| 事件描述|onclick 当鼠标单击某个对象ondblclick 当鼠标双击某个对象o
2021-09-04 23:26:06
96
原创 JS和CSS3结合实现动画
JS和CSS3结合实现动画我们知道，CSS3的transition过渡属性可以实现动画JavaScript可以利用CSS3的transition属性轻松实现元素动画JS和CSS3结合实现动画规避了定时器制作动画的缺点函数节流函数节流：一个函数执行一次后，只有大于设定的执行周期后才允许执行第二次函数节流非常容易实现，只需要借助setTimeout()延时器var lock = true;function 需要节流的函数() {// 如果锁是关闭状态，则不执行if (!lock) re
2021-09-04 23:02:24
639
原创 DOM基本概念
DOM基本概念DOM是JS操控HTML和CSS的桥梁比如下面的HTML结构，现在想用JavaScript在“牛奶”后面插入一个p标签对，内容是“可乐”<div id="box"><p>牛奶</p><p>咖啡</p><p>果汁</p></div>DOM（Document Object Model，文档对象模型）是JavaScript操作HTML文档的接口，使文档操作变得非常优雅、简便DOM
2021-09-04 17:17:53
149
原创 JS函数与DOM
什么是函数函数就是语句的封装，可以让这些代码方便地被复用函数具有“一次定义，多次调用”的优点使用函数，可以简化问题，让代码更具有可读性和变量类似，函数必须先定义然后才能使用使用function关键字定义函数，function是“功能”的意思函数的调用执行函数体中的所有语句，就称为“调用函数”调用函数非常简单，只需在函数名字后书写圆括号对即可和变量声明提升类似，函数声明也可以被提升如果函数是用函数表达式的写法定义的，则没有提升特性参数是函数内的一些
2021-09-04 02:40:06
274
原创 JS数组算法
遍历相关算法题目：求数组中每一项的总和、平均数题目：求数组项的最大值和最小值数组去重题目：去掉数组中的重复项数组去重思路：准备一个空结果数组，遍历原数组，如果遍历到的项不在结果数组中，则推入结果数组。随机样本题目：请随机从原数组中取3项思路：准备一个空结果数组，遍历原数组，随机选择一项，推入结果数组，并且将这项删除冒泡排序冒泡排序是一个著名的排序算法，也是在面试时非常爱考察的算法冒泡排序的核心思路是一趟一趟地进行多次项的两两比较，每次都会将最小的元素排好位置，如
2021-09-04 02:01:44
134
原创 JS数组介绍
什么是数组数组（Array），顾名思义，用来存储一组相关的值，从而方便进行求和、计算平均数、逐项遍历等操作。var scoreArr = [96, 97, 76, 87, 87, 90, 91, 100, 78, 56];每种高级编程语言中都有数组，它是非常重要的一种数据结构数组的定义方法定义一个数组非常的简单，只需要使用方括号[]即可var arr = ['A', 'B', 'C', 'D'];定义数组还可以这样：var arr = new Array('A', 'B', 'C',
2021-09-04 01:55:52
118
转载 运行 nrm ls 时出错
原作者：小颖子_Ly链接：https://blog.csdn.net/qq_46043634/article/details/115332628发布时间：2021-03-30 18:59:151、nrmnrm(npm registry manager )是npm的镜像源管理工具，有时候国外资源太慢，使用这个就可以快速地在 npm 源间切换。作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因
2021-09-01 00:53:03
401
原创 HTML过渡和动画
transition过渡transition过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”过渡从IE10开始兼容，移动端兼容良好曾几何时，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为使用CSS3过渡优点：动画更细腻，内存开销小transition属性有4个要素transition: width 1s linear 0s;过渡要定义在元素的开始状态上，而不是结束状态上所有数值类型的属性，都可以参与过渡，比如width、h
2021-08-31 00:50:54
1267
原创 HTML变形
旋转变形将transform属性的值设置为rotate()，即可实现旋转变形transform: rotate(45deg);若角度为正，则顺时针方向旋转，否则逆时针方向旋转可以使用transform-origin属性设置自己的自定义变换原点缩放变形将transform属性的值设置为scale()，即可实现缩放变形transform: scale(3);当数值小于1时，表示缩小元素；大于1表示放大元素斜切变形将transform属性的值设置为skew()，即可实现斜切变形tr
2021-08-31 00:46:34
515
原创 HTML背景图片和背景渐变
线性渐变盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景background-image: linear-gradient(to right, blue, red);渐变方向也可以写成度数background-image: linear-gradient(45deg, blue, red);可以有多个颜色值，并且可以用百分数定义它们出现的位置linear-gradient(to bottom, blue, yellow 20%, red)
2021-08-30 00:31:12
2520
原创 HTML边框和圆角
边框border属性border属性需要三个要素:线宽度 线型 线颜色border: 1px solid red;线型值意义solid实线dashed虚线dotted点状线边框三要素可以拆分为小属性|小属性| 意义||-|-||border-width |线宽||border-style| 线型||border-color |线颜色|四个方向的边框属性意义border-top上边框border-right右边
2021-08-29 01:01:46
1611
原创 HTML浮动与定位
浮动浮动的最本质功能：用来实现并排要浮动，并排的盒子都要设置浮动要浮动，并排的盒子都要设置浮动子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等右浮动float:right;即可设置右浮动tips垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！“大盒子带着小盒子跑”，一个大盒子中，又是一个小天地，内部可以继续使用浮动超市售卖的塑料袋0.
2021-08-29 00:55:00
1292
原创 HTML盒模型
什么是盒模型所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”盒子的总宽度 = width + 左右padding + 左右border盒子的总高度 = height + 上下padding + 上下borderwidth属性width属性表示盒子内容的宽度width属性的单位通常是px，移动端开发也会涉及百分数、rem等单位-当块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width
2021-08-28 00:15:01
959
原创 文本与字体样式属性
常用文本样式属性color属性color 属性可设置文本内容的前景色color 属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法英语单词表示法，比如color: red; 仅仅用于学习时临时设置一下颜色，工作时基本不用这样的形式，因为追求精确color属性 - 十六进制表示法十六进制表示法是所有设计软件中都通用的颜色表示法，设计师给我们的设计图上面标注的颜色，通常为十六进制表示color: #ff0000;比如十六进制ff就是十进制的255，每种颜色分量都是0~255
2021-08-27 21:38:37
377
原创 CSS3选择器
传统CSS2.1选择器标签选择器span { color: red;}b { color: green;}标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅标签选择器“覆盖面”非常大，所以通常用于标签的初始化id选择器标签可以有id属性，是这个标签的唯一标识；id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母；同一个页
2021-08-27 01:51:10
212
原创 ＜form＞: 表单标签
表单是什么表单用来收集信息，比如注册、登录、发送评论反馈、购买商品等等所有HTML表单都以一个<form>元素开始<form action="save.php" method="post"></form>基本控件单行文本框使用type属性值被设置为text的元素可以创建单行文本框，它是一个单标签<input type ="text">value属性表示已经填写好的值placeholder属性表示提示文本，将以浅色文字写在文本框中，
2021-08-27 00:50:03
174
原创 多媒体与语义化标签
区块标签div标签实现文档区块分隔以前，div标签是文档区块分隔唯一手段，为了区分每个div的功能，程序员会借助div标签的class属性<body> <div class="header"> <div class="logo"></div> <div class="nav"></div> </div> <div class="banner"></div> <div cla
2021-08-26 01:17:48
4886
原创 三种列表标签
三种列表标签语义<ul></ul>无序列表<ol></ol>有序列表<dl></dl>定义列表有序列表无序列表使用<ul></ul>标签，每个列表项都是<li></li>标签<ul> <li>面包</li> <li>牛奶</li> <li>鸡蛋</li&
2021-08-25 22:05:32
783
原创 HTML语法及基础标签
一、HTML骨架1.代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="……"> <title>Document</title></head><body></body></html>2.介绍<!DOCTYPE
2021-08-25 00:53:00
122
原创 HTML（一）
一、HTML基础语法1.什么是HTMLHTML（Hypertext Markup language）超文本标记语言2.HTML发展史HTML1.0（1993IETF）→HTML2.0（1995W3C）→HTML3.2（1996W3C）→HTML4.0（1997W3C）→HTML4.0.1（1999W3C） →…→XHTML1.0（2000W3C）→…→HTML5定稿（20014） （主要学习加粗的）3.HTML特点-HTML不需要编译，浏览...
2021-08-08 22:11:48
176
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人