- 博客(80)
- 收藏
- 关注
RSS订阅转载 js防抖和节流
防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。（信我，你看完肯定就懂了）从滚动条监听的例子说起先说一个常见的功能，很多网站会提供这么一个按钮：用于返回顶部。这个按钮只会在滚动到距离顶部一定位置之后才出现，那么我们现在抽象出这个功能需求--监听浏览器滚动事件，返回当前滚条与顶部的距离这个需求很简单，直接写:function showTop () { var scrollTop = do.
2021-02-22 10:50:20
288
转载 CSS如何实现单行、多行文本溢出显示省略号
单行文本：方法/步骤 1 根据自己的需求编写好模块（如果你不是新手，直接看第二步！） HTML代码： <div class="demo"><p>内容</p></div> CSS代码： .demo{ width: 300px; height: 30px; line-height: 30px; border...
2019-08-30 14:41:37
646
转载 用 async/await 来处理异步
昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，是时候学习一下了。 先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数async function ...
2019-05-16 17:34:25
552
原创 slice()、splice()、substring()、substr()、split()、join()的用法与区别
1.JavaScript slice() 方法定义和用法slice() 方法可从已有的数组中返回选定的元素。语法arrayObject.slice(start,end)参数 描述 start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。 end 可选。规定...
2018-12-18 10:55:51
1905
1
原创 px、em、rem、rpx 用法 与 区别
PXpx像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。EMem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前...
2018-12-11 10:25:01
33618
4
原创 使用charCodeAt()和charAt()方法，根据Unicode 编码，转换字符
1.charCodeAt() 方法charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。2.charAt() 方法charAt() 方法可返回指定位置的字符。请注意，Ja...
2018-12-04 14:31:16
34842
原创 word-wrap、word-break、white-space、word-spacing、text-overflow、overflow 的联系与区别
1.CSS3 word-wrap 属性word-wrap 属性允许长单词或 URL 地址换行到下一行。值 描述 normal 只在允许的断字点换行（浏览器保持默认处理）。 break-word 在长单词或 URL 地址内部进行换行。 实例：2.CSS3 word-break 属性word-break 属性规定自动换行的处理方法。值 描述...
2018-11-28 15:06:31
488
原创 setInterval、setTimeout、animation、animate的区别
1.setIntervalsetInterval()方法可按照指定的周期来调用函数或者计算表达式（以毫秒为单位）语法：setInterval(函数表达式，毫秒数)；setInterval()会不停的调用函数，直到clearInterval()被调用或者窗口被关闭，由 setInterval()返回的ID值可用作clearInterval()方法的参数。例如：setInter...
2018-11-27 17:06:53
1561
原创 Math.round()，Math.ceil()，Math.floor()，toFixed()的区别
1.Math.round()：根据“round”的字面意思“附近、周围”，可以猜测该函数是求一个附近的整数，看下面几个例子就明白。小数点后第一位<5正数：Math.round(11.46)=11负数：Math.round(-11.46)=-11小数点后第一位>5正数：Math.round(11.68)=12负数：Math.round(-11.68)=-12...
2018-08-03 10:46:01
1775
原创 事件冒泡与事件捕获
事件传递有两种方式：冒泡与捕获。事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。在 捕获 中，外...
2018-07-03 14:52:13
758
原创 单线程与多线程的区别
什么是进程？当一个程序开始运行时，它就是一个进程，进程包括运行中的程序和程序所使用到的内存和系统资源。而一个进程又是由多个线程所组成的。什么是线程？线程是程序中的一个执行流，每个线程都有自己的专有寄存器(栈指针、程序计数器等)，但代码区是共享的，即不同的线程可以执行同样的函数。什么是多线程？多线程是指程序中包含多个执行流，即在一个程序中可以同时运行多个不同的线程来执行不同的任务，也就是说允许单个程...
2018-07-02 13:33:12
49953
6
转载 JS如何区分Object与Aarry的六种方法
一、经常遇见的问题：JS中判断一个对象的类型时，通常使用typeof，这时候问题就来了，因为typeof()辨别数组的时候返回的是object,所以JS中判断一个对象是不是数组需要一些特殊的处理方式，下面将介绍个人总结的六种处理方法。二、开门见山开发中要判断一个对象是不是数组，推荐使用下面这个函数：[javascript] view plain copyfunction isArray(obj){...
2018-03-27 13:38:06
1446
转载 JS几种数组遍历方式总结
JS数组遍历的几种方式JS数组遍历，基本就是for,forin,foreach,forof,map等等一些方法，以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代码如下:for(j = 0; j < arr.length; j++) { } 简要说明: 最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间第二种:优化版for循环代码如下...
2018-03-14 15:25:41
241712
14
原创 DPI与PPI的区别
开发中不免会遇到分辨率、DPI、PPI和屏幕尺寸等术语，那就弄弄清楚这些概念的真正含义。分辨率分辨率这个词在很多地方都有，比如相机、视频、扫描仪。这里说的就是显示器的分辨率。显示器是由一个个像素点(pixel)所组成的，一般所说的显示器分辨率是1280x720就表示这个显示器水平方向有1280个像素，垂直方向上有720个像素。但是并非分辨率越高屏幕显示效果越好，还需要根据屏幕的大小来决定。也就是要...
2018-03-06 16:19:01
17615
2
转载 defer和async的区别
先来试个一句话解释仨，当浏览器碰到 script 脚本的时候：<script src="script.js"></script>没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。<script async src="script.js"&...
2018-02-13 14:50:00
820
转载 总结伪类与伪元素
熟悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发，区分这两者的区别，并且列出大部分伪类与伪元素的具体用法，即使你有用过伪类与伪元素，但里面总有一两个你没见过的吧。 1. 伪类与伪元素 先说一说为什么css要引入伪元素和伪类，以下是css2.1 Selectors章节中对伪类与伪元素的描述： CSS introd
2018-01-25 14:37:43
488
转载 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，就是接下来要介绍的这两个伪元素了。Creative Button Styles
2018-01-24 16:19:22
618
转载 HTTP状态
在网站建设的实际应用中，容易出现很多小小的失误，就像mysql当初优化不到位，影响整体网站的浏览效果一样，其实，网站的常规http状态码的表现也是一样，Google无法验证网站几种解决办法，提及到由于404状态页面设置不正常，导致了google管理员工具无法验证的情况，当然，影响的不仅仅是这一方面，影响的更是网站的整体浏览效果。因此，比较清楚详细的了解http状态码的具体含义，对于一个网站站长来说
2018-01-12 10:44:34
352
转载 ES6，import时如何正确使用花括号'{ }'
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。而我们这里要说的是在使用import语法引用模块时，如何正确使用{}。假如有一个B.js，想要通过im
2018-01-12 08:47:45
11879
2
转载 javascritp中false、0、空字符串、null和undefined区别
相等运算符 （==、!=） 如果两表达式的类型不同，则试图将它们转换为字符串、数字或 Boolean 量。 NaN 与包括其本身在内的任何值都不相等。 负零等于正零。 null 与 null 和 undefined 相等。 相同的字符串、数值上相等的数字、相同的对象、相同的 Boolean 值或者（当类型不同时）能被强制转化为上述情况之一，均被认为是相等的。 其他比较均
2017-12-28 14:37:22
2433
原创 clientHeight、scrollHeight、offsetHeight和scrollTop之间区别
屏幕可见区域高（内容的可视高度，不包括边框，边距或滚动条）：document.body.clientHeight正文内容高（整个元素的高度，包括带滚动条的隐蔽的地方）：document.body.scrollHeight内容高+padding+边框：document.body.offsetHeight滚动条已经滚动的高度：document.body.scrollTop屏幕分辨率高：
2017-09-29 16:36:17
1543
转载 JS 控制CSS样式表
下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... .orig { display: none; } 你想要改变把他的display属性由none改为inline。 解决办法： 在IE里： document.styleSheets[0].rules[0].style.display =
2017-09-29 11:20:29
1303
转载 ES6新特性概览
箭头操作符如果你会C#或者Java，你肯定知道lambda表达式，ES6中新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。我们知道在JS中回调是经常的事，而一般回调又以匿名函数的形式出现，每次都需要写一个function，甚是繁琐。当引入箭头操作符后可以方便地写回调了。请看下面的例子。
2017-09-08 16:54:26
363
转载 Flex 布局教程
Flex 布局教程：语法篇作者： 阮一峰日期： 2015年7月10日网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年
2017-08-17 15:33:53
324
转载 fetch详解
在 JS 中使用 fetch 更加高效地进行网络请求在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架，此文将简要介绍下 fetch 的基本使用。我的源博客地址：http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/免费的高质量软件开发视频教程 https://devopen.clu
2017-08-17 11:10:17
12260
1
原创 window.open详解
语法window.open(URL,name,features,replace)参数描述URL一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。name一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符
2017-07-21 17:39:09
1239
转载 package.json文件详解
概述每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。下面是一个最简单的package.json文件，只定义两项元数据：项目名称和项目版本。{ "name" : "
2017-07-06 13:13:57
5098
1
转载 less详解
什么是LESSCSSLESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。语言特性快速预览：变量：变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的
2017-07-05 11:26:14
1378
转载 es6 扩展运算符 三个点（...）
1 含义扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。[javascript] view plain copyconsole.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5)
2017-07-04 14:12:22
454
转载 可以输入也可以下拉选择的select
我们知道，一般select下拉框是只能选择的，不能用来输入内容的。而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时，我们可以让select变成text，允许用户输入想要的内容，同时还可以在输入的时候将包含关键字的项也列出来，供快速选择。查看演示 下载源码本文将用实例和大家分享一款基于jQuery的下拉框插件，它允许用户输入内容，同时下拉选项中会及时匹配相关选项，支持键
2017-06-20 09:58:59
4737
原创 react引入公用js文件
例:test.js中click_alert函数var CHAT = { click_alert:function(){ alert('触发函数'); },};export default CHAT;demo.jsx文件中使用click_alert函数:import React from 'react';import ReactDOM from 'react-dom';im...
2017-06-14 15:56:56
33185
1
原创 (function(){...})() 与 (function(){...}())
JS中函数有两种命名方式1、一种是声明式。而声明式会导致函数提升，function会被解释器优先编译。即我们用声明式写函数，可以在任何区域声明，不会影响我们调用。function XXX(){}112、一种是函数表达式函数表达式我们经常使用，而函数表达式中的function则不会出现函数提升。而是JS解释器逐行解释，到了这一句才会解释。因此如果调用在函数表达式之
2017-06-14 10:21:00
504
转载 socket.io 中文文档
1. 服务端io.on('connection',function(socket));监听客户端连接,回调函数会传递本次连接的socketio.sockets.emit('String',data);给所有客户端广播消息io.sockets.socket(socketid).emit('String', data);给指定的客户端发送消息so
2017-06-12 11:25:33
14740
1
转载 使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术，也被称作Realtime技术。这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新。它有着广泛的应用场景，比如在线聊天室、在线客服系统、评论系统、WebIM等。WebSocket简介谈到Web实时推送，就不得不说WebSocket。在WebSocket出现之前，很多网站为了实现实时推送技术，通常采用的方案是轮询 (Polling)和Com
2017-06-07 14:56:25
976
原创 js对象浅拷贝和深拷贝详解
1.浅拷贝拷贝就是把父对像的属性，全部拷贝给子对象。下面这个函数，就是在做拷贝：var Chinese = { nation:'中国'}var Doctor = { career:'医生'} function extendCopy(p) { var c = {}; for (var i in p) { c[i] = p[i]; ...
2017-06-06 11:05:36
992
转载 JSON.parse()和JSON.stringify()
parse用于从一个字符串中解析出json对象,如var str = '{"name":"huangxiaojian","age":"23"}'结果：JSON.parse(str)Objectage: "23"name: "huangxiaojian"__proto__: Object注意：单引号写在{}外，每个属性名都必须用双引号，否则
2017-06-06 10:22:26
380
原创 HTML <label> 标签的 for 属性
实例带有两个输入字段和相关标记的简单 HTML 表单： for="male">Male for="female">Female 定义和用法for 属性规定 label 与哪个表单元素绑定。
2017-06-05 13:24:44
977
原创 $(window).width()与window.innerWidth的区别
window.innerWidth能获得什么数据？在自适应设计中，需要用js来判断浏览器宽度，从而调整网页宽度和布局，我一开始用的是window.innerWidth。window.innerWidth能获取当前窗口的宽度(包含滚动条)，当浏览器宽度调整时，这个值也会跟着变化。但是，window.innerWidth在IE8浏览器是无效的。所以，需要使用一个代替品，那就是$
2017-06-02 14:00:59
22379
2
转载 background-position 用法详细介绍
语法： background-position : length || length background-position : position || position 取值： length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position : top | center | bottom | left | center | ri
2017-06-01 13:09:48
23304
转载 js判断数据类型
js六大数据类型：number、string、object、Boolean、null、undefinedstring： 由单引号或双引号来说明，如"string"number：什么整数啊浮点数啊都叫数字，你懂的~Boolean: 就是true和false啦undefined：未定义，就是你创建一个变量后却没给它赋值~null: 故名思久，null就是没有，什
2017-06-01 11:55:05
513
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人