- 博客(30)
- 收藏
- 关注
RSS订阅原创 前端学习日志（ES6-11）
let 和 const 命令1、let和constES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。{ let a = 10; var b = 1; } a // ReferenceError:a is not defined. b // 1上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声...
2021-10-28 22:09:55
80
原创 前端学习日志1027
原生AJAX实现发送ajax请求步骤1.创建XMLHttpRequest类型的对象 2.准备发送，打开与一个网址之间的连接3.执行发送动作 4.指定xhr状态变化事件处理函数XMLHttpRequest类型对象AJAX API中核心提供的是一个XMLHttpRequest类型，所有的AJAX操作都需要使用这个类型。open方法开启请求本质上XMLHttpRequest就是JavaScript在web平台中发送HTTP请求的手段，因此发送出去的请求仍然是HTTP请求，同样符合HTTP
2021-10-27 21:11:43
77
原创 前端学习日志1021
Web Worker我们都知道JavaScript这个语言在执行的时候是采用单线程进行执行的，也就是说在同一时间只能做一件事，这也和这门语言有很大的关系，采用同步执行的方式进行运行，如果出现阻塞，那么后面的代码将不会执行，HTML5则提出了web Worker标准，表示JavaScript允许有多个线程，但是子线程完全受主线程的控制，切子线程不能操作DOM，只有主线程可以操作DOM，所以以主线程为主的单线程执行原理成了JavaScript这门语言的核心。2、Web Worker下面我们来说说we
2021-10-21 22:09:37
87
原创 前端学习日志1020
深入SVG由于是矢量图像，SVG 图像可以无限缩放并且不会出现图像质量下降的任何问题。为何如此？因为 SVG 图像是使用XML 标记构建的，浏览器通过绘制每个点和线来打印它们，而不是用预定义的像素填充一些空间。这确保了 SVG 图像可以适应不同的屏幕尺寸和分辨率，即使是尚未发明的屏幕尺寸和分辨率。语法<svg>标签SVG 代码都放在顶层标签<svg>之中。下面是一个例子。<svg width="100%" height="100%"> <c
2021-10-20 22:15:26
180
原创 前端学习日志1019
Canvas画布线条绘制最简单的莫过于直线，canvas提供了lineTo这样的接口：context.beginPath(); // 声明创建新的pathcontext.moveTo(100, 150);context.lineTo(450, 50);context.lineWidth = 3; // 设置直线的宽度，需要先于stroke的调用context.strokeStyle = '#ff0000'; // 设置线条的颜色 ，需要先于stroke的
2021-10-19 22:11:53
75
原创 前端学习日志1018
音视频如何嵌入视频：<video src="video.mp4" width="320" height="200" controls preload></video>如何嵌入音频：<audio src="audio.mp3" controls preload></audio>HTML5 中的新属性：属性 值 描述autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。controls controls 如果出现该属
2021-10-18 22:00:02
96
原创 前端学校日志1015
JSON数据：JSON 的语法是来自 JavaScript 对象符号的语法，但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。什么是 JSON？JSON 指的是 JavaScript Object Notation JSON 是轻量级的数据交换格式JSON 独立于语言 JSON 是“自描述的”且易于理解JSON实例： {"employees":[{"firstName":"Bill", "lastName":"Gates"},{"fir..
2021-10-15 22:08:56
61
原创 前端学习日志1014
防抖(debounce)在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：如果在200ms内没有再次触发滚动事件，那么就执行函数 如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时效果：如果短时间内大量触发同一事件，只会执行一次函数。实现：既然前面都提到了计时，那实现的关键就在于setTimeout这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：function debounce(fn,delay){ l
2021-10-14 22:10:42
78
原创 前端学习日志1013
BOM对象location对象：URLlocation对象的常见方法:navigator对象:navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。history对象:window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。元素偏移量 offset 系列offs...
2021-10-13 22:04:13
152
原创 前端学习日志1012
常用的键盘事件键盘事件对象BOM对象BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。页面（窗口）加载事件：1、window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。2、DOMContentLoaded...
2021-10-12 21:58:06
103
原创 前端学习日志1011
事件详解1、注册事件事件监听：eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。2、删除事件3、DOM事件流4、事件对象：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。事件对象的属性和方法：e.target 和 this 的区别this 是事件绑定的元素（绑定这个事件处理函数的元素） 。..
2021-10-11 22:08:10
65
原创 前端学习日志10-08
1、堆栈（1）栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈。简单数据类型的值类型变量的数据直接存放在变量（栈空间）中（2）堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型的存储方式：引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中2、WEB APIDOM :文档对象模型文档：一个页面就是一个文档，DOM中使用document表示 节点：网页中的所有内.
2021-10-08 22:08:30
83
原创 前端学习日志10-07
内置对象1、Math对象：Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。 属性、方法名 功能 Math.PI 圆周率 Math.floor() 向下取整 Math.ceil() 向上取整 Math.round() 四舍
2021-10-07 22:03:42
54
原创 前端学习日志0929
生成数组的两种方法1、使用Array构造函数： var arr = new Array(10); //创建一个包含10项的数组 2、使用数组字面量表示法：var arr1 = [1，2，3…]数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。获取数组的方法：数组可以通过索引来访问、设置、修改对应的数组元素，可以通过“数组名[索引]”的形式来获取数组中的元素。数组的第一个元素索引值为0，第二个元素索引值为1，依次递增遍历数组：把数组中的每个元素从头到尾都访问一次（类...
2021-09-30 08:06:19
65
原创 前端学习日志0928
1、算数运算符2、递增和递减运算符递增递减运算符1.需要反复给一个变量添加或者减去1，可以使用递增运算符（++），递减运算符（--）来完成2.在JS中递增（++）递减（--）既可以放在变量前面，也可以放在变量后面。 放在变量前面时：可以称为前置递增递减运算符。 放在变量后面时：可以称之为后置递增递减与你算符。 PS：递增和递减运算符必须配合变量使用。3.前置递增运算符 ++num前置递增，即自加1.类似于num =num +1。但 ...
2021-09-28 22:06:19
66
原创 前端学习日志0927
初识JavaScriptJavaScript组成： 1、ECMAScriptECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。DOM——文档对象模型文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以...
2021-09-28 10:15:15
81
原创 前端学习日志0923
1、animation实现逐帧动画实现原里就是给元素一个雪碧图的背景，然后添加的帧动画更改background-position。但是每帧动画之间帧动画都是滑动，不连贯，所以用另一种简便方法，就是利用steps(),就是帧之间的阶跃动画。1.steps(1,start):动画一开始就跳到 100% 直到这一帧（不是整个周期）结束2.steps(1,end):保持 0% 的样式直到这一帧（不是整个周期）结束3.另外也可以直接设置 animation-timing-function:step-sta
2021-09-24 08:43:28
138
原创 前端学习日志0922
CSS动画与过渡效果1.transition这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的：hover，focus，checked，媒体查询或者JavaScript。语法：transition: property（名称） duration（完成过渡效果需要多少时间） timing-function（速度效果的速度曲线） delay（动画延迟时间）;transition有着以下几个不足：1需要事件触发，所以没法在网页加载时自动发生2是一次性的，不能重复发生，除非一.
2021-09-22 22:07:14
53
原创 前端学习日志0918（中秋加班版）
CSS3转换与变形1、2D 转换之 translate2D 转换 2D 转换是改变标签在二维平面上的位置和形状 移动： translate 旋转： rotate 缩放： scale translate 语法x 就是 x 轴上水平移动 y 就是 y 轴上水平移动 transform: translate(x, y) transform: translateX(n) transfrom: translateY(n)重点知识点 2D ...
2021-09-19 09:22:55
54
原创 前端学习日志0917
css高级应用技巧1.元素的显示与隐藏（1）display显示：display: none 隐藏对象——特点： 使用display隐藏之后，不再保留位置。display：block 除了转换为块级元素之外，同时还有显示元素的意思（2）visibilityvisibility：visible ; 对象可视visibility：hidden; 对象隐藏——隐藏之后，继续保留原有位置。（3）overflow 溢出(重点)2.vertical-align 垂直对齐.
2021-09-17 21:56:17
40
原创 前端学习日志0916
弹性布局概念：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。采用 Flex 布局的元素，称为 Flex 容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称"项目"。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效1.弹性容器常见属性（1）flex-direction：设置主轴的方向在 flex 布局中，是分为主轴和侧轴两个.
2021-09-17 09:25:31
47
原创 前端学习日志0915
1.边框圆角---border-radius:length;border-radius: 50%——让一个正方形变成原型2.盒子阴影——box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影。3、css书写规范（1）选择器 与 { 之间必须包含空格。 (2)属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。 (3)并集选择器，每个选择器声明必须独占一行。 (4)一般情况情况下，选择器...
2021-09-16 09:15:25
45
原创 前端学习日志0914
css的三大特性1、层叠性：是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。 2.继承性：子标签会继承父标签的某些样式，如文本颜色和字号。但是父盒子的盒子模型相关的属性无法继承。3.优先级（重点）：定义CSS样式时，经常出现两个或更多规则应用在同一元素上时，选择器相同，则执行层叠性。选择器不同，就会出现优先级的问题。...
2021-09-15 10:44:49
49
原创 前端学习日志0913
1.更多的选择器后代选择器 （子元素和子元素的子元素......）和并集选择器(同时作用在两个元素上面，中间用空格隔开)复合选择器 使用后代选择器给元素添加样式 使用并集选择器给元素添加样式 使用伪类选择器 1、后代选择器（把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子 ）父级 子级{属性:属性值;属性:属性值;}.class h3{color:red;font-size:16px;}2、子代选择器（.nav>p）
2021-09-14 19:43:38
50
原创 前端学习日志0910
认识css1.css的三种引入方式（推荐使用外联式，把结构与样式分离）内嵌式css：<divstyle="width:200px;height:200px;background-color:red;"></div>在标签中添加style属性，里面可以写相关的样式。内联式css：在html表格中添加style标签，利用选择器在标签中设置css样式。外联式：通过link标签引入一个外部css文件。<!DOCTYPE html><h...
2021-09-10 22:02:34
91
原创 0908前端学习日志
先安装Elm emme插件，利用快捷方式，更快速地写代码1.输入任意标签名称，回车，自动填充标签2.快速生成带类名的标签eg：div.mydiv+tab键（或回车）3.div>p*5生成父子级标签，div+p生成兄弟标签，* 号决定子元素个数。两种方法可以搭配使用。3.table标签table标签缺点较多，只做了解。...
2021-09-08 22:02:45
40
原创 0907前端学习日志
1.h1-h6标签和p标签，用于渲染文本内容。2.div和span标签，用于在网页中划分一块区域，可以显示内容。区别：div时块级元素，独占一行；span是行内元素，一行可以显示多个。3.img标签要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。4.链接标签语法格式：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>要点： 外部链接 需要添...
2021-09-07 21:54:49
56
原创 0906前端学习日志
今天是前端课的第一天，周一到周五每晚8点到十点。虽然以前有一点基础，但是还是以初学者的心态重新学习，记录每一天的学习进度以及学习到的内容，希望能有新的收获，毕竟温故而知新嘛！今天第一个知识点就是WEB标准，web标准是所有浏览器正确解析代码，渲染页面最重要的支撑。如果没有统一的标准，不同的浏览器解析方式不同，渲染的页面就有所差别。第二个就是vscode的一些实用插件，可以给我们写代码带来极大的便利。还有就是一个网页的基本结构，包括DOCTYPE文档类型声明（告诉浏览器用什么方式进行解析）和一些必要的
2021-09-07 08:53:35
103
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人