原文：https://my.oschina.net/u/1454562/blog/205010觉得写得不错，就转载过来了。 如果要把HTML元素的事件与某个函数绑定起来，可以有下面三种方法，以最常见的“点击”事件为例。 方法一： 直接在对应的HTML元素标签上绑定函数 <button id='submit' onclick='onClickFn()'>Click Me!<... 阅读全文

前言网上绝大多是图片懒加载插件都是针对img的src的，但是很多时候图片是以背景图的形式存在的，因为这种方式可以很容易实现图片不变形但是又保证宽高度固定，所以只能自己写一个。 这里只是简单的实现，没有考虑横向滚动、div滚动等等情况，但相信已经满足大部分情况了。 代码直接上代码，标题说11行，真有点吹了，哈哈，其实是去掉了大括号之后还剩11行，一共有15行： /** * 图片懒加载插件，与绝... 阅读全文

原文写于：20150121 正文二者区别大着呢。 首先，从名字上就可以看出一些区别：keydown意指键盘被按下触发，keyup意指键盘松开被触发，keypress则是按键被按压，keydown和keyup容易区分，但是keydown和keypress啥区别呢？ keydown和keypress的区别区别： 执行顺序不同：keydown < keypress < keyup... 阅读全文

前言本来想模仿Java里面的SimpleDateFormat()对象的，但是感觉这样用起来不方便，所以还是直接写成单独的方法算了。 原文链接 PS：较新的浏览器有提供一个自带的日期格式化方法Intl.DateTimeFormat，但是超级难用，完全没必要去了解。 日期格式化使用说明formatDate(date, fmt)，其中fmt支持的格式有： y（年）M（月）d（日）q（季度... 阅读全文

缘由一直以来在编码规范界有2大争论不休的话题，一个是关于是用空格缩进还是tab缩进的问题，一个是花括号是否换行的问题，笔者是tab缩进和花括号换行的坚决拥护者，不解释，免得挑起争论。 可惜的是，几乎找遍全网都找不到一个支持tab缩进和花括号换行的json格式化工具（IDE除外），包括Chrome在内，几乎所有浏览器内置的代码格式化都是空格缩进和花括号不换行的，每次看着花括号放在右上角像一个驼背的... 阅读全文

本文内容参考自网络。 常规做法var array = [1, 2, 3, 4, 5, 6, 7, 8, 9];array.sort(function(a, b){ return Math.random() > 0.5 ? -1 : 1;}); 此方法虽直观，但效率并不高，经某网友测试，打乱10000个元素的数组，大概花了35ms左右。 高效做法if (!Array.prototype.... 阅读全文

作用hasOwnProperty的作用是用来判断一个对象本身是否具有某个属性或对象，对象本身的意思是指不包括它的原型链，个人觉得这个方法应该叫isOwnProperty更合适。 isPrototypeOf是用来判断对象是否存在于另一个对象的原型链中，如： Array.prototype.isPrototypeOf([1, 2, 3]);几个例子下面几个例子应该很好理解： String.pro... 阅读全文

前言JavaScript中的数组有很多实用方法，但是方法多了难免记不住，本文就是对一些常用方法做一个基本的梳理。 为方便对比和理解，这里统一假设有一个名为a的数组：var a=[4,6,1,7,2,9,3,6]，以下所有方法的测试都是基于这个数组。 兼容性较好的会修改原数组的方法：push、pop、shift、unshift、reverse、sort、splice。 push(value)进... 阅读全文

我们首先来介绍如何实现禁止复制，知道了禁止的方式，再破解就容易了。 实现禁止复制粘贴比较简单，直接上代码： <style type="text/css">/* 最简单的实现禁止复制的方法，采用css方式禁止文字选择，当然这只兼容webkit内核浏览器 */* { -webkit-user-select: none; }p {font-family: 'Microsoft Yahei... 阅读全文

原文发表于：2014-08-21 js作用域为了更好的描述本文的核心：变量声明提升，我们先来复习一下js的作用域。 js没有块级作用域，函数是js唯一拥有自身作用域的结构（注：指在ES6出现以前，ES6开始出现了对块级作用域的支持）。 变量声明提升什么是变量声明提升这是一个比较老的话题，所谓变量声明提升hoisting，是指JavaScript引擎在执行的时候，会把所有变量的声明都提升到当前... 阅读全文

原文发表于：2014-08-01 console.log的运行上下文原因是console.log的运行上下文要求是console不能是其它任何别对象： console.log.call(this, 'Hello Liuianan!'); // 报错：Uncaught TypeError: Illegal invocationconsole.log.call(console, 'Hello Li... 阅读全文

String.prototype.trim低版本浏览器不支持字符串的trim相关方法，实际使用中考虑兼容性的话可以使用jQuery提供的$.trim()方法，如果项目中没有采用jQuery，可以自己简单写一个，参考jQuery中的实现： if(!String.prototype.trim){ String.prototype.trim = function() { re... 阅读全文

如题原文发表于：2014-07-14 浏览器会给页面所有取了id的元素生成一个名字就叫这个id的对象，对象的内容就是它的DOM对象，相当于是document.getElementById(id)返回的内容。 我们来看一个测试例子： <div id="test1">第一段内容</div><div id="test2">第二段内容</div><... 阅读全文

如题如果某个元素之前设置了zoom属性，后面再在style上面覆盖时，如果覆盖的值和原先的一样，zoom会失效，而其它值时则没任何问题，比如下面的代码，zoom设置0.4或者0.6都没问题，唯独设置成0.5时zoom失效！这个有待其它浏览器测试验证。 另外，Firefox竟然至今都不支持zoom属性，连IE和Android等都支持了，好奇怪Firefox为啥不支持，虽然可以用transfor... 阅读全文

说明这种东西一般都是出现在面试题上面，实际生产环境中很少用，因为性能不见得更优越可读性还更差。 本文属于转载，但是对排版做了优化。 思路一(function(){ var a = 10, b = 2; a = a + b; b = a - b; a = a - b; console.log('a:', a, 'b:', b);})(); 思路二(function... 阅读全文

双引号与单引号一般而言，java中的json转换工具（如gson、jackson）只能处理标准json，所谓标准json，就是键值和字符串都必须用双引号包裹的json字符串： var json1 = '{"a": "abc"}'; // 标准JSONvar json2 = "{a: 'abc'}"; // 非标准JSONvar json3 = '{a: "abc"}'; // 非标准JSONva... 阅读全文

JS匹配非字符串众所周知，[^div]匹配的是“非字符”而不是“非字符串”，前者的意思是一个字符串里只要没有d、i、v这3个字符就算符合条件，但是很多时候我们需要匹配没有div这一个字符串，这时该怎么办呢？ 方法一（不推荐）匹配不以abc开头的字符串： /^([^a]|a[^b]|ab[^c]).*/g.exec('abcfdsf'); 匹配不以abc或者qwe开头的字符串： // 正确写... 阅读全文

本文发表于：2014-06-19 以HTML5浏览本地多个文件为例比如下面的例子，fileReader读取文件是异步的，等到fileReader的onload执行完毕时，临时变量i和file都不是正确的那个值，所以需要再嵌套一层function，将file和i传进去再return。 <input type="file" id="file" multiple/><script ... 阅读全文

遍历数组的2种方式for in 法var array = ['aaa', 'bbb', 'ccc'];for(var i in array){ console.log(typeof i, i, array[i]);} 可以发现， i 是类型是string而不是number，这一点很容易忽略，切记！ 普通的for循环法var array = ['aaa', 'bbb', 'ccc'];fo... 阅读全文

方法一：HTMLElement.click()HTMLElement.click()，参考：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/click ， 比如a.click()，此方法最简单最方便，基本上没什么兼容性问题（IE5.5+，Chrome9+）： 特殊情况：js触发input[file]的单击事件原文写于：... 阅读全文