前端学习
关注
分享
扫一扫
文章平均质量分 64
在前端学习中的一些基础的东西，用作复习，记录和分享
小鱼干儿er
热爱前端的程序媛一枚~
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JSON 和 JS 对象的区别
JSON 和 JS 对象的区别前言JSONJS 对象JSON 与 JS 对象的转换应用场景前言以前总弄混 JSON 和 JS 对象，以为差不多是一个东西，但事实上是不一样的。JSONJSON 是序列化的对象或数组，它是 JS 对象的字符串表示方法，也就是说，JSON本质上是一个字符串。JSON以键值对 (key, value) 的形式存在，其中：JSON的 key 必须用 "" (双引号)包起来JSON的 value 不可以为 function/undifined/NaN数据结尾不允许出现无原创 2021-08-04 13:36:00 · 2200 阅读 · 0 评论 -
前端基础（三十七、ES6 rest）
三十七、ES6 restargumentsrest的作用rest的使用注意argumentsarguments 是一个对应于传递给函数的参数的类数组对象。在前面的文章中我们介绍过类数组：类似数组但并非数组。举个栗子： function fn(a,b,c){ console.log(arguments[0]); // 输出: 1 console.log(arguments[1]); // 输出: 2 console.原创 2021-04-25 13:09:04 · 427 阅读 · 0 评论 -
前端基础（三十六、ES6 扩展运算符）
三十六、ES6 扩展运算符前言扩展运算符的作用1. 合并数组2. 数组复制3. 把类数组转为数组前言在前面的文章中我们已经使用过扩展运算符：... ，接下来文章将详细介绍扩展运算符的使用。扩展运算符的作用合并数组数组复制把类数组转为数组1. 合并数组 // 1.合并数组 let arr1 = [1,2,3]; let arr2 = [4,5,6]; console.log(...arr1,...arr2);// 输出： 1 2原创 2021-04-17 12:53:03 · 812 阅读 · 0 评论 -
前端基础（三十五、ES6 解构赋值）
三十四、ES6 解构赋值前言解构赋值对数组的解构对对象的解构前言解构赋值是对赋值运算符的扩展，针对数组或对象进行赋值匹配，方便了对复杂数据字段的获取，且简洁易读，使语义清晰明了。解构赋值对数组的解构基本情况 let [a, b, c] = [1, 2, 3]; console.log(a,b,c); // 1 2 3 let arr = [1,2,3]; let [a,b,c,d = 10] = arr; co原创 2021-03-24 10:46:31 · 202 阅读 · 1 评论 -
前端基础（三十四、ES6 let与const）
三十四、ES6 let与const前言let与constletconst临（暂）时性死区前言接下来的文章中我们将学习ES6：ECMAScript 6.0（ ES6）是 JavaScript 语言的下一代标准。 ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。ECMAScript 和 JavaScript 的关系是，前者是后者的原创 2021-03-22 23:04:09 · 204 阅读 · 0 评论 -
前端基础（三十三、HTML5 web存储）
三十三、HTML5 web存储前言localStoragesessionStorage前言在使用HTML5提供的web存储前，我们都是通过cookie来完成，但是cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度慢且效率低。而在HTML5中，数据不是由每个服务器请求传递的，而是在只有使用时传递。这一特性使在不影响网站性能的条件下存储大量数据成为可能。HTML5 提供了两种在客户端存储数据的新方法：localStorage- 没有时间限制的数据存储原创 2021-03-21 22:13:35 · 143 阅读 · 0 评论 -
前端基础（三十二、cookie例子）
三十二、cookie例子前言cookie实例前言前面我们已经了解了cookie的创建、读取、修改和删除，接下来让我们试试cookie的实例吧！cookie实例<body> <script> // 设置cookie function setCookie(key, value, expires) { var timer = new Date(); timer.setDate(timer.get原创 2021-03-20 11:22:51 · 346 阅读 · 0 评论 -
前端基础（三十一、cookie介绍）
三十一、cookie1前言cookie的创建、读取、修改和删除创建cookie读取cookie修改cookie删除cookie前言cookie用于存储web页面的用户信息。当web服务器向浏览器发送web页面时，当连接关闭后，服务器不会记录用户的信息，而cookie的就是用来解决如何记录用户信息的：当用户访问web页面时，名字可以被记录在cookie中下一次访问该页面时，可以读取用户使用记录cookie以键值对的形式存储。cookie的创建、读取、修改和删除我们可以在JavaScript中原创 2021-03-03 17:31:22 · 419 阅读 · 1 评论 -
前端基础（三十、HTML5 视频 音频）
三十、HTML5 视频 音频前言视频音频前言HTML5提供了支持音视频播放的标签视频<video></video>在video标签中，控制视频的宽度用 width="500" 而不用style的内联样式在video标签中，controls = "controls" 代表出现视频下方的进度条、播放暂停、音量调节等功能我们通过DOM控制video常用的属性有paused：返回视频是否处于暂停状态ended：返回视频播放是否结束volumn：设置或返回视频音量(最原创 2021-02-28 16:18:58 · 358 阅读 · 0 评论 -
前端基础（二十九、HTML5 canvas画布）
二十九、HTML5 canvas画布前言canvas画布canvas常用的属性canvas常用的方法例子1. 画一条从坐标(0,0)到(100,100)的渐变"2"2.制作一个画板前言HTML5中新增了 <canvas> 标签， <canvas> 标签用于在网页上绘制图形。画布是一个矩形的区域，它拥有多种绘制路径、圆形、字符以及添加图像的方法。canvas画布canvas常用的属性fillStyle：设置或返回用于填充绘画的颜色、渐变或模式strokeStyle ：设置原创 2021-02-27 18:26:13 · 2209 阅读 · 0 评论 -
前端基础（二十八、HTML5 form表单）
二十八、HTML5 form表单前言form表单前言HTML5 是 HTML 的下一个版本，其中新增了许多新特性、新元素等。form表单在我的 前端基础（一.HTML）这篇文章中已经介绍过form表单，但在 HTML5 中又新增了一些新特性，常用的如新增的 <input> 类型：date：可以选取日期，会弹出日历emali：在提交表单时会验证 email 域的值url：在提交表单时会验证 url 域的值number：可以通过上下键调节数字大小，还可以设置最大值与最小值，且只允许原创 2021-02-24 10:25:02 · 190 阅读 · 0 评论 -
前端基础 (二十七、JS事件委托)
二十七、JS事件委托前言事件委托前言前面的文章我们了解了事件冒泡和事件捕获，事件冒泡有利有弊，利用事件冒泡我们可以实现事件委托。事件委托事件委托的优点是：可以节省内存，减少事件的绑定动态绑定事件，如新增子对象时不需要再次绑定事件例子：实现一个列表和一个按钮，每点击一个按钮列表内容加一，点击列表每一项的时候，在控制台输出目标节点、目标对象的内容、事件源。目标节点：谁触发的事件event.target 可以返回触发该事件的目标节点事件源：发生事件的对象，相当于 thiseve原创 2021-02-23 16:23:09 · 126 阅读 · 0 评论 -
前端基础（二十六、JS事件机制）
二十六、JS事件机制事件冒泡事件捕获阻止事件冒泡同时触发事件冒泡和事件委托事件冒泡addEventListener("事件",function(){})：用于监听事件<body> <div id="div1" style="width: 300px; height: 300px; background-color: cornflowerblue; text-align: center;">div1 <div id="div2" style="wid原创 2021-02-22 11:08:04 · 190 阅读 · 0 评论 -
前端基础(二十五、DOM节点操作)
二十五、DOM节点操作前言创建节点插入节点删除节点复制节点前言了解到如何取到父母、兄弟、孩子节点后，我们还可以对DOM节点进行一些操作：创建节点document.createElement("标签名") var creatDom = document.createElement("div"); console.log(creatDom);如图，利用 document.createElement("") ，可以创建已存在的标签，如 <div> 标签，也原创 2021-02-21 19:40:37 · 469 阅读 · 0 评论 -
前端基础（二十四、DOM节点）
二十四、DOM节点前言节点前言根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：图片源自w3school如图节点树，节点之间拥有层级关系，父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系，除了根以外所有节点都有父节点。图片原创 2021-02-20 16:03:41 · 281 阅读 · 0 评论 -
前端基础（二十三、DOM获取-2）
二十三、DOM获取-2获取DOM获取DOM前面有介绍过DOM的获取方法，是通过 document.getElementById() 等方法获取，除此之外，我们还可以通过 document.querySelector()的方法获取document.querySelector()：仅获取能获取到的第一个元素<body> <div id="div1">获取DOM2</div> <script> var oDiv = doc原创 2021-02-19 20:07:08 · 125 阅读 · 0 评论 -
Node.js基础知识整理
Node.js基础知识整理前言1.node能做什么2.安装node3.初识node4.用node发送一个http请求5.buffer fs streambufferfsstream前言最近学习了node.js,一些关于node的基础知识学习的有些凌乱，为了加深记忆，我打算再整理一下，会不断在这一篇文章中更新。PS：本人还是小萌新！有写的不对的地方望多多指教！附上node的中文官方文档：戳我！可以通过 QQ：2635591841 &nb原创 2021-02-18 17:24:54 · 478 阅读 · 0 评论 -
前端基础（二十二、获取DOM索引、控制DOM类名）
二十二、获取DOM索引、控制DOM类名获取DOM索引控制DOM类名获取DOM索引获取DOM索引主要通过属性 index ： <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul&原创 2021-02-18 16:15:23 · 466 阅读 · 0 评论 -
前端基础（二十一、DOM 绑定事件）
二十一、DOM 绑定事件对鼠标操作对键盘操作其他我们可以为DOM元素绑定一些事件，当事件发生时，执行对应的代码，常用事件如下：对鼠标操作onclick事件：鼠标左键点击完成时触发oncontextmenu事件：鼠标右键点击时触发event.preventDefault()：用来阻止默认行为，如阻止右键点击浏览器出现浏览器默认的菜单 <div id="div1"> 测试鼠标点击事件 </div> <script>原创 2021-02-17 19:42:13 · 328 阅读 · 0 评论 -
前端基础（二十、控制DOM属性、定时函数)
二十、控制DOM属性、定时函数控制DOM属性定时函数控制DOM属性我们通常使用 .setAttribute(" "," "); 修改DOM的属性，如：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty原创 2021-02-16 11:01:53 · 265 阅读 · 0 评论 -
前端基础（十九、DOM 获取、修改DOM）
十九、DOM获取、修改DOMDOM（文档对象模型）前言获取DOM修改DOM修改DOM内容修改DOM样式DOM（文档对象模型）前言DOM是文档对象模型的缩写。通过DOM，JS能访问和改变HTML中的所有元素，DOM模型被结构化为对象树:图片源自w3school通过这个对象模型，我们可以在JS中对HTML元素和属性进行增加、修改和删除，对CSS样式进行修改，还可以增加HTML事件，并作出反应等。获取DOM获取DOM元素常用的方法如下：document.getElementById("xx原创 2021-02-15 12:44:21 · 433 阅读 · 0 评论 -
前端基础（十八、BOM）
十八、JS BOMBOMWindowBOMBOM是浏览器对象模型的缩写，它允许JS与浏览器对话。BOM提供了一些访问窗口对象的一些方法，它还提供了一个访问HTML页面的一入口——document对象，通过document对象我们可以操纵DOM元素完成更多更强大的功能。Window所有的浏览器都支持Window对象。Window对象是BOM的顶层对象，其他所有都是由Window延伸出来的，全局变量是 window 对象的属性，全局函数是 window 对象的方法， DOM 的document 对象也是原创 2021-02-13 18:51:51 · 599 阅读 · 0 评论 -
前端基础（十七、JS 内置方法 - 数组、日期）
十六、JS 内置方法 - 数组、日期内置方法数组日期祝大家新年快乐鸭~ ????内置方法JS中有许多内置的方法可以直接使用，文章将分类展开一些常用的JS内置方法。数组toString()：把数组转换为以逗号分隔的字符串join()：把数组转换为字符串和 toString() 功能相同，不同之处是，括号内允许添加字符，形成的字符串以该字符连接pop()：从数组中删除最后一个元素该方法返回被删除的元素push()：在数组结尾处添加一个新的元素该方法返回新数组的长度sp原创 2021-02-12 20:08:09 · 259 阅读 · 0 评论 -
前端基础（十六、JS 内置方法 - 数字、字符串）
十五、JS 内置方法 - 数字、字符串内置方法数字随机数字符串祝大家新年快乐鸭~ ????内置方法JS中有许多内置的方法可以直接使用，文章将分类展开一些常用的JS内置方法。数字parseInt()：将字符串转为整型(当然，不是字符串，正常的数字也可以)括号内允许空格，返回字符串的第一个数值，如第一个不是数值则返回NaNparseFloat()：将字符串转为浮点型(同上)会忽略小数点后最后位无意义不影响数值的 0Math.ceil()：将小数向上取整Math.floor()：将小数向下取原创 2021-02-11 17:54:03 · 275 阅读 · 1 评论 -
前端基础（十五、JS 进制 内置方法）
十四、JS 进制 内置方法进制内置方法数字随机数字符串进制JS 会把前缀为 :0x 开头表示十六进制0开头 或者 00 开头表示八进制数字0b 开头表示二进制其他表示十进制 var a = 0x20;//十六进制 console.log(a);//输出十进制 console.log(a.toString(2));//输出二进制 console.log(a.toString(8));//输出八进制 console.原创 2021-02-10 16:19:07 · 340 阅读 · 0 评论 -
前端基础（十四、JS 循环）
十四、JS 循环for循环while 循环do whileJS中常见的循环有三种，分别是 for 循环、while 循环和 do while，它们与其他语言中的循环没有什么大的不同。for循环for循环对字符串和数组操作： var arr = [1,2,3,4,5]; for(var i = 0; i < arr.length; i++){ console.log(arr[i]); } //输出 1原创 2021-02-09 14:14:45 · 278 阅读 · 0 评论 -
前端基础（十三、JS分支判断）
十三、JS分支判断JS分支判断if语句JS中真假判断else if 和 else== 和 ===&& 和 ||! 取非switch语句三元运算符JS分支判断JS中的条件判断语句与其他语言类似，主要有if语句和switch语句。if语句JS中真假判断为假的情况有：false当为数字0时当为空字符串时undefinednull为真的情况有：true当为除数字0之外的数字时当为除空字符串的其他字符串时其他为假的情况之外时 var a =原创 2021-02-08 13:52:25 · 484 阅读 · 0 评论 -
前端基础（十二、JS 引用数据类型）
十二、JS引用数据类型前言基本数据类型和引用数据类型的主要区别前言JS分为两种数据类型：基本数据类型基本数据类型在上一篇文章中已经介绍，其包括：NumberStringBooleanNullUndefinedSymbol(ES6中的语法，后续文章中会介绍)引用数据类型引用数据类型即Object，在JS中，所有除了基本数据类型外的数据类型都属于Object，例如数组、函数方法、对象等。基本数据类型和引用数据类型的主要区别声明变量时分配的内存不同基本数据类型声明变量时分原创 2021-02-07 13:31:12 · 641 阅读 · 0 评论 -
前端基础（十一、JS 输出、变量、基本数据类型）
十一、JS 输出、变量、基本数据类型JS输出JS变量JS 标识符JS 声明变量基本数据类型typeofJS的基本数据类型JS输出JS支持以下五种输出：使用 console.log() 在浏览器控制台输出敲击F12调出控制台使用 window.alert() 弹出警告框使用 document.write() 写入 HTML 输出在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTMLdocument.write() 方法仅用于测试使用 i原创 2021-02-06 13:07:31 · 2138 阅读 · 1 评论 -
前端基础（十、JS）
十、JS前言JS的使用script标签内部编写外部脚本外部引用helloworld基本数据类型前言JavaScript 是一门属于 HTML 和 Web 的编程语言，为学习web开发的必学三种语言之一，其中HTML 定义网页的内容，CSS 规定网页的布局，JavaScript 对网页行为进行编程。也就是说，要完成更高级更复杂的功能，必须要学习JS这门语言。JS的使用script标签在 HTML 中，JavaScript 代码必须位于 <script> 与 </script>原创 2021-02-05 11:17:05 · 129 阅读 · 0 评论 -
前端基础（九.CSS3 动画）
九、CSS3 动画前言@keyframes前言在CSS3中，新增了动画模块，这可以代替动画图片、Flash 动画以及 JavaScript。@keyframes规定动画，写的时候像一个函数一样：@keyframes foo{}其中可以用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%其中常用的动画属性如下：animation：所有动画属性的简写属性 为复合属性（除了 animation-play-state 属性）animation: na原创 2021-02-04 11:04:16 · 112 阅读 · 0 评论 -
前端基础（八.CSS3 2D 3D）
八.CSS3 2D 3D前言CSS 2D转换CSS 3D转换前言转换是使元素改变形状、尺寸和位置的一种效果。在CSS3中新增了2D和3D的转换方法。CSS 2D转换其中转换所需的新属性如下：transform：设置元素为 2D 或 3D 转换transform-origin：改变被转换元素的源点位置其中2D转换常用的方法如下：matrix(n,n,n,n,n,n)：2D 转换中，使用六个值的矩阵（复合属性）matrix( scaleX(), skewY(), skewX(), sca原创 2021-02-02 11:09:45 · 281 阅读 · 0 评论 -
前端基础（七.CSS3 文本、过渡）
七.CSS3 文本前言CSS3文本CSS3过渡前言CSS3是最新的CSS标准，里面增添了许多新特性，本文将介绍CSS3的文本新特性。CSS3文本CSS3的文本效果在从前的基础上，增加了一些新的属性，以下为一些新增的常用属性：text-shadow：向文本添加阴影text-shadow: h-shadow v-shadow blur color水平阴影 垂直阴影 模糊距离 阴影颜色word-wrap：允许对长的不可分割的单词进行分割并换行到下一行word-wrap:break-wor原创 2021-02-01 11:20:09 · 289 阅读 · 0 评论 -
前端基础（六.CSS3 边框、背景）
六.CSS3前言CSS3边框前言CSS3是最新的CSS标准，里面增添了许多如下新特性。CSS3边框CSS3的边框在从前的基础上，增加了：border-radius：设置圆角边框box-shadow：设置边框阴影box-shadow: h-shadow v-shadow blur spread color inset;水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内部阴影(外部阴影outset)border-image：使用图片创建边框(Internet Explorer 11, Fi原创 2021-01-31 13:16:58 · 363 阅读 · 2 评论 -
前端基础（五.CSS 定位）
五.CSS 定位CSS定位通过position定位通过浮动(float)定位CSS盒模型CSS定位CSS两种基本的用来定位的方式：通过position定位position有如下属性：static 静态定位：position的默认值，相当于没有定位，会忽略 top, bottom, left, right 或者 z-index 的声明。relative 相对定位：元素相对于本身进行位移。如此时left：20px；则会在元素左侧添加20像素，元素本身形状不变。absolute 绝对定位：元原创 2021-01-30 15:06:58 · 214 阅读 · 2 评论 -
前端基础（四.CSS 盒模型）
三.CSS 定位CSS定位通过position定位通过浮动(float)定位CSS盒模型CSS定位CSS两种基本的用来定位的方式：通过position定位position有如下属性：static 静态定位：position的默认值，相当于没有定位，会忽略 top, bottom, left, right 或者 z-index 的声明。relative 相对定位：元素相对于本身进行位移。如此时left：20px；则会在元素左侧添加20像素，元素本身形状不变。absolute 绝对定位：元原创 2021-01-29 17:46:53 · 318 阅读 · 0 评论 -
前端基础（三.CSS 基本样式）
二.CSS 下CSS属性背景字体文本边框CSS边距CSS定位CSS盒模型CSS属性背景css的背景样式(background)拥有复合属性，即可以把多个属性写在background:后，以space分隔不同属性。*注：[复合属性中的子属性会覆盖父属性，如background-color：red；会覆盖background：blue；结果显示为红色。]background常见属性：background-color 背景颜色background-position 背景图像位置backgrou原创 2021-01-28 17:13:11 · 213 阅读 · 0 评论 -
前端基础（二.CSS 引入方式、CSS选择器）
二.CSS 上CSS引入方式内联样式外部样式CSS选择器标签选择器id选择器(class)类选择器后代选择器子代选择器伪类选择器(群组)分组选择器CSS引入方式内联样式使用内联样式时，将样式写在<style></style>中，<style></style>放在.html文件的<head></head>中。<style> div{ width: 200px;原创 2021-01-27 13:47:16 · 226 阅读 · 2 评论 -
前端基础（一.HTML）
一.HTML1.HTML标签的语义化：2.基本HTML标签：3.HTML标签的分类4.表单元素1.HTML标签的语义化：1.开发人员维护方便2.有利于搜索引擎优化3.标签自带样式 css加载不出来2.基本HTML标签：1.<h1></h1> — <h6></h6>2.<p></p>3.<a></a><a href="http://www.baidu.com" target="_blan原创 2021-01-26 17:28:21 · 295 阅读 · 5 评论