- 博客(56)
- 收藏
- 关注
RSS订阅原创 Vue框架基础语法(一)
基本语法实例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <p>你的名字是：{{name}}</p> </d
2020-08-02 23:35:52
293
原创 Mongodb数据库的使用
1、配置环境当你下载安装完成后，找到你安装完成后的路径我的路径：然后复制当前的文件路径，依次打开：右键此电脑->属性->高级系统设置->环境变量->找到属于用户变量中的Path点击编辑：然后新建粘贴之前复制的文件路径。2、链接数据库1、新建一个文件夹2、打开cmd控制台，输入：mongod --dbpath --新建文件夹路径当最后出现 waiting for connctions prot : 27017的字样说明数据库启动成功。3、保留当前的cmd窗口，重新
2020-07-19 21:18:31
177
原创 防抖与节流
函数防抖函数防抖 是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。function debounce(fn, wait) { var timeout = null; //定义一个定时器 return function() { if(timeout !== null) clearTimeout(timeout);
2020-07-19 20:44:35
151
原创 Node.js——fs模板
fs模块用于对系统文件及目录进行读写操作。首先需要引入模板const fs = require('fs');1.fs.stat 检测是文件还是目录fs.stat('./02.js', (err, data) => { if (err) { console.log(err); return; } console.log(data);//查看有关信息 console.log(`文件:${data.isFile()}`)//检测是.
2020-07-12 22:00:18
347
原创 Nodejs——url模板
nodejs里面的一个简单的模块，url模块。这个url的模块要使用的话需要先引入。const url = require("url");url模板中提供了很多方法，我们这里说几个常用的。1、 url.parse(urlString,boolean,boolean)parse这个方法可以将一个url的字符串解析并返回一个url的对象参数：urlString指传入一个url地址的字符串第二个参数（可省）传入一个布尔值，默认为false，为true时，返回的url对象中，query的属性为一个
2020-07-12 21:04:01
250
原创 ES6数组去重的三个简单方法
第一种：利用Map对象和数组的filter方法代码如下：let arr1 = [1, '1', 1, undefined, undefined, NaN, NaN];function unique(arr) { const res = new Map(); return arr.filter((a) => !res.has(a) && res.set(a, 1))}let newArr = unique(arr1);console.log(newArr);结果如下图
2020-07-04 23:48:36
1244
原创 ES6——扩展运算符(...)
对象的扩展运算符对象中的扩展运算符(…)用于取出参数对象中所有可遍历属性，拷贝到当前对象中let bar = { a : 1, b : 2};let baz = {...bar};//{a : 1, b : 2} 上述方法等价于：let bar = { a: 1, b: 2};let baz = Object.assign({}, bar); // { a: 1, b: 2 }Object.assign方法用于对象的合并，将源对象(source)的所有可枚举属性，复制到目标
2020-07-04 11:35:13
94
原创 ES6中的浅复制--Objeck.assign()
ES6对象提供了 Object.assign() 这个方法来实现浅复制。使用assign主要是为了简化对象的混入（mixin）。混入是指的在一个对象中引用另一个对象的属性或方法。assing可以把一个对象的属性和方法完整的转copy到另外一个对象中。在es5中复制一个对象，需要很长的一段代码，而es6完全解决了这个问题：var p = { name : "lisi", age : 20, friends : ['张三', '李四'] }
2020-06-27 16:02:56
161
原创 使用箭头函数的注意事项
箭头函数有几个使用注意点。（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。function foo() { set
2020-06-26 18:15:25
702
原创 typescript的安装及运行
typescript环境的搭建首先确保你的电脑里已经有了node,如果没有的话请先安装node，node.js官网页面如下，选择适合自己电脑的版本进行安装即可。已经安装node了那么请跳过此部分介绍，往下看。检查Node.js 安装是否成功：快捷键 win+R 打开运行面板，输入命令 cmd ，打开命令窗口 输入命令：node -v 查看Node.js版本号，如果看到版本号代表安装成功了，若没有则表示安装不成功安装typescript刚才的窗口中，输入npm install typescr
2020-06-22 23:06:46
1882
2
原创 跨域的解决方案
什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1.) 资源跳转： A链接、重定向、表单提交2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等什么是同源策略？同源策略/SOP（Same origin pol
2020-06-20 21:56:35
80
原创 瀑布流布局其原理
一、什么是瀑布流很多时候我们会看到一些Vlog网站或者展示图片的网站，它们的图片明明每一张的高度大小都不同，但是却能自动地适应，排成一行一行地展示，并且下拉到底的时候，加载的图片也会自动适应，这就是瀑布流，比如下图。二、实现原理要做到每一张图片都根据上面的高度自动适应排列，那么我们就不能单纯地靠html+css布局了，需要用到js来帮助计算位置。首先，我们需要理清一个思路，就是这个布局是按一列列来看的，如下图：我们要做的，其实就是在每一列下面插入新的图片，这样它就会紧挨着上面的图片对齐。至于上
2020-06-13 20:21:44
308
原创 Ajax的优缺点
ajax的概念：相当于在客户端与服务端之间加了一个抽象层(Ajax引擎)，使用户请求和服务器响应异步化，并不是所有的请求都提交给服务器，像一些数据验证和数据处理都交给Ajax引擎来完成，只有确认需要向服务器读取新数据时才右Ajax引擎向服务器提交请求。ajax的优点：1.无刷新更新数据 Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信2.异步与服务器通信 使用异步的方式与服务器通信，不打断用户的操作3.前端与后端负载均衡 将一些后端的工作移到前端，减少服务器与带宽
2020-06-13 17:08:13
225
原创 Ajax请求的五个步骤
一、原生JS中的Ajax：1、使用ajax发送数据的步骤第一步：创建异步对象var xhr = new XMLHttpRequest();第二步：设置 请求行 open(请求方式，请求url):// get请求如果有参数就需要在url后面拼接参数，// post如果有参数，就在请求体中传递 xhr.open("get","validate.php?username="+name)xhr.open("post","validate.php");第三步：设置请求（GET方式忽略此步骤）头:s
2020-06-07 19:34:30
37173
2
原创 javascript中call、apply和bind
一、方法定义：apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。call 与 apply 的相同点：方法的含义是一样的，即方法功能是一样的；第一个参数的作用是一样的；call 与 apply 的不同点： 两者传入的列表形式不一样call可以传入多
2020-06-07 18:47:41
73
原创 fullpage框架
1. fullpage.js的主要功能fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站，github地址。主要功能有：支持鼠标滚动。支持前后退和键盘控制。多个回调函数。支持手机，平板触摸事件。支持css3动画。支持窗口缩放。窗口缩放时自动调整。可设置滚动宽度，背景颜色，滚动速度，循环选项，回调，文本对齐方式等。2. fullpage.js的使用2.1 兼容性fullpage.js是jQuery的插件，需要依赖jQuery，要求jQuery最低的版本
2020-05-31 21:22:12
154
原创 网络基础——IP地址
IP地址分类与子网掩码有关计算一、IP地址1、IP地址基本概念IP地址在网络层将不同的物理网络地址统一到了全球唯一的IP地址上（屏蔽物理网络差异），是唯一标识互联网上计算机的逻辑地址（相当于手机号码，可以通过唯一的手机号码找到手机），所以IP地址也被称为互联网地址（可见其重要性）。2、IP地址格式我们目前常用的IPv4中规定，IP地址长度为32位二进制，在表示时，一般将32位地址拆分为4个8位二进制，再转为4个十进制数表示，每个数字之间用点隔开，如127.0.0.1（localhost），这种描述
2020-05-31 20:59:25
214
原创 jQuery中.remove() 与.detach()的区别
通过一张对比表来解释2个方法之间的不同方法名参数事件及数据是否也被移除元素自身是否被移除remove支持选择器表达是是（无参数时），有参数时要根据参数所涉及的范围detach参数同remove否情况同removeremove：移除节点无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据detach：移除节点移除的处理与remove一致与r
2020-05-24 22:53:03
144
原创 jQuery中animate运行原理
在看源码之前我们先看一些小的运动效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 { width: 300px; height: 300px; backgr
2020-05-24 22:12:17
936
原创 jQuery中动态创建、添加元素的方法
jQuery中动态创建、添加元素的方法总结<input type="button" value="创建元素" id="btn"><div id="box"></div><p id="main">这是文中一段话</p>点击按钮，动态创建元素方法一：$()创建元素，后用append()方法添加。append() 还可以把其他地方元素添加进这个对象中。$('#btn').click(function() { var el = $('
2020-05-17 21:42:57
2517
原创 jQuery对象与DOM对象的区别和转换
什么是jQuery对象？就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。$("#test").html()意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法这段代码等同于用DOM实现代码：document.getElementById("id").innerHTML;虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用j
2020-05-17 21:31:43
205
原创 Bootstrap中container和container-fluid的区别
html代码：1、.container类在屏幕宽度小于等于767px的时候，宽度=屏幕宽度的，也就是100%，container-fluid类不管屏幕宽度大小，一直是100%屏幕宽767px：2、屏幕宽一直拉大（<1000px）：.container类的div左右出现外边距margin，它会随着屏幕的增大而增大，padding值和子div的宽度不变，屏幕拉大的部分都作用于margin上了。.container-fluid类宽度不管屏幕宽度大小，一直是100%。3、屏幕拉大到1000px的
2020-05-11 18:01:32
357
原创 Bootstrap3与Bootstrap4的区别
Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。不同点：Bootstrap3Bootstrap4Less预处理Sass预处理4种栅格类5种栅格类使用px为单位使用rem和em为单位（除部分margin和padding使用px）使用push和pull向左右移动偏移列通过offset-类设置使用float的布局方式选择弹性盒模型（flexbox）注：Bootstrap
2020-05-10 21:17:13
567
原创 onmouseenter和onmouseover
onmouseover 与 onmouseenter 作为两个效果相似的鼠标事件，经常被我们使用，但是二者还是有区别的。在具体的使用中，两者的效果是相似的，使用的场景并没有太大的区别，效果类似css中的hover。但是，两者还是存在一定的区别的，那就是mouseenter不支持冒泡，而mouseover支持冒泡。冒泡指的是事件冒泡，即在子元素上触发的事件会向上传递至父级元素，并触发绑定在父级...
2020-05-05 21:22:29
872
原创 JS——鼠标事件
onclick 单击事件（相继触发mousedown与mouseup事件）ondblclick：双击onmousedown 鼠标按下事件onmouseup 鼠标抬起事件onmousemove 鼠标移动事件onmouseout 鼠标移出事件onmouseover 鼠标指针移动到元素（被选元素或其子元素）上时触发常与onmouseout一起用onmouseenter 只有在鼠标指针穿过...
2020-05-05 20:42:46
193
原创 Bootstrap中的栅格系统
栅格实现原理•把网页总宽度平分为12分，开发人员可以自由按分组合，以便开发出简洁方便的程序•仅仅通过定义容器大小、平分12分，再调整内外边距，最后结合媒体查询，就制作出强大的响应式栅格系统•栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。Bootstrap 栅格系统的工作原理：行（row）必须放在.container（...
2020-05-04 22:29:07
197
原创 Bootstrap的使用
visual studio code中使用1、打开编辑器，点击商城2、输入bootstrap，点击安装3、在一个刚刚打开空白的html文件中输入bs3-template:html5 然后按Enter键就可以使用bootstrap模板sublime text3中1、所以首先要去网站下载该插件https://github.com/JasonMortonNZ/bs3-sublime-...
2020-05-04 21:37:38
210
原创 css3的perspective属性
perspective用于3d的构图，在很多人的解读中，这个perspective的意思为人的视角距离元素的位置，其实这是不够准确的，或者说，容易引起歧义的。甚至目前为止（2019年2月26日）在w3c官方的中文以及英文文档中，都没有一个准确清晰的解释。很多人理解这个属性为用户与元素的距离，离的越远，元素看起来越大，离的越近，元素看起来越小，然而事实不是这样的。其实在元素没有设transfor...
2020-04-26 20:49:05
449
原创 css3制作3d旋转相册
需要用到的属性：prespective ：（在父元素中使用）景深(近大远小) 是我们观察物体的一个视角距离，距离越小效果越明显人们一般观察的距离为800px–1200px效果最为明显transfrom-style属性（在父元素中使用）transfrom-style：preserve-3d；（让当前元素形成一个3D空间）perspective-origin属性perspective-o...
2020-04-26 19:49:22
265
原创 css3的flex-grow属性
该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。 flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。1、举个例子: 父元素宽400px，有两个子元素：A和B。A宽为100px，B宽为200px。 则空余空间为 400-（100+200）= 100px。 如果A，B都不索...
2020-04-19 19:20:04
351
原创 css3中flex-basis与width的区别
1. width和flex-basis同时存在时 .flex-wrap{ display: flex; width: 600px; height: 100px; border: 1px solid #ddd; } .flex-item{ width: 200px; flex-basis: 100px;...
2020-04-19 18:46:46
1396
原创 如何在html页面用js引入百度地图
首先得申请一个秘钥，步骤如下：1.百度搜索“ 百度地图开放平台”。2.然后填写账号登录，没有账号就注册一个，非常简单没什么可说的。3.选择“我的应用”然后创建一个应用。我们是网页调用，类型默认选服务器浏览器都行，有很多服务默认勾选的一般都足够我们使用了。填完之后提交。4.然后查看我的应用，复制你的AK。注：ak=每个人在申请时有自己的ak(秘钥)，不输入无法引入地图利用api完...
2020-04-12 22:55:54
3083
1
原创 LocalStorage和sessionStorage的区别
1.APIsetItem (key, value) —— 保存数据，以键值对的方式储存信息。getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。removeItem (key) —— 删除单个数据，根据键值移除对应的信息。clear () —— 删除所有的数据key (index) —— 获取某个索引的key2、localStoragel...
2020-04-12 21:11:04
81
原创 var、let、const三者的区别
var、let、const的区别var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。<script type="text/javascript"> // 块作用域 { ...
2020-03-23 19:25:30
65
原创 ES6简书
1.变量声明const和let在ES6语法中我们通常用let和const来声明，let 表示变量、const 表示常量。let 和 const 都是块级作用域。在一个函数内部在一个代码块内部说白了只要在{}花括号内的代码块即可以认为 let 和 const 的作用域let声明变量：let声明的变量不会挂在window中，不会造成全局变量的污染新增了一个块级作用域{}，以前只...
2020-03-23 14:33:38
71
原创 网页的渲染及加载的时间线
1、渲染过程当浏览器获得一个html文件时，会“自上而下”加载，并在加载过程中进行解析渲染解析：浏览器会将HTML解析成一个DOM树，DOM Tree将CSS解析成 CSS Rule Tree根据DOM Tree和CSS Tree来构造Rendering Tree再下一步就是绘制，即遍历Rendering Tree，并使用UI后端层绘制每个节点2、渲染过程的概念Reflow（...
2020-03-11 19:00:44
891
原创 原型链的理解
1、在js里，继承机制是原型继承。继承的起点是 对象的原型（Object prototype）。2、一切皆为对象，只要是对象，就会有 proto 属性，该属性存储了指向其构造的指针。Object prototype也是对象，其 proto 指向null。3、对象分为两种：函数对象和普通对象，只有函数对象拥有『原型』对象（prototype）。prototype的本质是普通对象。Fu...
2020-02-13 13:47:04
101
原创 JavaScript函数习题
一、作用域，作用域链 var a = 20; function arr(){ var a = 10; var b = 50; function arr2(){ var c = 25; console.log(a);//10 //这个a是在arr执行后，在作用域里面找，因为arrAO里面有a ，...
2020-02-13 13:15:24
408
原创 DOM常用API
1、获取指定属性的值 标签中必须有写的getAttribute(“href”)var link = document.getElementById('link');console.log(link.getAttribute("href"));2、修改属性的值setAttribute(“href”, “#top”)var link = document.getElementById(...
2020-01-05 22:55:56
232
原创 DOM
一，简介DOM（Document Object Model）的缩写，即文档对象模型。是针对XML并经过扩展用于HTML的应用程序编程接口（API）所以DOM本质上是一种接口（API)，是专门操作网页内容的API标准DOM把整个页面映射为一个多层节点结构，HTML或XML页面中的每个组成部分都是某种类型的节点。借助DOM提供的API，开发人员可以删除、添加、替换或修改任何节点DOM：核心D...
2020-01-04 15:40:59
62
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人