- 博客(53)
- 收藏
- 关注
RSS订阅原创 使用vue完成ToDoList
ToDoList功能增加清单: enter按键事件, 把单个清单任务对象, 添加到清单数组,完成清单: 点击checkbox复选框, 控制在哪个列表显示, 默认事件去除删除清单: 点击删除按钮, 从清单数组删除对应的任务, splice代码实现使用vue的双向绑定数据非常容易实现<body><div id="app"> <div class="header"> <section> <label
2020-08-01 12:07:56
255
原创 节流、防抖
防抖节流是什么防抖debounce：在事件触发n秒后再执行，如果在n秒内又有新的触发，就重新计算节流throttle：连续事件触发，在指定的时间内，不管触发几次，就只执行一次使用场景:防抖:实时搜索(keyup) 、 拖拽(mousemove)、节流:窗口调整(resize)、页面滚动(scroll)、抢购和疯狂点击(mousedown)、没有防抖节流实例 let input = document.getElementsByTagName("input")[0]; input.
2020-07-19 22:31:00
141
原创 JS深克隆
内容须知一、基本数据类型(栈)var a = 3;var b = a;b = 5;console.log(a); // 3console.log(b); // 5JS中的基础数据类型,往往都保存在栈内存中,我们可以直接操作保存在栈内存空间的值，因此基础数据类型都是按值访问。也就是说，它们的值直接存储在变量访问的位置,二、引用数据类型(堆)var obj1 = { a: 1, b: 2, c: 3}var obj2 = obj1;obj2.a = 5;
2020-07-12 22:45:09
177
原创 Nodejs 实现登录注册
流程第一步：前台输入用户名密码=>第二步：点击提交向后台发送数据=>第三步：后台接收数据并验证=>第四步：验证完成向前台发送成功，失败标识=>第五步：前台接接收标识，做页面处理登录前台处理登录页面 <p> <label for="">用户名：</label> <input type="text" name="username" id="login_username"&
2020-07-09 20:27:49
2251
原创 proxy（代理）用法
1、什么是Proxy?Proxy 也就是代理，可以帮助我们完成很多事情，例如对数据的处理，对构造函数的处理，对数据的验证，说白了，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。语法let p = new Proxy(target, handler);参数target ：需要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。handler: 一个对象，其属性是当执行一个操作时
2020-07-04 16:09:57
6730
原创 Reflect
Reflect介绍为操作对象而提供的新APIReflect 是一个内置的对象，它提供可拦截JavaScript操作的方法。方法与代理处理程序的方法相同。Reflect 不是一个函数对象，因此它是不可构造的。Reflect用法（API）（1）Reflect.get(target,property,receiver)查找并返回target对象的property属性例1：let obj={ name:"msx", } let result=Reflect.get(ob
2020-07-02 17:13:41
285
原创 JavaScript的执行机制
浏览器的五个线程：js主线程：负责执行栈中栈顶代码的执行GUI 渲染线程：负责render树的渲染（节点与css样式）事件监听线程：负责监听事件以上三个为常驻线程记时线程：定时器http异步线程JS为什么是单线程的？JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决
2020-06-27 22:30:43
74
原创 Promise
promise介绍Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免
2020-06-27 21:06:54
86
原创 jquery发送Ajax请求
概述Ajax用于浏览器与服务器通信而无需刷新整个页面，服务器将不再返回整个页面，而是返回少量数据,比如Flash，Java applet，iframe等，但Ajax是目前最为常见的一种。我们可以使用JavaScript扩展对象XMLHttpRequest实现Ajax，下面直接了解jQuery实现Ajax。$.ajax()举例：$.ajax({ url: "/greet", data: {name: 'jenny'}, type: "POST", dataType
2020-06-22 00:35:07
167
原创 js对象的四个特征
创建对象var arr={ name:"msx", age:"22", sex:"男" }Object.getOwnPropertyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符。var objId = Object.getOwnPropertyDescriptor(obj,'name'); console.log(objId); //{value: "msx", writable:
2020-06-21 21:26:01
167
原创 TypeScript简介
源起Tim Berners-Lee 于1989年发明了万维网并于1991年对外发布了世界上第一个网页浏览器 WorldWideWeb，从此拉开了 Web 时代的序幕。1994 年网景公司（Netscape）发布了 Navigator 浏览器 0.9 版本，这是历史上第一个比较成熟的网络浏览器，轰动一时。1995 年，受雇于 Netscape 的 Brendan Eich 用了十天时间设计出了 JavaScript。之后便开启了浏览器兼容和争夺的至暗时刻，到 1997 年 ECMA 组织开始发布公开标准
2020-06-15 00:44:07
375
原创 Ajax请求
原生JS中的Ajax发送数据的步骤：第一步：创建异步对象:var xhr = new XMLHttpRequest();XMLHttpRequest对象:(1)对象类型的API;(2)在浏览器环境使用;(3)用于客户端和服务端数据的传递和接收;(4)用于请求XML数据（JSON/TEXT）。第二步：设置 请求行 open(请求方式，请求url):// get请求如果有参数就需要在url后面拼接参数， xhr.open("get","validate.php?username="+nam
2020-06-14 21:43:37
387
原创 Ajax简介
什么是ajax:Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新技术）。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。使用:使用XHTML+CSS来标准化呈现；
2020-06-07 22:32:21
106
原创 PHP入门----变量与数组
PHP简介PHP是PHP:Hypertext Preprocessor的简称，中文名：“超文本预处理器”,是一种通用开源脚本语言。语法吸收了C语言、Java与Perl的特点，利于学习，使用广发，主要适用于web开发领用。PHP是服务器端的脚本语言，脚本语言相对编程语言来说，要简单的多。PHP程序只能运行在服务器端，在客户端看不见PHP任何代码；PHP文件的扩展名是以.php为后缀的。PHP编写PHP 脚本以 <?php 开始，以 ?> 结束：<?php// PHP 代码?
2020-06-07 22:04:59
152
原创 Http协议----请求
一. 什么是Http协议?HTTP是hypertext transfer protocol（超文本传输协议）的简写，它是TCP/IP协议的一个应用层协议，用于定义WEB浏览器与WEB服务器之间交换数据的过程。客户端连上web服务器后，若想获得web服务器中的某个web资源，需遵守一定的通讯格式，HTTP协议用于定义客户端与web服务器通迅的格式。二.协议版本协议版本的格式为：HTTP/主版本号.次版本号，常用的有HTTP/1.0和HTTP/1.1三. Http请求方式2.1 常用分类get:这种
2020-05-31 21:41:52
125
原创 fullPage全屏滚动插件
1. 引入插件文件这个插件依赖于jQuery，所以你还需要下载jQuery，并且在Fullpage插件之前引入。<link rel="stylesheet" type="text/css" href="/fullpage/jquery.fullPage.css" /><script src="/fullpage/jquery.min.js"></script><script type="text/javascript" src="/fullpage/jque
2020-05-31 20:29:52
162
原创 jQuery-----实现显示隐藏效果
一,显示隐藏hide() 隐藏//用如下代码隐藏target元素 $(".target").hide(); //与用css()的方法设置display属性效果相同 $(".target").css("display","none");show() 显示//用如下代码隐藏target元素 $(".target").show(); //与用css()的方法设置display属性效果相同 $(".target").css("display","block");toggle() 绑定两
2020-05-24 21:36:14
257
原创 jQuery-----each()和map()的区别
一, 返回值$ .each默认的返回值是当前遍历的数组值，$.map默认返回值是空数组var a = [1, 2, 3];var b = $.each(a, function (index, value) {})var c = $.map(a, function (value, index) {})console.log(b);console.log(c);二,遍历的数组值进行修改$ .each和$.map不支持对在回调函数中对当前正在遍历的数组值进行修改var a = [1,
2020-05-24 17:54:40
113
原创 jQuery-----全选和取消全选
1、目前我遇到的最简单的一种方法，没有任何布局要求!!!但是有局限,不是很完善,不能完成除全选以外其他复选包框都选中,全选自动选中,.//全选$('input').eq(0).click(function(){ //判断全选状态 if($(this).prop('checked')){ //查找到除全选以外所有的复选框为选中状态 $(this).parents().nextAll().find('input[type=checkbox]').prop('checked',tr
2020-05-17 22:50:40
230
原创 jQuery -----取值赋值的基本方法
取值text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值$("#btn1").click(function(){ console.log("Text: " + $("#test").text());});$("#btn2").click(function(){ console.log("HTML: " + $("#test1").html());});$("#btn3").clic
2020-05-17 21:46:53
234
原创 LESS基础用法
LESS 语法:LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情变量设置变量，封装样式：@main-color: #5B83AD;使用变量：body{ background: @main-color;}结果如下：body { background: #5B83AD;}混合在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个clas
2020-05-10 22:33:23
243
原创 jQuery的用法
jQuery简介jQuery是一个js库，免费开源易用，提供了我们开发中常用到的操作DOM的API，解决了我们使用js操作DOM常遇到的一些问题，强大的选择器，简化我们的操作jQuery使用前提：使用前必须从官网https://jquery.com/下载jQuery的压缩包，并且用javascript创建，把压缩后的文档粘贴到js文件中，并且在html网页中引入jQuery. <script src="jQuery.js"></script>jquery中$的用法$(f
2020-05-10 22:08:00
104
原创 CSS中单位px和em，rem的区别
PXpx像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。px特点:IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；EMem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经...
2020-05-06 00:01:58
96
原创 媒体查询用法总结
准备工作首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">这段代码的几个参数解释：width = device-width：宽度等于当...
2020-05-05 16:15:49
231
原创 Bootstrap 栅格系统之列排序
列排序.col-md-push-(指定的列数):push 将元素向右推动 * 指定的列数..col-md-pull-(指定的列数):pull 将元素向左拉动 * 指定的列数push(推)下面是使用后的对比div class="container"> <div class="row row-1"> <div class="col-md-3 ">ma...
2020-05-05 15:50:35
584
原创 BootStrap--使用栅格系统
简介栅格系统是指，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap的栅格系统采用了1-12列的模式，并且通过比例计算来设置你定义的列宽,可以随着屏幕分辨率的不同来改变块级元素样式的,Bootstrap有几种栅格类可以使用：.col-xs-* 这是超小屏幕类（<576px），类似手机等设备。.col-sm-* 这是小屏幕设备类（≥576px且<...
2020-05-05 00:13:47
188
原创 css3----立方体的旋转
核心点页面 x,y,z 坐标系的构建（以正对屏幕方向参考方向，向左为 + x, 向下为+y, 向外为 +z）rotateX,rotateY,rotateZ角度方向判断，以对应轴正方向为参考，逆时针旋转为正角度顺时针为负角度。注意，旋转时，坐标轴是跟着一起做旋转的。旋转中心默认为元素的中心点，可以通过transform-origin进行设置代码展示:<!DOCTYPE html&...
2020-04-26 13:43:41
162
原创 css3 --- 过渡
介绍CSS3中新增的transition属性，可以实现元素在变换过程中的过渡效果，实现了基本的动画。定义过渡transition是一个复合属性，包括transition-property、transitionduration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果transition...
2020-04-26 12:45:14
115
原创 align-conten和align-items之间的区别
align-items:作用: align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。属性 :flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。效...
2020-04-20 12:24:31
403
原创 CSS3文字阴影
CSS3文字阴影CSS3设置文字阴影效果text-shadow样式，本来在CSS2版本中也有此属性，但在CSS3中文字阴影text-shadow再次被应用，丰富文字排版布局美化效果。在写网页的过程中，大标题可以采用颜色对比鲜明的"文字阴影"来使主题更突出。这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。语法:text-shadow：x y blur colo...
2020-04-20 00:41:29
650
原创 百度地图搭建以及使用
一.搭建百度地图环境1.注册百度账号首先确保你有一个百度账号。如果已经有了，直接跳过这个步骤。2.申请为百度开发者登陆已经注册的账号申请成为百度开发者。申请网址：http://lbsyun.baidu.com/3.申请密钥详细步骤,请参考http://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html。4.查看百度提供的百度...
2020-04-12 21:53:08
205
原创 sessionStorage和localStorage使用及区别
一,介绍sessionStorage :是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。localStorage :是HTML5新增的一个本地存储对象,将数据保存在客户端本地的硬件设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。但是要注意,必须是同一浏览器sessionStorage和l...
2020-04-09 21:45:17
298
原创 es6 Set用法
set介绍数据结构: set类似于数组，但是成员的值都是唯一的，没有重复，他的键跟值是一样的集合: 可以存储任何数据类型,并且是唯一的(不重复的值)set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）重点set的唯一性let setArr = new Set(['a', 'b', 'c', 'c']); console.log(setArr); /...
2020-03-28 15:39:23
69
原创 ES6
ECMAScript和JavaScript的关系：ECMAScript是JavaScript的标准，JavaScript是ECMAScript的实现严格上说JavaScript和服务端没任何关系,服务端用的ECMAScriptECMAScript发展史:1996年11月 javaScript创造者Netscape公司将javaScript提交给ECMA（欧洲计算机制造联合会）1997年 ...
2020-03-23 12:43:53
88
原创 JS异步加载
JS异步加载的三种方式1、IE专用（IE9以下） defer 代码执行时间：当整个网页解析完，执行代码 <script src="load.js" defer></script>2、async 加载完就执行，只能加载外部脚本 <script src="load.js" async></script>...
2020-03-12 12:09:30
56
原创 JS时间线
js时间线js执行是单线程,并不是说整个浏览器都是单线程的,姑且就成为单线程吧js单线程的原因是为了避免多线程操作dom,引发的并发问题,dom属于基础数据,从多线程上讲,对它的操作要加事物,而js的操作最初就是为了操作dom,嗯,幸好是单线程的,总之一句话,凡是能够修改dom的一定得同步js 加载时间线1、创建document对象，开始解析web页面。创建HTMLHtmlElement对...
2020-03-12 11:02:51
62
原创 函数面试题
第一题var a = 1;function b() { a = 10; return; function a() {}}b();console.log(a);输出: 1第二题function foo(){ function bar() { return 3; } return bar(); function ...
2020-02-13 21:03:55
448
原创 JavaScript原型链
创建对象的方法在了解原型链之前，首先先了解一下创建对象的几种方式，介绍以下三种。 1. var o1 = {name:'o1'}; var o11 = new Object({name:'o11'}); 2.var M = function(){this.name = 'o2'} var o2 = new M(); 3. var P = {name:'o3'}; var ...
2020-02-13 14:46:16
61
原创 getElementByTagName与querySelectorAll
区别1getElementByTagName：这种方式获取到的类数组，无法通过 forEach 进行遍历（可以通过for循环）querySelectorAll：可以通过forEach 进行遍历。区别2通过 getElementByTagName 获取这种方式获取到的类数组是动态的；而 querySelectorAll 这种方式获取到的是静态的（但是如果是 querySelectorAl...
2019-12-30 15:42:26
312
原创 作用域，作用域链
作用域：作用域就是一个独立的地盘，让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。简单举个例子说明一下： //域1 function foo(a){ //域2 var b = a * 2; function bar(c){ //域3 console.log(a,b,c); //域3 } bar(b * 3);...
2019-12-23 20:40:22
54
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人