- 博客(155)
- 收藏
- 关注
RSS订阅原创 JavaScript学习记录八：运算符（二）：递增和递减运算符
这里写目录标题一、递增和递减运算符解释二、 前置递增运算符三、后置递增运算符四、总结一、递增和递减运算符解释如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ – ）运算符来完成。 在 JavaScript 中，递增（++）和递减（ – ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。注意：递增和递减运算符必须和变量配合使用。二、 前置递增运算符++num 前置递增，就是自加1，类似于
2021-11-10 11:46:58
351
原创 JavaScript学习记录四：基本数据类型(一)：数字类型
@TOC一、什么是数字类型二、数字型范围最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308最小值：Number.MIN_VALUE，这个值为：5e-32三、数字型三个特殊值Infinity ，代表无穷大，大于任何数值Infinity ，代表无穷小，小于任何数值NaN ，Not a number，代表一个非数值四、判断一个变量是否为非数字的类型var usrAge = 21;var isOk = isNaN(userAge);c
2021-11-10 11:46:54
188
原创 JavaScript学习记录十：continue ，break，return关键字的作用
JavaScript学习记录十：continue ，break，return关键字的作用一、continue二、 break 关键字三、return关键字一、continuecontinue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下：for (var i = 1; i <= 5; i++) {if (i == 3) {console.log(
2021-11-10 11:46:38
354
原创 JavaScript学习记录十四：预解析(变量提升的发生)
JavaScript学习记录十四：预解析一、什么是解析二、变量预解析（即变量提示）三、函数预解析（函数提升）四、解决函数表达式声明调用问题五、预解析案例一、什么是解析JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。代码执行： 从上到下执行
2021-11-10 11:46:33
90
原创 JavaScript学习记录十三：作用域
JavaScript学习记录十三：作用域一、什么是作用域二、全局作用域三、局部作用域 （函数作用域）四、块级作用域(JS没有)五、变量作用域六、全局变量七、局部变量八、 全局变量和局部变量的区别九、作用域链一、什么是作用域通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。JavaScript（es6前）中的作用域有两种：全局作用域局部作用域（函数作用域）二、全
2021-11-10 11:46:28
62
原创 JavaScript学习记录十六：内置对象(二)：日期对象
JavaScript学习记录十五：内置对象（二）：日期对象一、Date 对象解释二、Date 对象使用1. 获取当前时间必须实例化2. Date() 构造函数的参数三、Date对象常用方法1.获取当前时间2.获取日期的总的毫秒形式四、案例1.倒计时一、Date 对象解释Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用Date 实例用来处理日期和时间二、Date 对象使用1. 获取当前时间必须实例化 var now = new Date();consol
2021-11-10 11:45:55
88
原创 JavaScript学习记录四：基本数据类型(二)：字符串类型
@TOC一、字符串型 String写法字符串型可以是引号中的任意文本，其语法为 双引号 “” 和 单引号’’var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串// 常见错误var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法二、字符串引号嵌套JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)var strMsg
2021-11-10 11:45:46
164
原创 JavaScript学习记录十六：内置对象(一)：Math对象
这里写目录标题一、Math 对象解释二、Math 对象常用方法1. 随机数方法 random()一、Math 对象解释Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。二、Math 对象常用方法Math.PI // 圆周率Math.floor() // 向下取整Math.ceil() // 向上取整Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3 Math.abs() /
2021-11-10 11:45:40
75
原创 vue学习记录十五：数据响应式原理（一）(Object.defineProperty)
vue学习记录十五:数据响应式原理一、数据响应式原理二、Object.defineProperty代码解释1.简单原理2.存在的问题一、数据响应式原理在Javascript里实现数据响应式一般有俩种方案，分别对应着vue2.x 和 vue3.x使用的方式，他们分别是：对象属性拦截 (vue2.x)Object.defineProperty对象整体代理 (vue3.x)Proxy其中对象属性拦截，不管使用其中的哪种方式，道理都是相通的。二、Object.definePropert
2021-11-05 11:09:47
666
1
原创 JavaScript学习记录九：流程控制（二）： 三元表达式
JavaScript学习记录九：流程控制（二）： 三元表达式一、三元表达式解释二、例子一、三元表达式解释三元表达式也能做一些简单的条件选择。 有三元运算符组成的式子称为三元表达式。表达式1 ? 表达式2 : 表达式3;如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值简单理解： 就类似于 if else （双分支） 的简写二、例子var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');// 三元表达式 表达式 ？
2021-11-05 08:48:53
89
原创 JavaScript学习记录九：流程控制（一）： if 语句
JavaScript学习记录九：流程控制（一）： if 语句一、流程控制解释二、顺序结构三、if 语句结构四、if else语句（双分支语句）五、 if else if 语句(多分支语句)一、流程控制解释在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。简单理解： 流程控制就是来控制我们的代码按照什么结构顺序来执行流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。二、顺序结
2021-11-05 08:48:44
70
原创 JavaScript学习记录八：运算符（一）：算数运算符
JavaScript学习记录八：运算符一、运算符解释二、算术运算符解释2.1浮点数的精度问题一、运算符解释运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有：算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符二、算术运算符解释算术运算使用的符号，用于执行两个变量或值的算术运算。运算符描述例子+加10+20=30-减10-20=-10*乘10*20=200
2021-11-05 08:48:29
57
原创 JavaScript学习记录六：数据类型的转换
这里写目录标题一、什么是数据类型转换二、其他类型转换成字符串类型三、其他类型转数字类型四、其他类型转布尔类型一、什么是数据类型转换使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。我们通常会实现3种方式的转换：转换为字符串类型转换为数字型转换为布尔型二、其他类型转换成字符串类型方式说明例子toString()转成字符串var num=1
2021-11-05 08:48:20
85
原创 JavaScript学习记录五：数据类型的检测
JavaScript学习记录五：数据类型的检测一、检测数据类型二、不同数据类型的返回值一、检测数据类型typeof 可用来获取检测变量的数据类型var num = 18;console.log(typeof num) // 结果 number二、不同数据类型的返回值类型例子结果Stringtypeof"小白"“string”Numbertypeof 18“number”Booleantypeof true“boolean”Undefined
2021-11-05 08:48:15
53
原创 JavaScript学习记录四：基本数据类型(四)：null和undefined
@TOC一、什么null一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)var vari = null;console.log('你好' + vari); // 你好nullconsole.log(11 + vari); // 11console.log(true + vari); // 1二、什么是undefined一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）var vari = null;con
2021-11-05 08:48:02
52
原创 JavaScript学习记录四：基本数据类型(三)：布尔类型
@TOC一、什么是布尔类型布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。二、布尔类型计算布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。console.log(true + 1); // 2console.log(false + 1); // 1...
2021-11-05 08:47:55
306
原创 css学习记录十五：背景线性渐变(CSS3新特性)
css学习记录十五：背景线性渐变(CSS3新特性一、写法一、写法background: linear-gradient(起始方向, 颜色1, 颜色2, ...);background: -webkit-linear-gradient(left, red , blue);background: -webkit-linear-gradient(left top, red , blue);背景渐变必须添加浏览器私有前缀起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top。...
2021-11-05 08:47:31
92
原创 css学习记录十二:盒模型固定大小(CSS3新特性)
css学习记录十二:盒模型固定大小(CSS3新特性一、盒子模型一、盒子模型CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）box-sizing: border-box 盒子大小为 width如果盒子模型我们改为了box-sizing: b
2021-11-04 11:38:00
941
原创 css学习记录十一:文字阴影(CSS3新特性)
在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。text-shadow: h-shadow v-shadow blur color;值描述h-shadow必需,水平阴影的位置,允许负值v-shadow必需,垂直阴影的位置,允许负值blur可选,模糊的距离color可选,阴影的颜色...
2021-11-04 11:37:52
60
原创 css学习记录十九：浏览器私有前缀写法
css学习记录十九：浏览器私有前缀写法一、浏览器私有前缀的作用二、写法一、浏览器私有前缀的作用浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。二、写法/*moz-：代表 firefox 浏览器私有属性-ms-：代表 ie 浏览器私有属性-webkit-：代表 safari、chrome 私有属性-o-：代表 Opera 私有属性*/-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-rad
2021-11-04 11:37:34
116
原创 css学习记录二十：边框圆角
这里写目录标题在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。border-radius:length; 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50% 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角 分开写：border-top-left-radius、border-top-right-radius、bor
2021-11-04 11:37:26
63
原创 css学习记录十八：3D转换
css学习记录十八：3D转换一、什么是3D转换二、三维坐标系三、3D移动四、透视perpective五、3D旋转六、3d呈现 transfrom-style七、案例1.翻转盒子一、什么是3D转换我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。在现实生活当中，当我们通过肉眼去看物体的时候和照片的成像是相同的。如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。二、三维坐标系x轴：水平向右 注
2021-11-04 11:37:15
68
原创 css学习记录十四：过度(CSS3新特性)
css学习记录十四：过度(CSS3新特性一、什么是过渡二、过渡的好处三、写法一、什么是过渡过渡动画： 是从一个状态 渐渐的过渡到另外一个状态二、过渡的好处可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。我们现在经常和 :hover 一起 搭配使用。三、写法transition: 要过渡的属性 花费时间 运动曲线 何时开始1.属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一
2021-11-04 11:36:40
40
原创 css学习记录十三:css函数（一）：calc()计算函数
这里写目录标题一、calc()的作用二、写法一、calc()的作用计算盒子的宽高二、写法div{ height:calc(100px - 20rem)}需要注意的是运算符的两边一定要有空格
2021-11-04 11:36:35
67
原创 css学习记录十三:css函数（二）：filter()滤镜函数
css学习记录十三:css函数（二）：filter滤镜函数一、filter()的作用二、写法一、filter()的作用filter CSS属性将模糊或颜色偏移等图形效果应用于元素二、写法filter: blur(5px); /*blur模糊处理 数值越大越模糊*/...
2021-11-04 11:36:27
141
原创 css学习记录十:盒子阴影(CSS3新特性)
CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。box-shadow: h-shadow v-shadow blur spread color inset;值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。spread可选。阴影的尺寸。Color可选。阴影的颜色。inset必需。垂直阴影的位置。允许负值。注意：默认的是外
2021-10-29 11:27:15
71
原创 HTML学习记录二:html标签（四）：表单控件
HTML学习记录二:html标签（四）：表单控件一、控件的作用二、input控件三、下拉列表控件四、多行文本框控件五、控件的一些操作1.input控件边框去除：2.input控件轮廓线去掉3.点击标签，使控件获取焦点4.表单元素想刚打开页面就默认显示几个文字5. 如果页面一打开就让某个单选按钮或者复选框是选中状态一、控件的作用一般是用来收集用户输入的信息。二、input控件<input type="这里的值来确定这个控件是什么"/>type的值作用text表示
2021-10-29 11:26:41
468
原创 css学习记录二：CSS选择器（二）：复合选择器
css学习记录二：CSS选择器（二）：复合选择器一、什么是复合选择器二、复合选择器分类一 、后代选择器二、子选择器三、并集选择器四、交集选择器五、伪类选择器1.链接伪类选择器2.:focus 伪类选择器六、属性选择器一、什么是复合选择器在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素（标签） 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的常用的复合选择
2021-10-29 11:26:28
332
原创 HTML学习记录四:H5新增标签（三）：video标签
HTML学习记录四:H5新增标签（三）：video标签一、video标签的写法二、video标签的作用三、video标签的属性四、 多媒体标签总结一、video标签的写法<video src="文件地址" controls="controls"></video>兼容多种文件写法 <video controls="controls" width="300"> <source src="move.ogg" type="video/ogg" > <
2021-10-29 11:26:12
497
原创 HTML学习记录四:H5新增标签（二）：audio标签
HTML学习记录四:H5新增标签（二）：aaudio标签一、audio标签的写法二、audio标签的作用三、audio标签的属性一、audio标签的写法<audio src="文件地址" controls="controls"></audio>兼容多种文件写法 < audio controls="controls" > <source src="happy.mp3" type="audio/mpeg" > <source src="happ
2021-10-29 11:26:02
329
原创 HTML学习记录四:H5新增标签（一）：语义化标签
HTML学习记录四:H5新增标签（一）：语义化标签一、新增标签二、语义化标签的作用一、新增标签<header>：头部标签<nav>：导航标签<article>：内容标签<section>：定义文档某个区域<aside>：侧边栏标签<footer>：尾部标签二、语义化标签的作用这种语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次在 IE9 中，需要把这些元素转换为块级元素...
2021-10-29 11:25:49
63
原创 HTML学习记录二:html标签（五）：超链接标签
HTML学习记录二:html标签（五）：超链接标签一、超链接标签二、超链接标签的属性三、超链接的锚点用法四、链接分类：一、超链接标签在 HTML 标签中， 标签用于定义超链接，作用是从一个页面链接到另一个页面。<a href = "跳转的路径url" title ="鼠标移到链接上的时候显示的文字" taget = "打开窗口的方式">超链接</a>二、超链接标签的属性属性值href链接去往的路径，必写属性，没有就是空链，用#填写，最好不要为空
2021-10-29 11:25:38
1201
原创 css学习记录九：元素属性解释（二）： overflow 属性
这里写目录标题一、overflow 属性的作用一、overflow 属性的作用overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。属性值描述visible不剪切内容，也不增加滚动条hidden不显示超过对象尺寸内容，超出的部分隐藏掉scroll不管超出内容否，总是显示滚动条auto超出自动显示滚动条，不超出不显示滚动条一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。但是如果有定位的盒子
2021-10-29 09:11:06
198
原创 css学习记录九：元素属性解释（五）：cursor属性：改变鼠标样式
css学习记录九：元素属性解释（四）：cursor属性：改变鼠标样式一、cursor属性一、cursor属性设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。值描述图片default默认值，箭头pointer小手move十字箭头text文本输入not-allowed禁止，可以组织点击事件...
2021-10-29 09:11:00
112
原创 css学习记录九：元素属性解释（四）：vertical-align属性
css学习记录九：元素属性解释（三）：vertical-align属性一、vertical-align属性的作用二、 图片、表单和文字对齐三、解决图片底部默认空白缝隙问题一、vertical-align属性的作用CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。vertical-align : baseline | top | middle | bott
2021-10-29 09:10:52
1006
原创 css技术点八：css 初始化
css技术点八：页面初始化一、对CSS 初始化一、对CSS 初始化不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）每个网页都必须首先进行 CSS初始化。Unicode编码字体：把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。比如：黑体 \9ED1\4F53宋体 \5B8B\4
2021-10-28 08:57:21
145
原创 css技术点一：精灵图
css技术点一：精灵图一、什么是精灵图二、使用精灵图的好处三、用法四、总结一、什么是精灵图核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了二、使用精灵图的好处一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称CSS Sprites、CSS 雪碧）三、用法
2021-10-28 08:56:51
87
原创 css技术点二：字体图标（阿里巴巴字体图标使用）
css技术点二：字体图标（阿里巴巴字体图标使用）一、什么是字体图标二、字体图标的好处三、字体图标用法四、字体图标格式介绍一、什么是字体图标字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。二、字体图标的好处轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等兼容性：几乎支持所有的浏览器，请放心使用注意： 字体图标不能替代精灵技术，只是对工作中图
2021-10-28 08:56:41
476
原创 css技术点四：表单控件的样式修改
css技术点四：输入框的样式修改一、输入框轮廓线的去除二、防止拖拽文本域 resize一、输入框轮廓线的去除给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。input {outline: none; }二、防止拖拽文本域 resize实际开发中，我们文本域右下角是不可以拖拽的。textarea{ resize: none;}...
2021-10-28 08:56:28
288
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人