- 博客(25)
- 收藏
- 关注
RSS订阅原创 es6箭头函数
箭头函数ES6 增加了箭头函数：let func = value => value;复制代码相当于：let func = function (value) {return value;};复制代码如果需要给函数传入多个参数：let func = (value, num) => value * num;复制代码如果函数的代码块需要多条语句：let func = (value, num) => {return value * num};复制代码如果需要直接返回一个对象
2021-06-22 18:18:50
84
原创 ES6之Set和Map的使用
ES6之Set和Map的使用前言当我们需要存储一些数据的时候，首先想到的是定义一个变量用来存储，之后我们可能学了数组，发现数组比变量可以存储更多的数据，接着可能有其它的存储数据的方法等等，然而我今天需要介绍的是在ES6中比较常见使用的数据类型结构，Set和Map。Set数据结构一、Set简介set中成员的值都是唯一的，没有重复的值向set中添加成员时，不会发生类型转换向set中添加的对象总是不想等二、常用的属性和方法属性：**size：**返回set实例的成员总数方法：**add()
2021-06-22 17:01:00
77
原创 2021-06-15class
classclass 是 ES6 的新特性，可以用来定义一个类，实际上，class 只是一种语法糖，它是构造函数的另一种写法。class Person {}typeof Person // "function"Person.prototype.constructor === Person // true使用用法和使用构造函数一样，通过 new 来生成对象实例class Person {}let jon = new Person()constructor每个类都必须要有一个 c
2021-06-15 20:40:21
90
原创 2021-06-15ES6 系列之箭头函数
ES6 系列之箭头函数ES6 增加了箭头函数：let func = value => value;复制代码相当于：let func = function (value) { return value;};复制代码如果需要给函数传入多个参数：let func = (value, num) => value * num;复制代码如果函数的代码块需要多条语句：let func = (value, num) => { return value * num}
2021-06-15 20:33:15
109
原创 ajax的简单封装
ajax的简单封装ajax一般分为简单的四部：创建ajax对象（这里兼容ie的话要做一下处理）连接，即请求对象的open方法（get和post还有点不同，get参数要放在url后面，post要设置请求头）发送，即请求对象的send函数（post参数则放在send里面）接收，在onreadystatechange（存储函数或函数名，每当readyState属性改变时，就会调用该函数。）函数里面处理。还可以加上超时。onreadystatechange分析：要先判断readyState的状态（有
2021-06-07 20:23:11
53
原创 bootstrap基本用法
bootstrap基本用法进入中文官网：http://www.bootcss.com开始第一个Demo准备工作：（1）进入bootstrap中文官网，点击起步（2）下载生产环境下载好的文件是一个压缩文件，学习时建议使用未压缩版本，项目开发时必须使用压缩版本（3）找到基本模板，将其复制粘贴进来，当然，必要时需要按需求进行更改。学习bootstrap首先需要理解的是栅格系统，看官网（http://v3.bootcss.com/css/#grid-intro）给的定义：我们需要理解的是col-x
2021-06-07 18:45:01
132
1
原创 new操作符原理及实现
new操作符原理及实现分析：new做了什么new操作符通过执行自定义构造函数或者js内置构造函数，从而生成一个实例对象。mdn上把内部操作大概分为4步：创建一个空的简单JavaScript对象（即{ } ）；链接该对象（即设置该对象的构造函数）到另一个对象 ；将步骤1新创建的对象作为this的上下文 ；如果该函数没有返回对象，则返回this。通过一个简单的demo感受下上面的步骤function Person (name){ this.name = name}let p = n
2021-05-24 20:38:18
147
原创 JS 中 this 指向
JS 中 this 指向问题1. 箭头函数箭头函数排在第一个是因为它的 this 不会被改变，所以只要当前函数是箭头函数，那么就不用再看其他规则了。箭头函数的 this 是在创建它时外层 this 的指向。这里的重点有两个：创建箭头函数时，就已经确定了它的 this 指向。箭头函数内的 this 指向外层的 this。所以要知道箭头函数的 this 就得先知道外层 this 的指向，需要继续在外层应用七步口诀。2. new当使用 new 关键字调用函数时，函数中的 this 一定是 JS 创
2021-05-24 19:23:40
136
原创 js练习题
第一题var a = 10, b = 20, c = 30; ++a; a++; var e = ++a + (++b) + (c++) + a++; console.log(e); //77++a //a=11a++ //a=12e= 13+21+30+13=77注意：a++是先计算后赋值，++a是先赋值后计算第二题 var a = "hello"; function fun() {
2021-05-17 20:38:33
259
原创 利用css写一个土星圆环
利用css写一个土星圆环第一个divoutBox我们是用于制作圆环，第二个divcircle我们是用于制用球，同时在CSS里面，我们使用after的伪元素，实现了外边的环整个案例效果图整个案例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
2021-05-17 20:07:05
180
原创 offset、client、scroll的区别
offset、client、scroll的区别offset偏移量：offset dimension1、offsetHeight: 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。2、offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。**3、offsetLeft：**元素的左外边框至包含元素的左内边框之间的像素距离。4、offsetTop：元素的上外
2021-05-16 20:30:38
168
原创 jQuery
jQuery基础宗旨：写得更少，做得更多主要的功能 ：优化HTML文档操作（增，删，改，查，class样式处理）事件处理动画设计Ajax交互所以请注意，jQuery是一个专注于DOM的框架 ，不针对ES与BOMjQuery的语法格式jQuery主要包含三部分起始标志符$选择器封装的方法(只有一个属性length属性)jQuery需要通过第三方JS库来实现，所以我们需要从网络上面下载jQuery的库以后才能使用，可以在官网下载，也可以通过npm去下载下载完成以后，请在需要的页面进行
2021-05-16 20:16:34
37
原创 升级版三级联动
升级版城市三级联动一、准备好需要的数据字典，代码如下（本文只是作为示例，只列出部分省市），格式为｛1：｛1：[ ] ｝｝，即字典里面的元素还是字典，最里面那层是数组。二、构建好HTML静态页面，代码如下（本文只是作为示例，只列出部分省市）：注意，为了接下来能够方便访问字典，把option里面的value属性的值全部和option的内容一样。三、通过document.getElementById()方法分别获取到三个select（省市区）结点。四、初始化省份的标签，即遍历arrData的key值，添
2021-05-09 23:02:37
69
原创 Canvas画布
Canvas画布常用方法与属性moveTo画笔移动到某一个点lineTo直线到某一个点stroke()开始画（描边）strokeRect()画矩形 空心矩形strokeStyle设置描边的颜色fillRect()填充一个矩形fillStyle设置填充的颜色strokeText空心的文字font用于设置字体fillText填充文字beginPath相当于提起笔了closePath相当于把笔放在砚台上面 再次去绘制的时候，就需要moveTodrawImage画图片clearRec
2021-05-09 22:53:14
54
原创 轻松学会正则表达式
正则表达式正则表达式对象正则表达式是使用字面量/ /修饰符这种方式来完成的例如：var re = /ab+c/;匹配规则正则表达式是通过特殊的规则来对字符串进行提取，匹配，验证等操作，在匹配的过程当中它有一系列的规则一元符反义字符转义字符重复匹配分组/捕获重复字符修饰符使用正则表达式正则表达式可以被用于 RegExp 的 exec 和 test 方法以及 String 的 match、replace、search 和 split 方法。使用正则表达式的方法
2021-04-22 19:10:23
51
原创 JavaScript里的作用域与作用域链
作用域首先，提到作用域，要了解一个常识JavaScript中只有函数作用域和全局作用域？什么是块级作用域？块级作用域就是定义在{}之内的范围，比如if(){}或者for(){}里那个{}里的范围就叫做块级作用域。如下代码所示console.log(userName); //undefinedif(0 < 2) { var userName = "小白"; }console.log(userName);//小白/* 1.没有块级作用域 ，所以 if{
2021-04-22 18:52:13
95
原创 利用js实现唐僧骑马动画效果
html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
2021-04-19 20:49:20
128
原创 js实现城市三级联动
三级联动就是平时网页上需要选择的省市县对应位置的下拉栏模块，当选择好省位置后市的下拉栏更新为已选省的，县类似。html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-04-19 20:24:35
166
原创 js的事件类型
鼠标事件事件类型click：用户单击主鼠标按钮（一般是左键）或者按下在聚焦时按下回车键时触发dblclick：用户双击主鼠标按键触发（频率取决于系统配置）mousedown：用户按下鼠标任意按键时触发mouseup：用户抬起鼠标任意按键时触发mousemove：鼠标在元素上移动时触发mouseover：鼠标进入元素时触发mouseout：鼠标离开元素时触发mouseenter：鼠标进入元素时触发mouseleave：鼠标离开元素时触发代码<body> <di
2021-04-12 19:47:34
67
原创 js中的dom对象
什么是DOM对象：dom对象是将HTML文档转换成一个DOM树，所有HTML标签都转换成对象，用js代码形式操纵HTML标签文档。 document对象：整个文档对象 element对象：标签对象 属性对象 文本对象1、方法getElementsByTagName()：获取当前节点的指定标签名孩子节点appendChild(Node) ：给标签对象添加子节点。oNode是要添加的子节点。removeChild(Node)：删除子节点。oNo
2021-04-12 18:47:28
562
原创 JavaScript运算符
递增递减操作符递增操作符var a = 3;var b = 3;a = a + 1; //4b++; //4经过上面的对比我们发现a=a+1与a++所得到的结果就是一模一样的递增操作符每次都是对自己加1，递增操作符的符号可以放在变量的前面，也可以放在变量的后面，如下所示var a = 3;var b = 3;a++;++b;console.log(a);console.log(b);上面的代码运算以后，我们发现，两个变量a与b最后的结果都是4。将上面的代码进行一个改动
2021-03-29 12:48:13
34
原创 径向渐变与线性渐变
渐变CSS3里面的渐变指的是背景色的渐变，今天我介绍的是两种渐变方式，分别是线性渐变和径向渐变?注意：渐变虽然是一个背景色，但是它不能够设置在background-color这个属性上面，要设置在background-image这个属性上面（CSS3里面它把背景色当成一个背景图片来处理）线性渐变线性渐变可以理解为匀速渐变基本线性渐变背景颜色沿着某一个方向或某一个角度发生渐变我们叫基本线性渐变语法格式如下div{ /* 标准写法 */ background-image: lin
2021-03-28 22:00:17
823
原创 利用css样式表做一个旋转写轮眼
利用css样式表做一个旋转写轮眼成品效果图首先分析效果图图中有红色背景圈和里面的三个椭圆和最中心的黑圈组成。因此，我们应该写一个大的div盒子，来装这三个椭圆div，里面的三个椭圆div和圆的画法类似。可以用以下代码实现： width: 200px; height: 200px; border-radius:100% 0% 100% 0%; border: black 2px solid; 注意：这里除了两个斜着
2021-03-18 19:34:37
4236
2
原创 轻松理解position内的三种定位方法
标题定位在CSS里面造成元素脱流我们有两种方式，第一种是浮动float,而剩下的一种则是我们的position定位定位可以看成是脱流里面的特殊盒子模型，它解决了之前标准盒子模型里面的一些问题position的本意是在元素脱流以后再去调整元素的位置今天我们学习CSS里面的三种定位方式，分别是相对定位绝对定位固定定位相对定位相对定位是元素相对于自己原来的位置再进行定位，它使用的属性值是relative，它通过left/right/top/bottom调整了自己的位置以后，仍然占用原来的位置p
2021-03-14 22:28:04
620
原创 带你三分钟理解盒子模型
盒子模型盒子模型是一整套布局规范，它可以帮助我们更深入的去了解页面中元素的结构，可以很清淅的展示HTML元素与CSS结合以后的特点网页当中的每一个元素我们都可以把它看成是一个盒子， 通过这些盒子我们可以拼出我们想要的所有布局形式。所以对于盒子模型的学习其实就是对网页布局规范的学习如果想查看元素的盒子模型 ，我们可以在页面上面打开调试工具栏（不同的浏览器打开方式不一样，chrome浏览器可以通过按键盘F12或Ctrl+Shift+I去打开），打开工具栏以后，我们看到如下的图通过上面的图片，我们可以看
2021-03-11 18:20:38
149
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人