- 博客(34)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 axios请求数据和拦截器
一、 AxiosAxios是什么Axios是一个基于 promise 的 HTTP 库可以用于浏览器和 node.js类似于 Ajax，进行前后端交互使用Axios 特性支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御 XSRF安装和使用两种安装方式：（二选一）npmyarn// 使用npm：$ npm install axios// 或者使用yarn：$ yarn add axios使用方
2020-09-02 01:18:23
871
原创 Vue指令2
v-for指令的四种使用方式：<div id="app"> // 1. 循环数组 // <p v-for="item in list">{{item}}</p> // 也可以用遍历索引值的方式来写 // <p v-for="{item,i} in list">{{item}}</p> //2. 循环对象数组 // <p v-for="user in list">{{us
2020-08-18 23:16:33
131
原创 vue的基础指令
框架和库的区别：框架：是一整套的解决方案，对项目的侵入性比较到，项目如果需要更换框架，则需要重新架构整个项目例如 ： node 中的express库：（插件）：提供某一个小功能，对项目的侵入性比较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。例如：1. jQuery 切换到zepto 2. 从EJS 切换到art-templateVue笔记：1.将来 new 的vue实例，会控制整个元素中的所有内容2.创建一个Vue的实例// 当我们导入包之后，在浏览器的内
2020-08-13 07:23:04
121
原创 ES6数组方法
ES6给数组添加了一些新特性，而这些新特性到目前为止完全可以运用到自己的业务层。在这一节中将总结有关于ES6给数组提供一些新特性的使用方法。ES6提供的两个静态方法：Array.fromArray.ofES6提供操作、填充和过滤数组的方法：Array.prototype.copyWidthinArray.prototype.fillArray.prototype.findArray.prototype.findIndexES6中有关于数组迭代的方法：Array.prototype.ke
2020-08-05 01:21:02
157
原创 ES 6总结
1. let、const 和 block 作用域在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:function a(){ var test //变量提升 if(bool){ test = 'hello world' }else{ consloe.log(test); }}// 这里不用关心bool是否为true 或false 实际上 无论如何test都会被创
2020-08-05 01:03:42
494
原创 localstorage，sessionstorage，和cookie三种存储方式的用法和区别
Cookie存储方式Cookie可能是最常见也是用得最多的技术了，也是比较古老的技术了。COOKIE优点很多，使用起来很方便但它的缺点也很多：比如跨域访问问题；无法保存太大的数据（最大仅为4KB）；本地保存的数据会发送给服务器，浪费带宽 等等。原理：由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。Cookie实际上是一小段的
2020-07-28 23:46:46
605
1
原创 实现鼠标悬停时文字的旋转
效果： 要实现鼠标悬停在文本上时，是文字发生旋转。原理：将每个文字或者单词的每个字母在任一轴（最好是Y轴）一起旋转。具体实现是：1.将每个文字或者单词都包裹在标记中，然后使用CSS：hover Selector选择器，我们将在Y轴上旋转每个文字。2.把文字分为两部分，在第一部分中，我们将创建旋转文本的HTML基本结构，在第二部分中，通过CSS实现将鼠标悬停在该文本时，它将使该文本结构可旋转。简单点来时就是：创建了一个无序列表，并将每个字母包装在一个li元素当中。根据这个描述我们的HTML结构如下：
2020-07-22 01:27:19
747
原创 曲线阴影
我们在给某些元素阴影的时候，，往往比较生硬，看起来不是那么的生动，例如下面我们距离的白色盒子。我们能否使盒子变得更加的灵巧呢，现在我们来分享一个通过双伪元素来实现曲线阴影。首先我们来看看普通的加阴影后的盒子：代码是这样的： <div class="effect"> <h1>曲线阴影</h1> </div> .effect { width: 70%; height: 200px;
2020-07-22 01:03:45
174
原创 less的父选择符&，嵌套，项目工程化（@improt）和unit单位和其他常用参数
less 的父选择符&在less里面父选择符***主要代表当前选择的元素本身***。主要是给伪类写样式的时候更加方便。less代码是这样：a{ color : skyblue; & :hover{ color: lightgoldenrodyellow; }}转换后的CSS代码是这样：a { color: skyblue;}a :hover { color: lightgoldenrodyellow;}less 代.
2020-07-08 19:09:33
541
原创 less的环境搭建和语法（注释和变量）编译及常用的选择符的使用
什么是less?Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。其实less可以看作css的新编写方式。Less 是一门预处理语言，支持变量、mixin、函数等额外功能。例如：Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。简单来说，就是传统的CSS语法冗长，没有语法结构，也没有变量，代码的重用性不高，网页写好后的样式维护和修改起来非常的困难；less的出现很好的解决了这个问题，它具有继承性，重用性，和变量，让CSS在编写过程
2020-07-05 22:15:27
240
原创 jQuery前身和未来
转眼时间到了2020年 ，jQuery的情况怎么样了呢？在目前的前端领域，随着新的技术与框架的不断发展与更新，例如vue,react，Aangle等的不断推出和更新，Query似乎已经辉煌不再，并且jQueey还给人一种老旧过时的感觉了。那事实到底是什么样的呢？对于处于学习阶段的准前端人，我们目前还有必要去学习它吗？带着这样的问题，我们来一起思考jQuery的今生和未来。最早jQuery诞生大概在2006年，从它的第一个版本发布到现在大概已经过去十五年了。它的口号是wirte less do m.
2020-05-18 01:36:28
386
原创 jQuery学习笔记
query 是什么？ jQuery 其实就是别人封装好的一个外部js库 jQuery是一个快速、小巧、功能丰富的JavaScript库。 它使诸如HTML文档遍历和操作、事件处理、动画和Ajax之类的事情变得更加简单， 因为它提供了一个易于使用的API，可以跨多种浏览器工作。 jQuery结合了通用性和可扩展性，改变了数百万人编写JavaScript的方式。jQuery文件的引入方式：例：jQuery的入口函数：jQuery(function(){console.log
2020-05-18 00:24:41
198
原创 JS三大家族 client ，offset ，scroll
上一篇介绍了获取屏幕坐标，大致已经包含了三大家族的内容，这一篇系统的了解下三大家族：document.body.clientWidth （BODY对象宽度）document.body.clientHeight （BODY对象高度 ）document.documentElement.clientWidth （可见区域宽度 ）document.documentElement.clientHei...
2020-04-12 13:57:39
97
原创 JS获取屏幕坐标
获取JS屏幕坐标首先我们来了解一下几个关键的对象documentElement 属性可返回文档的根节点(获取文档中的的元素)。2.scrollTop() 为滚动条向下移动的距离document.documentElement.scrollTop 指的是滚动条的垂直坐标document.documentElement.clientHeight 指的是浏览器可见区域高度document...
2020-04-12 13:31:45
2146
原创 什么是Bootstrap和Bootstrap的应用？
**什么是Bootstrap？**Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。简单的来说，他是一款运行在浏览器的插件。**Bootstrap的组成**bootstrap大致的组成可分为三部分：Bootstrap CSS、Bootstrap 布局组件和...
2020-04-10 17:42:43
347
原创 添加元素
createElementById()创建一个元素后，添加到父元素的中，用appendChilde添加到元素之中var ul1 = document.getElementById(“ul1”);//创建的li 元素添加到父元素的最后var newLi = document.createElement(“li”);newLi.innerText = “我是新建的li元素”;ul1.app...
2020-03-22 14:19:08
809
原创 insertBefore,removeChild,repalceChild的语法和作用
1.insertBeforeinserBefore，顾名思义就知道是“在某个节点之前插入”。MDN的定义：而所谓的“拥有指定父节点”，就是指被参照的节点的父节点就是调用insertBefore方法的节点。如果给定的子节点是对文档中现有节点的引用，insertBefore()会将其从当前位置移动到新位置。参数newNode：将要插入的节点referenceNode：被参照的节点（即要...
2020-03-22 13:35:45
425
原创 DOM操作下拉选项框左右移动
页面：HTML部分 ： <style> #sel{ width: 100px; } #unsel{ width: 100px; } </style></head><body> <div> ...
2020-03-17 17:13:34
667
1
原创 DOM操作元素
查元素：getEelementById返回值只获取到一个元素，没有找到返回nullgetElementByClassName返回值是一个类数组，没有找到返回空数组getElementByTagNamef返回值是一个数组，没有找到返回空数组getElementByName返回值是一个类数组，没有找到，返回空数组querySelector返回值只获取到一个元素querySelec...
2020-03-15 14:18:28
81
原创 Node（节点）和attribute（属性）
Node 节点：Node.childNodes只读返回一个包含了该节点所有子节点的实时的NodeList。NodeList 是“实时的”意思是，如果该节点的子节点发生了变化，NodeList对象就会自动更新。Node.firstChild 只读返回该节点的第一个子节点Node，如果该节点没有子节点则返回null。Node.lastChild 只读返回该节点的最后一个子节点Node，如...
2020-03-15 12:56:39
3108
原创 事件的绑定和注册
在DOM元素里面绑定 使用on+事件类型 = function() {}缺点 : 结构混合在一起2. 在js里面进行绑定现在js代码中获取元素, 使用点语法注册缺点 : 就是不能重复注册同名事件, 否则就会覆盖, 默认冒泡 3. 使用事件监听的方式进行注册 addEventListener1 捕获阶段,IE是木有捕获阶段的2 事件处理程序处于目标上3 冒泡阶段...
2020-03-15 12:19:10
201
原创 DOM事件冒泡和捕获
事件冒泡// 事件冒泡 : 当一个元素的事件被触发时, 这个元素所有的度元素的同名事件就会被依次触发// 元素 --> 父元素 --> body --> html --> document --> window// 事件冒泡一直存在 只是我们以前没有给父元素注册同名事件**阻止事件冒泡：**事件捕获// 事件捕获 : 当一个元素的事件被触发, 先...
2020-03-15 00:22:54
78
原创 textContent,innerText,innerHTML区别和关系
textContent:获得内容的时候，会忽略HTML代码，写入HTML代码不能解析。获取的内容与源码内容一样textContent 作用和innerText完全一致 只是浏览器兼容性不同textContent 是W3C的标准语法 但是微软IE8及以前浏览器不支持innertText :获得内容的时候，会忽略HTML代码，写入HTML代码不能解析。获得内容与HTML解析的内容一样...
2020-03-08 13:10:06
127
原创 作用域和闭包
作用域分两种：全局作用域 和 局部作用域全局作用域：最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的：var outerVar = “outer”;function fn(){console.log(outerVar);}fn();//result:outer局部作用域：和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，而对于函数外部是无法访问的...
2020-03-01 13:31:35
45
原创 JS对象和对象的应用
1. 工场模式和 构造函数模式工场模式：function students(name,age,grade){// 1.创建一个对象var stu ={};// 2. 给对象里面的属性赋值stu.name = name;stu.age = age;stu.grade = grade; // 3. 返回创建好的对象 return stu;...
2020-02-23 13:32:21
293
1
原创 包装对象和基本数据结构
包装对象：包装对象，就是当基本类型以对象的方式去使用时，JavaScript会转换成对应的包装类型，相当于new一个对象，内容和基本类型的内容一样，然后当操作完成再去访问的时候，这个临时对象会被销毁，然后再访问时候就是undefined。number,string,boolean都有对应的包装类型。3 个特殊的引用类型 ：Boolean Number String 这些类型与其他引用数...
2020-02-23 13:13:35
104
原创 JS作用域
在js中对象和函数也是变量，作用域是可访问变量，对象，函数的集合。作用域也分局部作用域，全局变量，局部变量，变量的生命周期。JS的作用域大致可分为三部：词法作用域，函数作用域/块作用域，闭包。js属于动态语言，他的编译过程不发生在构建之前，而是在代码执行之前。编译完听成就马上执行。例如 var a = 2; //将其分解为以下步骤：1.遇到 var a 编译器会询问作用域是当已经存在...
2019-12-30 08:21:47
36
原创 求一个3*3矩阵对角线元素之和，利用双重循环控制输入二维数组
刚开始看到这道题的时候一点头绪都没有，看到的同学的画图之后明白了一点，代码部分是参考的Java的，最后这道题做出了。过程很有趣。接下来，看看是怎么来解析这道题的 :首先我们来看看3*3矩阵图是什么样的：为了便于找出规律，我用了1–9的数字规律的排列，然后我们在来观察我在[ ] 中的标记，就可以发现，第一条对角线是有规律的。接着我们在进行观察，也会发现以下规律，再总结到算法中，这道题就解开了。 ...
2019-12-16 16:05:04
1905
原创 用浮动实现酷狗音乐主页布局3
运行效果：最后的这个布局因该在一个星期前就完成的，但直到现在才发上来，现在已经回不到上周那个思路上了。即便是有注释也很得花很长时间来回顾。以此为教训，以后有清晰的思路的时候及时记录。...
2019-12-10 18:14:12
169
原创 利用浮动实现酷狗音乐主页布局2
昨天写了基本的思路，今天用代码来看看实现的效果页面的基本布局已经实现了：接下来看看代码：1.body结构：2.CSS样式：写到这里大的布局已经完成了。接下来我们就可以对左右盒子里面来布局。稍微晚点在补充接下来的代码和效果图。...
2019-11-28 09:19:41
443
原创 用浮动和定位实现酷狗音乐主页布局
今天的代码放在教室里就不先不用代码演示了；这些先说说用浮动布局来实现酷狗的推荐主页。要用到的HTML和CSS代码主要是 div(盒子模型)和flaot（浮动）关键字，和position（定位）；利用这三个知识点就能实现布局了；我们先来看看要实现的布局的效果图，截图来自酷狗音乐网；要实现这样的布局。我们先分析一下结构，这样我们便于在body里写出结构；首先我们看看主要结构，左边是一个盒子，右...
2019-11-28 01:26:42
670
原创 CSS浮动
CCS 浮动今天学习的是CSS中的浮动布局，浮动布局理解起来对我来说比较难理解，但老师今天讲了很多次，也做了很形象的比喻，浮动布局的原理和效果都已经理解了。接下来我参照老师的课堂笔记，来写自己理解的浮动。一、什么是浮动浮动属于定位的一种(我理解的浮动是 在已有的块级元素上添加浮动后 这个块级标检不在占有块级元素的空间（文档流），因此他可以被下一层元素叠加)。这里稍微的说一下定位：所谓定位，实...
2019-11-14 00:29:24
54
原创 CSS样式
这两天上课的内容是CSS样式表，内容比较多，在课堂上的练习没有截图，在这里插入代码片有空了再整理一遍发图。在这里特别感谢我的同学，CSS里面有很多我不懂的，他都告诉帮我，并且还帮我看代码；也给我看演示。一、什么是CSSCSS 层叠样式表，级联样式，简称才是样式表实现了内容和表示的分离CSS和HTML之间的关系HTML是负责网页的结构CSS 是负责构建HTML元素的样式CSS作用：1...
2019-11-13 07:38:51
44
原创 HTML基础1
HTML基础今天回到家，看到同学分享的博客停惭愧的，同学将今天上课的内容进行了间接而清晰的整理。将今天学到的知识点归纳和总结，使零散的知识点看起来条理清晰，看到之后蛮受触动，照着同学的思路又将今天的学到的写了一遍。一，段落标签，文本标签段落标签：文本标签：运行效果：二，标题标签运行效果：三，横线运行效果：...
2019-11-06 23:53:47
51
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人