自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(34)
  • 资源 (1)
  • 收藏
  • 关注

原创 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 870

原创 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 119

原创 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 173

原创 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 540

原创 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 385

原创 jQuery学习笔记

query 是什么? jQuery 其实就是别人封装好的一个外部js库 jQuery是一个快速、小巧、功能丰富的JavaScript库。 它使诸如HTML文档遍历和操作、事件处理、动画和Ajax之类的事情变得更加简单, 因为它提供了一个易于使用的API,可以跨多种浏览器工作。 jQuery结合了通用性和可扩展性,改变了数百万人编写JavaScript的方式。jQuery文件的引入方式:例:jQuery的入口函数:jQuery(function(){console.log

2020-05-18 00:24:41 197

原创 JS三大家族 client ,offset ,scroll

上一篇介绍了获取屏幕坐标,大致已经包含了三大家族的内容,这一篇系统的了解下三大家族:document.body.clientWidth (BODY对象宽度)document.body.clientHeight (BODY对象高度 )document.documentElement.clientWidth (可见区域宽度 )document.documentElement.clientHei...

2020-04-12 13:57:39 96

原创 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 3105

原创 事件的绑定和注册

在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 669

原创 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

欢迎使用CSDN-markdown编辑器.html

上课笔记回顾,有一些内容已经不记得了,通过博客回顾一遍,

2019-11-06

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除