- 博客(57)
- 收藏
- 关注
RSS订阅原创 Vue组件
什么是组件？组件就是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <my-component>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：<div id="components-demo"> <my-component></my-component></div><script> new Vue({ el: '#components-demo' })<
2021-02-07 08:30:57
423
1
原创 js实现即时预览功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <form action=""> <input type="file" id='filebtn' multiple> <!-- files属性是一个filelist对象
2020-11-30 20:44:45
1882
原创 原生js实现图片懒加载
什么是图片懒加载？当我们打开一个页面时，先只加载可视区内的图片，当用户向下拖动滚动条时再继续加载后面的图片（也是只加载目前可视窗口区域内的图片）。为什么要用懒加载？当我们打开一个页面时，浏览器就会从上往下读取页面中的标签src中的地址，并且开启线程来进行加载。倘若用户的网速不给力或者此页面中的图片太多时，就会发生每张图片都加载了一点但是都没有加载完成，导致最后没有一个图片能正常显示。一方面让用户的体验非常之差，另一方面，加载每个图片都要向服务器发送请求，这会增大服务器的压力。使用懒加载的优势：
2020-07-13 00:49:52
386
原创 使用Node.js搭建静态伺服
//http协议模块const http = require("http");//文件系统模块const fs = require("fs");//创建服务，返回一个服务对象，监听对象动态const server = http.createServer();//监听request事件，只有客户端有请求，就会被监听到server.on("request",(request,response)=>{ console.log(request) // request 接收前台请求的
2020-07-12 23:47:29
456
原创 ES6：Promise
简介：Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。ES6将某一件事情可以发生异步操作的时候，分为了2个阶段 unsettled 和 settledunsettled 未决阶段settled 已决阶段事情总是从 未决阶段逐步发展到已决阶段，并且，未决阶段拥有控制通往已决阶段的能力。es6将程序分为了三种状态 pending resolved r
2020-07-05 23:24:37
209
原创 ES6：Set集合
简介：ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。Set函数可以接受一个可迭代对象（数组或字符串等）作为参数，用来初始化。const set = new Set([1, 2, 3, 4, 4]);[...set]// [1, 2, 3, 4]const s = new Set();[1, 2, 3, 3, 4, 2, 5].forEach(x => s.add(x));//循环将数组的每
2020-07-05 22:57:32
179
原创 ES6：Symbol简述
简介：ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。let s =
2020-06-27 21:47:21
273
原创 ES6:变量的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。作用： 简化书写长度，提高效率。基本用法：let obj = { name : "jack", age : 18, sex : "nan", class : 10}let name,age;({name,age} = obj);console.log(name,age);//jack 18一、数组的解构赋值以前，为变量赋值，只能直接指定值let a = 1;let b
2020-06-27 16:07:32
224
原创 TypeScript简介
TypeScript介绍：TypeScript是JavaScript类型的严格超集，它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。TypeScript添加了可选的静态类型和基于类的面向对象编程。typescript的诞生是因为在开发大规模javascript应用的过程中遇到javascript语言本身的短板。TypeScript和JavaScript的区别：TypeScript是微软公司推出的开源语言，使用Apache授权协议
2020-06-21 23:11:00
398
原创 TCP协议：三次握手和四次挥手简述
在TCP报文的报头中，有几个标志字段：1、SYN：同步连接序号，TCP SYN报文就是把这个标志设置为1，来请求建立连接；2、ACK：请求/应答状态。0为请求，1为应答；3、FIN：结束连线。FIN为0是结束连线请求，FIN为1表示结束连线；4、RST：连线复位，先断开连接，然后重新建立连接；5、PSH：通知协议栈尽快把TCP数据提交给上层程序处理；三次握手（建立TCP连接）交互双方需要知道双方均有接收和发送的能力，所以采用三次握手建立一个连接。首先客户端发送建立连接的请求，告诉服务端：我要
2020-06-21 22:27:28
762
原创 PHP和JavaScript的相互调用
PHP和js的互相调用，实质上就是数据类型的互转PHP与JS都是b/s脚本语言，浏览器集成了PHP的解释器和js的解释器，所以当浏览器读到关键字时就会调用相应的解释器来解析网页语言，因此php与js互相调用的本质是 参数（语法规则）的相互转化，就是利用PHP的echo函数将数据类型统一化。1、取值<?php$username='张三';echo "<script>var txt="."'$username';</script>"; //将username的值赋给j
2020-06-15 00:28:30
815
1
原创 JavaScript：保护对象
默认的情况下，js的所有对象都是可以扩展的，也就是说，任何时候都可以向对象中添加属性和方法。在开发过程中，很可能会意外的修改别人的代码，因此，需要将不让修改的对象保护起来。保护对象: 阻止程序对一个对象执行不合理的修改两个层面的保护：一. 保护单个属性: 阻止对对象中某个属性执行不合常理的修改1、ES3和ES5中主要通过闭包来对属性进行保护function () { var data = { name : '张三', sex: 'man',
2020-06-14 22:52:02
298
原创 PHP和JavaScript的区别
工作环境：JavaScript是工作在浏览器端的脚本语言，提交的数据是交给浏览器处理的。PHP是工作在服务器端的，提交的数据交给服务器处理，服务器再响应到浏览器。嵌入页面方式js嵌入方式：< script> </ script>php嵌入方式：<?php //代码内容?>变量声明js: var例：var a = 1； console.log(a);//输出变量aphp:$例：$a = 1; echo( $a )；//输
2020-06-07 21:23:02
981
原创 ajax简述
ajax简介：AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。为什么会有ajax：在ajax出现前传统的web交互需要用户触发一个HTTP请求服务器，然后服务器收到之后，再作出响应到用户，并且返回一个新页面，每当服务器处理客户端提交的请求时，用户只能空闲等待，并且哪怕只是一次很小的请求，只需获得服务端的一个简单数据，也会返回一个完整的网页，而用户每次都要浪费时间和带宽
2020-06-07 20:09:14
759
原创 C3：弹性盒子的基本属性
设置在父元素上的值：属性描述flex-direction设置或检索伸缩盒对象的子元素在父容器中的位置。（默认row）flex-wrap设置或检索伸缩盒对象的子元素超出父容器时是否换行。（默认nowrap）flex-flow复合属性。设置或检索伸缩盒对象的子元素排列方式。align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。（默认...
2020-05-31 22:16:27
524
原创 鼠标滚轮插件jquery.mousewheel.js的简单使用
jquery中没有鼠标滚轮事件，那么可以使用jquery的滚轮事件插件jquery.mousewheel.js。jQuery鼠标滚轮插件是一个jQuery插件，添加了跨浏览器的鼠标滚轮支持和delta标准化。GitHub主页：https://github.com/jquery/jquery-mousewheel要使用这个插件，只需将mousewheel事件绑定到一个元素。它还提供了两个辅助方法，分别称为mousewheel和unmousewheel，它们的作用与jQuery中的其他事件辅助方法一样。
2020-05-31 21:50:41
1257
原创 jQuery常用的工具方法
$.type()用于确定JavaScript 对象的类型[[Class]] 。和原生的typeof类似，都是用于判断数据类型，但typeof方法只能判断基本类型，$.type()更加细分，可以精确判断各种类型。例：console.log(typeof (a));//undefinedconsole.log(typeof ([]));//objectconsole.log(typeof ({}));//objectconsole.log($.type(a))//ReferenceError: a
2020-05-24 23:04:27
262
原创 jQuery常用的绑定事件处理器方法
.on()描述: 在选定的元素上绑定一个或多个事件处理函数。语法：1、 .on( events [, selector ] [, data ], fn )events: 一个或多个用空格分隔的事件类型和可选的命名空间，如”click“或”keydown.myPlugin” 。selector: 一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的null或省略，当它到达选定的元素，事件总是触发。data: 当一个事件被触发时要传递event.data给事件处理函数。fn: 该事件
2020-05-24 22:29:42
460
原创 jQuery：基本过滤选择器
选择指定类型元素的第一个：例： //选择第一个div元素 $('div:first')选择指定类型元素的最后一个：例： //选择最后一个div元素 $('div:last')在匹配的集合中选择索引值为index的元素 //选择索引值等于3的元素 $(':eq(3)').选择索引值为偶数的元素，从 0 开始计数。例： //选择索引值为偶数 的div元素 $('div:even').选择所引值为奇数的元素，从 0 开始计数。
2020-05-17 23:06:13
616
原创 jQuery:添加、删除父元素
添加父元素一、wrap()作用：在每个匹配的元素外层包上一个html元素。语法：1、 .wrap( wrappingElement )wrappingElement：可以是一个HTML片段，选择表达式，jQuery对象，或者DOM元素，用来包在匹配元素的外层。例：<div class = 'box'></div><div id = 'wrap'></div><script> //给class为box的div加上一个id为wra
2020-05-17 22:22:54
2291
原创 jQuery选择器
选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。一、 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素。$("div") //选取 所有div 元素。$("p.intro") // 选取所有 class="intro" 的 <p> 元素。$("p#demo") // 选取所有 id="demo" 的 <p> 元素。$(" * "); //通配符 匹配所有元素二、 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性
2020-05-10 23:12:15
130
原创 Bootstrapt3和Bootstrapt4的区别
一、源码编写不同bootstrap3的源码是采用 Less 语言编写的。bootstrap4的源码是采用 Sass 语言编写的；二、栅格系统不同bootstrap3中，栅格系统分为四个默认响应层，分别是：特小（col-xs-） 适配手机(<768px)小（col-sm-） 适配平板(≥768px)中（col-md-） 适配电脑(≥992px)大（col-lg-） 适配宽屏电脑(≥1200px)bootstrap4中，栅格系统分为五个默认响应层，分别是：小（col-）(<
2020-05-10 22:18:10
280
原创 C3：媒体查询
简介：媒体查询可以根据不同设备（比如屏幕、打印机等）、不同属性（比如视图的宽高、手机的横屏竖屏、屏幕的分辨率等）来自动的调整元素显示的样式，让网页能够在不同的设备下进行预览，可以用作响应式布局。媒体类型：screen : 计算机显示器print:打印机tv:电视类all:所有braille:触觉反馈设备embossed:盲文印刷设备handheld:小型或手持设备projec...
2020-05-06 00:44:24
416
原创 C3:matrix()方法的简单使用
matrix()： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵矩阵的乘法：注意：1、当矩阵A的列数（column）等于矩阵B的行数（row）时，A与B可以相乘。2、矩阵C的行数等于矩阵A的行数，C的列数等于B的列数。3、乘积C的第m行第n列的元素等于矩阵A的第m行的元素与矩阵B的第n列对应元素乘积之和。...
2020-05-06 00:07:34
727
原创 Bootstrap:列偏移和列排序
列偏移：使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。实例：<!-- 初始结构 --><div class="container"> <div...
2020-05-05 21:38:17
2308
原创 Bootstrap3:栅格系统的基本用法
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。简介：栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。栅格选项：bootstrap3.x使用了四种栅格选项来形成...
2020-05-05 20:34:53
3013
原创 C3：利用Transform（变换）和Animations（关键帧动画）实现旋转的照片墙
Animation（关键帧动画）：属性描述animation：复合属性。检索或设置对象所应用的动画特效animation-name：检索或设置对象所应用的动画名称animation-duration：检索或设置对象动画的持续时间animation-timing-function：检索或设置对象动画的过渡类型animation-delay：检索...
2020-04-26 23:48:53
958
原创 C3:Transitions(过渡动画)的简单用法
定义和用法：transition 属性是一个简写属性，用于设置四个过渡属性：transition-property ： 检索或设置对象中的参与过渡的属性transition-duration ：检索或设置对象过渡的持续时间transition-timing-function ： 检索或设置对象中过渡的动画类型transition-delay ：检索或设置对象延迟过渡的时间注意：请始终...
2020-04-26 22:53:11
1527
原创 CSS3：使用text-shadow制作文字特效
在C3之前，我们想要实现一些字体的特殊样式，只能通过找美工制作图片，用图片来实现想要的样式效果，在c3新增text-shadow后，我们可以通过对文本阴影的设置，来实现一些简单的样式效果，替代以前繁琐的图片。属性和介绍：text-shadow 属性应用于阴影文本。默认值：none继承：yes版本：CSS3JavaScript 语法：object.styl...
2020-04-20 15:31:31
343
原创 CSS3中伪类选择器nth-child(n)和nth-of-type(n)的区别
:nth-child(n)该选择器匹配父元素中的第 n 个子元素，元素类型没有限制。n 可以是一个数字，一个关键字，或者一个公式。注意:该选择器匹配同类型中的第 n 个同级兄弟元素。:nth-of-type(n)该选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.n 可以是数字、关键词或公式。注意：下标n是从1开始实例1：获取第一个li标签li:nth-child(...
2020-04-20 14:08:29
956
原创 H5新增特性-canvas和svg的异同
简介：在HTML5中，新增了canvas和svg元素，它们都可以在浏览器中创建图像，在H5中看似canvas与svg很像，但是，他们有着根本的区别。canvasCanvas是HTML5中提供的新元素，通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。绘制的是位图，如果进行放大操作，会导致失真。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器...
2020-04-12 23:36:51
539
原创 如何在web页面中使用百度地图API
在web开发中，内嵌地图的需求很常见，比如外卖软件显示附近的商家，更好的规划路线来提供服务，或是社交软件通过地图找到附近的人等。要使用百度地图API，首先要去百度地图开放平台，注册成为开发者然后找到右上角导航栏中的开发文档，选择JavaScript API，根据提示申请秘钥下面是我根据百度提示文档写的一份示例：<!DOCTYPE html><html lang="en"...
2020-04-12 23:01:35
1040
原创 ES6新增字符串模板和解构赋值
一、字符串模板当我们需要拼接字符串时,往往会遇到一些不便，比如变量太多，+用的太多导致自己都看不清哪些内容，代码长还不清晰，换行需要加转义字符等等。旧语法： var name = "张三"; var year = "1995"; var month = "6"; console.log(name+'是'+year+"年"+month+'月份\n出生的')es6的字符串模板：va...
2020-03-30 11:15:02
231
原创 ES6新增let、const关键字
一、let关键字之前我们声明一个变量时，都是使用关键字var，那新增加的let和var有什么不同呢？var的不足之处一：var arr=[];for (var i=0;i<10;i++){ arr[i]=function(){ console.log(i); };} arr[8](); // console.log(i); 的结果为 ...
2020-03-30 10:37:56
161
原创 ES6中函数的新增用法
ES6 是ECMAScript的第6个版本ECMAScript发展史:1996年11月 javaScript创造者Netscape公司将javaScript提交给ECMA（欧洲计算机制造联合会）1997年 ECMA发布262号标准文件的第一版（ECMA-262 1th），用于规定浏览器脚本语言标准ECMAScript 1.01998年6月 ECMAScript 2.0 发布1999年12...
2020-03-22 21:18:39
310
原创 Js的同步、异步及时间线
一、同步加载同步加载又称为阻塞模式，是我们常用的默认的模式。<script type="text/javascript" src="load.js"></script><script type="text/javascript"> console.log('Hello');</script>当浏览器解析文档遇到script标签时，...
2020-03-11 20:44:13
278
原创 js函数面试题
1.第一题a();functon a(){ console.log('a');}b();var b =function b(){ console.log('b');}//请问，函数的执行结果是什么？答案：a undefined分析：这题考的是预编译，function声明的a提前声明，值为函数体，var关键字声明的b提前声明，值为undefined，所以在函数执行前调用时，a...
2020-02-14 14:22:12
628
原创 js的原型和原型链
一、原型所有引用类型（函数，数组，对象）都拥有__proto__属性（隐式原型） 所有函数拥有prototype属性（显式原型）（仅限函数） 原型对象：拥有prototype属性的对象，在定义函数时就被创建...
2020-02-14 12:41:10
96
原创 Js函数作用域链
作用域（scope）通常来说一段程序代码中使用的变量和函数并不总是可用的，限定其可用性的范围即作用域，作用域的使用提高了程序逻辑的局部性，增强程序的可靠性，减少名字冲突。作用域分为全局作用域和局部作用域全局作用域：代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。局部作用域：在固定的代码片段才能被访问。作用域链（scope chain）在JS中创建函数时会创...
2020-02-13 14:24:04
451
原创 call()和apply()方法的用途和区别
JavaScript中的每个对象都有一个call()方法和一个apply()方法，它们的语法分别为：//call()方法function.call(thisObj,args1,args2);//apply()方法function.apply(thisObj,[argArray])它们各自的定义：call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, arg...
2020-01-05 22:28:51
186
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人