- 博客(39)
- 收藏
- 关注
RSS订阅转载 将html转为图片
① jquery库（看个人需要）：②dom-to-image.js: https://github.com/tsayen/dom-to-image③FileSaver.js：https://github.com/eligrey/FileSaver.js<html><head><script type="text/javascript" src="C:/Users/liushuofu/Desktop/jquery-1.6.4.min.js"></script
2020-07-02 10:16:24
682
原创 ES6解构赋值
解构一、数组解构ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为变量赋值，只能直接指定值。let a = 1;let b = 2;let c = 3;ES6 允许写成下面这样。let [a, b, c] = [1, 2, 3];上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。本质上，这种写法属于...
2019-11-01 22:40:45
805
原创 ES6
1.let命令一、不存在变量提升// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;二、暂时性死区var tmp = 123;if (true) { tmp = 'abc'; // Referen...
2019-10-29 22:47:03
133
原创 jsonp的原理与实现
jsonp是一种跨域通信的手段，它的原理其实很简单：首先是利用script标签的src属性来实现跨域。通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。由于使用script标签的src属性，因此只支持get方法1.实现流程设定一个script标签<script src="http://jsonp.js?callback=xx...
2019-10-27 22:05:26
156
原创 常见的JS面试题
基本类型有哪几种？null 是对象吗？基本数据类型和复杂数据类型存储有什么区别？基本类型有6种，分别是undefined,null,bool,string,number,symbol(ES6新增)。虽然 typeof null 返回的值是 object,但是null不是对象，而是基本数据类型的一种。基本数据类型存储在栈内存，存储的是值。复杂数据类型的值存储在堆内存，地址（指向堆中的值...
2019-10-22 22:37:19
590
原创 module.exports和exports
在 Node 中，每个模块内部都有一个自己的 module 对象；该 module 对象中，有一个成员叫：exports 对象，默认是一个空对象;也就是说，如果需要对外导出成员，只需要把导出的成员挂载到 module.exports 中；谁来 require 该文件，谁就得到 module.exports。在每个模块中都默认存在：console.log(exports === module....
2019-10-21 23:35:40
740
原创 npm命令和node中的模块
npmnpm init 生成 package.json 文件npm init -y 可以跳过向导，快速生成npm install 一次性把 dependencies 选项中的依赖项全部安装.简写：npm inpm install 包名 只下载当前包 简写：npm i 包名npm uninstall 包名只删除当前包，如果有依赖项，会依然保存；npm un 包名npm uninstal...
2019-10-20 22:00:19
247
原创 CSS 变量
声明 CSS 变量的时候，发现跟使用普通属性是一样的，这里说的“一样”是指：使用的位置一样，并且使用的方式也一样。只不过跟普通属性相比，CSS 变量多了两个连字符 -- 作为前缀，本质上就是个属性。而且这类属性都是开发者自己起的，属性值也是我们设置的，自然就是“自定义属性”了。不过特殊的地方在于，我们可以使用 var() 函数解析出这类属性的属性值：span { /* 局部变量 --...
2019-10-18 23:46:20
155
原创 经典的CSS布局问题
水平居中对于行内元素: text-align: center;对于确定宽度的块级元素：width和margin实现。margin: 0 auto;绝对定位和margin-left: -width/2, 前提是父元素position: relative对于宽度未知的块级元素：table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为di...
2019-10-15 23:53:12
121
原创 CSS小技巧
1. 超出部分显示省略号// 单行文本.wrap { overflow:hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/*超出部分显示省略号*/ white-space:nowrap;/*规定段落中的文本不进行换行 */}// 多行文本.wrap { width: 100%; overflow: hidden; displ...
2019-10-14 23:57:07
138
1
原创 js中的==和===
全等运算符 ===全等和不全等操作符遵循以下基本规则（IEA规则)：如果两个操作数有不同的类型，它们不是严格相等的如果两个操作数都为 null，则它们是严格相等的如果两个操作数都为 undefined，它们是严格相等的如果一个或两个操作数都是 NaN，它们就不是严格相等的如果两个操作数都为 true 或都为 false，它们是严格相等的如果两个操作数都是 number 类型并且具有...
2019-10-13 21:38:23
266
原创 前端常见面试题一
1.元素js的事件委托js事件委托就是利用冒泡的原理，把本应该添加到某个元素上的事件委托给他的父级，从而减少DOM交互达到网页优化var ulObj= document.getElementById("list"); ulObj.onclick = function(e){ //只有点击li时才会触发相应代码执行 var e = e || ev...
2019-10-08 22:00:28
680
原创 JS 创建、读取和删除cookie
Cookie 是一小段文本信息，伴随着用户请求和页面在 Web 服务器和浏览器之间传递。用户每次访问站点时，Web 应用程序都可以读取 Cookie 包含的信息。Cookie的出现是为了解决保存用户信息的问题。当用户访问网页时，用户的名字可以存储在cookie中。下次用户访问页面时，cookie会记住用户名Cookie 能在所有网页中记住用户的信息。它以字符串的形式包含信息，并键值对的形...
2019-10-06 22:33:20
218
转载 createDocumentFragment()用法
1.createDocumentFragment()方法，是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。2.DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是...
2019-09-22 23:00:57
297
原创 Javascript原型链
function Foo(){ //属性和方法}var f1 = new Foo();var f2 = new Foo(); var o1 = new Object();var o2 = new Object();上图从结构上分为实例对象、Functions函数对象、prototype原型对象三部分，图中f1、f2的原型链我特意标成了红色，Foo的原型链为紫色。每个对象都有...
2019-09-20 23:19:55
151
转载 立即执行函数表达式IIFE
一、IIFE解释全拼Imdiately Invoked Function Expression，立即执行的函数表达式。像如下的代码所示，就是一个匿名立即执行函数:(function(window, undefined){ // 代码... })(window);二、括号的意义2.1 包住function(){}的括号的意义这个括号的目的，是为了把function(){}转化...
2019-09-18 23:23:51
327
1
转载 JS 中几种轻松处理'this'指向方式
1.方法分离问题假设有一个类Person包含字段firstName和lastName。此外，它还有一个方法getFullName()，该方法返回此人的全名。如下所示：function Person(firstName, lastName) {this.firstName = firstName;this.lastName = lastName;this.getFullName = fun...
2019-09-17 23:16:32
307
转载 JavaScript正则表达式进阶指南
本文用JavaScript的exec方法来测试正则表达式。例如，正则表达式/F.g/会匹配“以F开头，以g结尾的字符串”，因此可以匹配"Hello, Fundebug!"中的Fundebug*，exec方法会返回一个数组，其第一个元素为所匹配的子字符串。/F.*g/.exec(“Hello, Fundebug!”)[0]// ‘Fundebug’非贪婪匹配默认情况下，正则表达式的量词、+...
2019-09-16 23:14:01
115
转载 Canvas绘图详解
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持<canvas> 及其属性和方法。 注释：Internet...
2019-09-15 23:00:33
1061
原创 移动端 js touch事件
触摸事件包含4个接口。TouchEvent代表当触摸行为在平面上变化的时候发生的事件.Touch代表用户手指与触摸平面间的一个接触点.TouchList代表一系列的Touch; 一般在用户多个手指同时接触触控平面时使用这个接口.DocumentTouch包含了一些创建 Touch对象与TouchList对象的便捷方法.事件类型：touchstart : 触摸开始（手指放在触摸屏...
2019-09-11 22:58:02
855
转载 javaScript和JSON
1.1 JSON和javaScriptJSON是一种数据交换格式。JSON的全称是JavaScript Object Notation，翻译为JavaScript对象表示法。JSON的这个全称，无疑让很多人既兴奋又困惑，兴奋的人直接认为这就是JavaScript中的对象，困惑的人觉察出JSON数据和JavaScript对象好像有些不一样。接下来我们先谈一谈JSON数据和JavaScript的关...
2019-09-10 23:19:33
601
原创 canvas总结
1.注意点：– canvas 图像的渲染有别于html图像的渲染，canvas 的渲染极快，不会出现代码覆盖后延迟渲染的问题写canvas 代码一定要具有同步思想– 在获取上下文时，一定要先判断浏览器是否能获取到getContext()方法– 画布宽高的问题画布默认的宽高为300*150一定要用html的attribute的形式来定义画布的宽高通过css形式定义会缩放画布内的图像...
2019-09-09 23:26:05
323
原创 js中的this指向
1.全局作用域或者普通函数中this指向全局对象window // 在全局作用域中直接打印 this console.log(this); // 指向 window // 普通函数中的this function foo (){ console.log(this); //也是指向 window }2.方法调用时，谁调用则 this 指向谁// 事件中的thisvar btn...
2019-09-08 23:17:09
381
原创 input标签的新增属性
autocomplete:规定input 元素输入字段是否应该启用自动完成功能。可选值：on，默认，规定启用自动完成功能off，规定禁用自动完成功能注意： autocomplete 属性适用于下面的 input 类型：text、search、url、tel、email、password、datepickers、range 和 color。autofocus：属性规定当页面加载时 ...
2019-09-04 23:12:21
658
原创 CSS之hack
HACK就是只有特定的浏览器才能识别这段hack代码一般来说，CSS hack有三种表现形式：CSS属性级HackCSS选择器级HackIE条件级HackCSS 属性前缀IE6级以下版本生效 _div{_color:red;}该代码只在IE6及以下浏览器中才能被识别出来仅IE6中生效 -div{-color:black;}该样式只在 ie6 中才能被识别...
2019-09-02 22:47:24
231
原创 CSS3之pointer-events属性
属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。该属性有很多个属性值，但对浏览器来说，只有 auto 和 none 两个属性值可以用， 其它属性值都是只针对 svg 有效auto效果和没有定义 pointer-events 属性相同，为默认属性值，当前情况下，鼠标不会击穿当前层。none被只当该属性值的元素，不再是鼠标事件的目标，鼠标不再监听当前层，而...
2019-08-29 23:21:55
337
原创 关于flex弹性盒模型
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内容器也可以使用 flex 布局：display: inline-flex;注意:设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称”...
2019-08-28 22:22:14
150
原创 原生JS中的事件委托target
事件委托事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能；将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，就会一致冒泡到祖先元素，从而通过祖先元素的响应函数来触发事件。例如：我们点击按钮，新增一个便签时，会无法为新添加的标签绑定事件<body><button >添加超链接</button><ul id="...
2019-08-19 23:17:57
1175
原创 字符串和正则相关的方法
split()可以将一个字符串拆分为数组方法中可以传递一个正则表达式作为参数，该方法会根据正则表达式去拆分字符串，返回一个数组该方法会默认全局匹配search()可以搜索字符串中是否含有指定内容如果搜索到指定内容，则返回第一次出现的索引，如果没有搜索到则返回-1也可以传入一个正则表达式作为参数，根据正则表达式去检索字符串该方法返回查找内容第一次出现的索引，即使设置全局匹配也是...
2019-08-15 22:35:27
111
原创 JS事件的绑定
使用 对象.事件 = 函数 的形式绑定响应函数时，只能为同一元素的同一事件绑定依次响应事件，如果绑定多次，则后面的函数会覆盖前面的函数。所以我们可以使用 addEventListener() 和 attachEvent() 方法来为同一元素绑定多次事件。addEventListener() 参数： 1、事件的字符串，不要on (click) 2、回调函数，当事...
2019-08-01 22:35:19
82
转载 innerText和textContent的区别
innerText 和 textContent 的作用都是获取元素之间的文本内容，但是它们的在获取到文本内容的结果也有很大的不同innerText 的值依赖于浏览器的显示结果，textContent 依赖于源码的显示结果<div> <span>123</span> <span>abc</span></div>...
2019-07-29 22:41:22
1080
翻译 JS中的数组方法
静态方法Array.isArray() 返回一个布尔值，表示参数是否是一个数组var arr = [1,2,3,4];console.log(type arr); //返回类型是 objectconsole.log(arr instanceof Array) // 也会返回 true ，//但是console.log(arr instanceof Object) //同...
2019-07-25 23:02:44
2002
原创 JS入门for 、forEach 、 for...in..循环
forfor(){} 循环是ES中最原始的循环方法，可以兼容所有的浏览器for 循环只能遍历数组，不能遍历伪数组对象forEachES5 方法，不支持IE8及以下浏览器它的语句结构里面不支持break、continue和return语句 ，break和continue会直接报错，不会读取return语句只能遍历数组，无法遍历伪数组对象语法：回调函数的参数分别为：元素、索引、...
2019-07-24 21:50:00
512
原创 css选择器中的兄弟选择器+和~
+一般情况下，我们常使用 + 来选择指定元素的兄弟元素例如：div + p {} 代表选取 div 后面紧跟着的一个 p 元素，如果没有兄弟元素 p 或者 p元素 不是紧跟在 div 后面，就无法选取到。~~ 兄弟选择器会选取指定元素后面所有的兄弟元素例如： div ~ p{} 会选择 div 后面所有的是 p元素的兄弟元素，有多少个就会选取多少个。...
2019-07-21 20:04:09
1034
原创 JS入门之function
函数的创建1.构造函数创建函数var fn = nwe Function(JS语句...);js代码会在调用时被执行： fn();但是在实际开发中很少使用构造函数来创建一个函数对象2.使用函数声明来创建一个函数function fn(形参1，形参2，....，形参N){ js语句... }js代码也是在调用时执行：fn(实参1，实参2，...，实参n);形参和实参是根据需求...
2019-07-19 20:12:42
300
原创 JS入门while、do...while、for循环
whiel基本语法： while (循环条件) { 循环体 }当循环条件为true时，执行循环体；当循环条件为false时，结束循环。do…whiledo…while循环和while循环非常像，二者经常可以相互替代，但是do…while的特点是不管条件成不成立，都会执行一次。基础语法： do{ 循环体； }while(循环条件)；forwhile和do…wh...
2019-07-17 21:43:59
121
原创 JS入门02
###一级运算符++ 和 –*前置++ var num1 = 5; ++ num1; //6 var num2 = 6; console.log(num1 + ++ num2);//13*后置++var num1 = 5;num1 ++; //6var num2 = 6 console.log(num1 + num2 ++);//12总结前置++：先加1，后...
2019-07-16 21:12:06
51
原创 JS入门
###变量变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据。使用变量是为了更便捷的获取和修改内存中的数据。变量的定义：使用 var 关键字定义//可以先定义再赋值var name;name = "tom";//也可以定时的时候就赋值（推荐写法）var name = "tom";//可以同时声明多个变量，再一一赋值var age , name;age...
2019-07-15 22:40:46
58
原创 关于元素塌陷的问题
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
2019-07-10 22:02:22
589
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人