- 博客(49)
- 收藏
- 关注
RSS订阅原创 cleintHeight、offsetHeight、scrollHeight、cleintTop、offsetTop、scrollTop、getClientRects、getBoundingClien
项目ValuecleintHeight元素高度（不包括border）offsetHeight元素高度（包括border）scrollHeight元素内容高度（没有滚动的情况下，值等于clientHeight）项目ValuecleintTop元素上边框的宽度offsetTop元素相对于最近一个positioned父元素 top...
2020-03-24 15:53:27
199
原创 快速排序(quickSort) 和 插入排序(insertSort)
1、快速排序(quickSort)（1）在数据集之中，选择一个元素作为"基准"（pivot）。（2）所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边。（3）对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。 function quickSort( arr ){ if(arr.
2018-07-27 17:32:03
552
原创 Mutation Observer API
1、概述 Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation O...
2018-07-09 17:54:31
349
原创 js 中的正则捕获组
1.1 什么是捕获组捕获组就是把正则表达式中子表达式匹配的内容，保存到内存中以数字编号或显式命名的组里，方便后面引用。当然，这种引用既可以是在正则表达式内部，也可以是在正则表达式外部。捕获组有两种形式，一种是普通捕获组，另一种是命名捕获组，通常所说的捕获组指的是普通捕获组。语法如下：普通捕获组：(Expression)命名捕获组：(?Expression)普通捕获组在大多数支持...
2018-05-24 15:15:52
9075
转载 object-position/object-fit
object-position/object-fit 这两个属性规定了 替换元素的填充方式和的对齐方式。包括img、video等 详情
2018-04-08 14:23:09
284
原创 url参数获取
function query(name){ var str=location.search.slice(1) var reg=new RegExp('(^|&)'+ name +'=([^&]*)(&|$)') var temp=reg.exec(str) return temp[2] } query('b')...
2018-03-22 14:56:05
296
原创 js事件订阅、发布
var eventCenter={ sub:function(mesName,mesCallback){ this.argus=this.argus||{}; this.argus[mesName]=this.argus[mesName]||[]; this.argus[mesName].push(me...
2018-03-22 14:52:06
1262
原创 正则中$1、$2的应用--日期格式化
在正则表达式中可以通过一对小括号“ （）”将一个完整的正则表达式分割出几个子表达式，并可以用 “$ + index”来分别引用对应子匹配项的内容。下面以格式化日期为例： 目标是将“Tue Aug 08 2017 18:23:48 GMT+0800 (中国标准时间)”转化为“2017-08-08” var time= new Date().toLocaleDateString(
2017-08-08 18:40:37
898
原创 chrome 插件开发入门
{ "name": "myCrx", "manifest_version":2, "version": "1.0", "description": "myCrx test", "browser_action": { "default_icon": "2064.png" , "default
2017-08-02 18:28:52
273
原创 浏览器缓存控制
web资源在浏览器端的缓存通常是通过相应头和请求头里的相关字段来控制的，包括 etag、last-modified、expires，cache-control，这几个字段出现的顺序有时间先后，作用也有所不用。1. etag etag类似于用MD5给文件进行电子签名，它以文件的时间戳、文件内容等作为参数生成一小段唯一的标识字符串，每次对文件的修改都会在etag上体现出来。响应头里的etag会被浏览
2017-07-21 17:12:08
405
原创 跨域cookie
站点通常采用cookie来保持用户的登陆状态。当涉及跨域访问保持登陆状态时，浏览器处于安全考虑默认是不会携带cookie，也不会跨域写入响应头里的cookie到本地。这时需要前后端配合来解决：服务器端：header("Access-Control-Allow-Origin: http://192.168.23.144:8080"); //允许的域header("Access-Contro
2017-07-12 17:04:55
476
转载 Grunt搭建自动化web前端开发环境--完整流程
jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt，你没有理由不学、不用！1、 前言 各位web前端开发人员，如果你现在还不知道grunt或者听说过、但是不会熟练使用grunt，那你就真的真的真的out了（三个“真的”重复，表示重点）。至于grunt的作用，这里不详细说了，总之你如果做web前端开发，你一定要用grunt。还有一点，它完全免费，没有
2016-11-23 15:04:51
13541
1
转载 浏览器的默认样式
文／九彩拼盘（简书作者）原文链接：http://www.jianshu.com/p/f7018b32ca4a浏览器都拥有一套自己的默认样式。浏览器之所以有默认样式表，是为了没有样式表的页面也能凑活着看。 不同浏览器；以及版本不同的浏览器的默认样式一般都是不同的。重置样式表为了保证页面在不同浏览器中显示的尽可能的一致，我们会重置不同浏览器默认的样式，称为重置样式表。有很多别人整理的不错的重置样式表，
2016-11-23 11:01:19
393
原创 CSS权重中的越级现象
CSS（层叠样式表）通过多重层叠样式间各自权重的比较计算，来决定那一层样式应该最终发挥作用。这也是css中“层叠”意思的具体体现。 权重的一般规则，一般是 ！importent > 内联样式 > id > class > 元素选择器 > * 。 但真实的应用中往往没这么简单，经常是 各级选择器搭配嵌套使用，如 div.nav或者 .nav .bar,这时就涉及到权重的具体计算。 CSS中样式
2016-11-22 15:04:31
1289
原创 label标签的两次click触发
发现一个有意思的事件：用label绑定一个input之后，点击label会两次触发label和input共同的父元素的click事件。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="wr
2016-11-21 11:07:09
5850
1
原创 同源策略阻止的是请求的发送还是数据的接收？
同源策略 （Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，Web是构建在同源策略基础之上的，浏览器是针对同源策略的一种实现。之前一直认为，它是通过对发出的请求进行检查是否同源，然后决定是否对该请求加以限制来实现。这次经过验证发现正好相反：在www.test.com下的页面中向www.domian.com下的a.php发送ajax请求： $
2016-11-08 18:52:27
1636
1
原创 window.name 跨域实现原理及实例
先引用一段话： window.name 传输技术，原本是 Thomas Frank 用于解决 cookie 的一些劣势（每个域名 4 x 20 Kb的限制、数据只能是字符串、设置和获取 cookie 语法的复杂等等）而发明的。后来 Kris Zyp 在此方法的基础上强化了 window.name 传输 ，用来解决跨域数据传输问题。 window.name 的美妙之处：name值在不同的
2016-11-08 14:30:17
9461
原创 iframe跨文档传输（postMessage跨域）
www.test.com 域下的 a.html页面 中通过iframe引入另一个域 www.domain.com 下的 b.html 页面，然后在两个页面间传递数据：a.html:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body>
2016-11-07 14:17:22
3437
1
原创 关于jsonp跨域请求的实现原理
jsonp作为常见的跨域方法，它的实现原理或许都有所了解，就是利用标签的src属性，避开同源策略的限制。.实际操作如下：1、首先是www.domain.com下的index.html页面 var ur="http://www.test.com/test.php?callback=func" //定义请求url,其中参数值func为自定义的回掉函数名 var script=documen
2016-11-01 18:22:39
798
转载 IE的quirk模式
先看看什么是quirk模式，引用一段： http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true 为 Web页指定 DOCTYPE 会影响浏览器呈现页的方式。Internet Explorer、Mozilla Firefox 和 Opera 全都支持一种名为“DOC
2016-10-19 16:07:40
661
原创 安装Yeoman中遇到的问题
在安装yoeman过程中遇到错误，npm warm deprecated npm [email protected]:this package has been reintegrated into npm and is now out of date……..大概意思就是这个包已经被融入进了npm而且 现在 已经过时了看了写解决方案，经验证，一下方法有效： 既然说npm理已经整合进了yoeman切已经过时那
2016-09-28 18:03:19
3840
转载 nodejs npm常用命令
nodejs npm常用命令npm是一个node包管理和分发工具，已经成为了非官方的发布node模块（包）的标准。有了npm，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。1、npm install moduleNames：安装Node模块 安装完毕后会产生一个node_modules目录，其目录下就是安装的各个node模块。node的安装分为全局模式和本地模式。 一般情
2016-09-28 11:55:49
405
原创 CSS中的百分比(%)到底是谁的百分比？
在定义CSS样式的时候经常会用的 “%”这个长度单位，但是这个百分比到底是相对于谁的百分比呢？1、有人说是相对于父元素的百分比，但是这么说有时候却会出问题
2016-09-22 15:36:17
20280
4
原创 对于line-height的一些理解
凡是有inline-block元素的地方就会有line-height的存在，就算你不设它的值，line-height依然通过继承来的fontsize等属性获得与之相匹配的line-height，这也是许多inline-block元素使用过程中出现各种怪现象的原因典型例子：一. img标签的底部留白<!DOCTYPE html><html> <head> <style>
2016-09-09 11:53:10
3486
原创 利用 text-align:justify 实现两端对齐布局
text-align：justify本意是让整行的文字实现左右对齐，不留空白。它用来控制inline及inline-block元素的左右对齐方式。在布局时，只需要将列表项元素diplay转换为inline-block，然后外层包裹元素设置text-align：justify就能实现列表项元素的自动左右对齐CSS部分： .con{ width: 5
2016-09-08 18:29:20
1371
原创 浏览器兼容问题
1、ie7及以下不支持inline-block在IE（以下IE8除外）下，如果对内联元素，比如a或span元素，使用inline-block属性是有效的，似乎IE是支持的，其实是触发了IE的layout，从而拥有了inline-block属性的表症。这样我们就有了一种在IE下实现display:inline-block效果的两种方法：1、先用display:inline-block属性触发块元素，
2016-09-08 16:25:39
215
转载 git中的fetch和pull
原文： http://www.tech126.com/git-fetch-pull/ Git中从远程的分支获取最新的版本到本地有这样2个命令：1. git fetch：相当于是从远程获取最新版本到本地，不会自动mergegit fetch origin mastergit log -p master..origin/mastergit merge origin/master以上命令的含义：首先
2016-09-01 16:49:38
183
转载 公钥私钥及ssh公钥无密码登录
公钥私钥解释转载自月光博客 [ http://www.williamlong.info/ ] 加密和认证 首先我们需要区分加密和认证这两个基本概念。 加密是将数据资料加密，使得非法用户即使取得加密过的资料，也无法获取正确的资料内容，所以数据加密可以保护数据，防止监听攻击。其重点在于数据的安全性。身份认证是用来判断某个身份的真实性，确认身份后，系统才可以依不同的身份给予不同的权限。其
2016-08-30 15:44:38
289
原创 正则表达式中添加变量
强大的正则表达式在应用中偶尔需要加入一些变量，来增强他的扩展性，可以采用如下定义：var reg=new RegExp("正则部分"+变量,"ig");例：var str="abc121def122gtf123";var s=122var reg=new RegExp(("\/w){3}"+s,"gi");var index=str.replace(reg,"");
2016-08-19 11:48:39
11178
转载 js插件开发规范
当我们画出了UI之后就可以正式编写jQuery插件代码了，不过在着之前我们还需要对jQuery插件开发的一些规范性有一些了解。一. 使用闭包： (function($) { // Code goes here })(jQuery);这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢？a) 避免全局依赖。b) 避免第三方破坏。c) 兼容jQuery操作符’$’和’jQu
2016-08-11 17:26:25
1015
转载 mysql 使用set names 解决乱码问题的原理
解决乱码的方法，我们经常使用“set names utf8”,那么为什么加上这句代码就可以解决了呢？下面跟着我一起来深入set names utf8的内部执行原理 先说MySQL的字符集问题。Windows下可通过修改my.ini内的 PHP代码 [mysql] default-character-set=utf8 //客户端的默认字符集 [mysqld] default-cha
2016-07-22 11:23:41
266
转载 PHP中 echo, print_r与var_dump的区别分析
这篇文章主要介绍了PHP中echo,print_r与var_dump区别分析,主要讲述了三者的类型本质及其操作数据类型的用法区别,非常具有实用价值,需要的朋友可以参考下本文较为详细的分析了PHP中echo,print_r与var_dump区别。分享给大家供大家参考。具体分析如下：三者都是具有输出功能的php语句，但print_r(expression),var_dump(expression)是函
2016-06-24 18:05:28
2429
转载 关于MD5加密
前言：任何以明文方式存储用户密码的行为都是耍流氓。MD5作为一种单项加密方式，常用在数据脱敏和软件数字签名等方面。以下是介绍正文：MD5的全称是Message-Digest Algorithm 5（信息-摘要算法），在90年代初由MIT Laboratory for Computer Science和RSA Data Security Inc的Ronald L. Rivest开发出来，经MD2、MD
2016-06-16 15:57:39
480
转载 常用cmd命令
一，ping 它是用来检查网络是否通畅或者网络连接速度的命令。作为一个生活在网络上的管理员或者黑客来说，ping命令是第一个必须掌握的DOS命令，它所利用的原理是这样的：网络上的机器都有唯一确定的IP地址，我们给目标IP地址发送一个数据包，对方就要返回一个同样大小的数据包，根据返回的数据包我们可以确定目标主机的存在，可以初步判断目标主机的操作系统等。下面就来看看它的一些常用的操作。先看看帮助
2016-06-14 14:53:29
306
原创 前端路由
用前端路由分担后台工作量、包办整个网站的路由这种事感觉有点想太多。但是在单页应用中做一些提高用户友好度的工作还是很有作为的。一、方案：通过hash 目录结构如图： 只有main,html是完整的html，其他两个都是html片段①main.html:<!DOCTYPE html><html> <head> <meta charset="UTF-8">
2016-06-08 18:12:35
291
转载 近几年前端技术盘点以及 2016 年技术发展方向
Web 发展了几十个春秋，风起云涌，千变万化。我很庆幸自己没有完整地经历过这些年头，而是站在前人的肩膀上行走。Web 技术发展的速度让人感觉那几乎不是继承式的迭代，而是一次又一次的变革，一次又一次的创造。这几年的前端，更为之甚！我从 12 年底开始接触前端，12 年之前的前端发展情况只能从上一辈的笔触中领会。本文会盘点从 09 年开始到 15 年间前端技术的革新，同时也会从多个角度，解读近
2016-06-07 13:34:20
3061
原创 宽度自适应布局
自适应布局是一种很常见的布局方式，现将常见的几种实现方式列下：1：利用float左右两div分别左右浮动，不再占用文档流，块元素div.main自动占据整行，然后给main添加左右margin分别为左右两块元素的宽，代码如下：.con{width: 500px;height: 100px;}div{height: 100px;}.le
2016-06-06 17:13:43
598
原创 溢出文字处理CSS属性——text-overflow、word-break、word-wrap和white-space
一、首先依次介绍这几个文字处理的CSS属性1、word-break： word-break 属性规定自动换行的处理方法。当行尾放不下一个单词时，决定单词内部该怎么摆放。 break-all: 强行上，挤不下的话剩下的就换下一行显示。keep-all: 放不下我了，那我就另起一行展示，再放不下，我也不退缩。类似于word-wrap：normal2、wo
2016-06-03 16:58:35
3860
转载 JavaScript中的函数节流
什么是函数节流？介绍前，先说下背景。在前端开发中，有时会为页面绑定resize事件，或者为一个页面元素绑定拖拽事件（其核心就是绑定mousemove），这种事件有一个特点，就是用户不必特地捣乱，他在一个正常的操作中，都有可能在一个短的时间内触发非常多次事件绑定程序。而大家知道，DOM操作时很消耗性能的，这个时候，如果你为这些事件绑定一些操作DOM节点的操作的话，那就会引发大量的计算，在用户
2016-06-03 15:43:33
404
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人