- 博客(53)
- 收藏
- 关注
原创 使用vue完成ToDoList
ToDoList功能增加清单: enter按键事件, 把单个清单任务对象, 添加到清单数组,完成清单: 点击checkbox复选框, 控制在哪个列表显示, 默认事件去除删除清单: 点击删除按钮, 从清单数组删除对应的任务, splice代码实现使用vue的双向绑定数据非常容易实现<body><div id="app"> <div class="header"> <section> <label
2020-08-01 12:07:56
267
原创 节流、防抖
防抖节流是什么防抖debounce:在事件触发n秒后再执行,如果在n秒内又有新的触发,就重新计算节流throttle:连续事件触发,在指定的时间内,不管触发几次,就只执行一次使用场景:防抖:实时搜索(keyup) 、 拖拽(mousemove)、节流:窗口调整(resize)、页面滚动(scroll)、抢购和疯狂点击(mousedown)、没有防抖节流实例 let input = document.getElementsByTagName("input")[0]; input.
2020-07-19 22:31:00
159
原创 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
190
原创 Nodejs 实现登录注册
流程第一步:前台输入用户名密码=>第二步:点击提交向后台发送数据=>第三步:后台接收数据并验证=>第四步:验证完成向前台发送成功,失败标识=>第五步:前台接接收标识,做页面处理登录前台处理登录页面 <p> <label for="">用户名:</label> <input type="text" name="username" id="login_username"&
2020-07-09 20:27:49
2296
原创 proxy(代理)用法
1、什么是Proxy?Proxy 也就是代理,可以帮助我们完成很多事情,例如对数据的处理,对构造函数的处理,对数据的验证,说白了,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。语法let p = new Proxy(target, handler);参数target :需要使用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。handler: 一个对象,其属性是当执行一个操作时
2020-07-04 16:09:57
6829
原创 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
305
原创 JavaScript的执行机制
浏览器的五个线程:js主线程:负责执行栈中栈顶代码的执行GUI 渲染线程:负责render树的渲染(节点与css样式)事件监听线程:负责监听事件以上三个为常驻线程记时线程:定时器http异步线程JS为什么是单线程的?JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决
2020-06-27 22:30:43
84
原创 Promise
promise介绍Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免
2020-06-27 21:06:54
114
原创 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
206
原创 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
175
原创 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
402
原创 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
397
原创 Ajax简介
什么是ajax:Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML),是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML(标准通用标记语言的子集)。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新(无刷新技术)。传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页页面。使用:使用XHTML+CSS来标准化呈现;
2020-06-07 22:32:21
125
原创 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
163
原创 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
135
原创 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
175
原创 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
276
原创 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
130
原创 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
256
原创 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
249
原创 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
271
原创 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
125
原创 CSS中单位px和em,rem的区别
PXpx像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。px特点:IE无法调整那些使用px作为单位的字体大小;国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;EMem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经...
2020-05-06 00:01:58
105
原创 媒体查询用法总结
准备工作首先我们在使用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
245
原创 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
617
原创 BootStrap--使用栅格系统
简介栅格系统是指,将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。Bootstrap的栅格系统采用了1-12列的模式,并且通过比例计算来设置你定义的列宽,可以随着屏幕分辨率的不同来改变块级元素样式的,Bootstrap有几种栅格类可以使用:.col-xs-* 这是超小屏幕类(<576px),类似手机等设备。.col-sm-* 这是小屏幕设备类(≥576px且<...
2020-05-05 00:13:47
210
原创 css3----立方体的旋转
核心点页面 x,y,z 坐标系的构建(以正对屏幕方向参考方向,向左为 + x, 向下为+y, 向外为 +z)rotateX,rotateY,rotateZ角度方向判断,以对应轴正方向为参考,逆时针旋转为正角度顺时针为负角度。注意,旋转时,坐标轴是跟着一起做旋转的。旋转中心默认为元素的中心点,可以通过transform-origin进行设置代码展示:<!DOCTYPE html&...
2020-04-26 13:43:41
184
原创 css3 --- 过渡
介绍CSS3中新增的transition属性,可以实现元素在变换过程中的过渡效果,实现了基本的动画。定义过渡transition是一个复合属性,包括transition-property、transitionduration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果transition...
2020-04-26 12:45:14
137
原创 align-conten和align-items之间的区别
align-items:作用: align-items属性适用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式。属性 :flex-start:交叉轴的起点对齐。flex-end:交叉轴的终点对齐。center:交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。效...
2020-04-20 12:24:31
433
原创 CSS3文字阴影
CSS3文字阴影CSS3设置文字阴影效果text-shadow样式,本来在CSS2版本中也有此属性,但在CSS3中文字阴影text-shadow再次被应用,丰富文字排版布局美化效果。在写网页的过程中,大标题可以采用颜色对比鲜明的"文字阴影"来使主题更突出。这个属性可以有两个作用,产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。语法:text-shadow:x y blur colo...
2020-04-20 00:41:29
674
原创 百度地图搭建以及使用
一.搭建百度地图环境1.注册百度账号首先确保你有一个百度账号。如果已经有了,直接跳过这个步骤。2.申请为百度开发者登陆已经注册的账号申请成为百度开发者。申请网址:http://lbsyun.baidu.com/3.申请密钥详细步骤,请参考http://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html。4.查看百度提供的百度...
2020-04-12 21:53:08
216
原创 sessionStorage和localStorage使用及区别
一,介绍sessionStorage :是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。localStorage :是HTML5新增的一个本地存储对象,将数据保存在客户端本地的硬件设备中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。但是要注意,必须是同一浏览器sessionStorage和l...
2020-04-09 21:45:17
330
原创 es6 Set用法
set介绍数据结构: set类似于数组,但是成员的值都是唯一的,没有重复,他的键跟值是一样的集合: 可以存储任何数据类型,并且是唯一的(不重复的值)set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)重点set的唯一性let setArr = new Set(['a', 'b', 'c', 'c']); console.log(setArr); /...
2020-03-28 15:39:23
83
原创 ES6
ECMAScript和JavaScript的关系:ECMAScript是JavaScript的标准,JavaScript是ECMAScript的实现严格上说JavaScript和服务端没任何关系,服务端用的ECMAScriptECMAScript发展史:1996年11月 javaScript创造者Netscape公司将javaScript提交给ECMA(欧洲计算机制造联合会)1997年 ...
2020-03-23 12:43:53
102
原创 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
64
原创 JS时间线
js时间线js执行是单线程,并不是说整个浏览器都是单线程的,姑且就成为单线程吧js单线程的原因是为了避免多线程操作dom,引发的并发问题,dom属于基础数据,从多线程上讲,对它的操作要加事物,而js的操作最初就是为了操作dom,嗯,幸好是单线程的,总之一句话,凡是能够修改dom的一定得同步js 加载时间线1、创建document对象,开始解析web页面。创建HTMLHtmlElement对...
2020-03-12 11:02:51
69
原创 函数面试题
第一题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
480
原创 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
71
原创 getElementByTagName与querySelectorAll
区别1getElementByTagName:这种方式获取到的类数组,无法通过 forEach 进行遍历(可以通过for循环)querySelectorAll:可以通过forEach 进行遍历。区别2通过 getElementByTagName 获取这种方式获取到的类数组是动态的;而 querySelectorAll 这种方式获取到的是静态的(但是如果是 querySelectorAl...
2019-12-30 15:42:26
331
原创 作用域,作用域链
作用域:作用域就是一个独立的地盘,让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突。简单举个例子说明一下: //域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
63
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人