#
ECMAScript6简明学习笔记(待完善)

前言阮一峰的《ECMAScript 6入门》太过详细了,全部看完需要花很长时间,所以,本文只是前者的一个超级精简版。 ES6简介ECMAScript6.0,简称ES6,又叫ES2015,是JavaScript语言的下一代标准,对JavaScript语法进行了比较大的修改。 对于不支持ES6的浏览器可以将ES6代码用转换工具转换成ES5语法。 ECMAScript是JavaScript的标准,... 阅读全文

@2016-10-31 JavaScript 浏览(485)
#
JS获取剪贴板图片之后的格式与压缩问题

前言某年某月的某一天,突然发现博客服务器上上传的图片都比较大,一些很小的截图都有几百kb,本来服务器带宽就慢,不优化一下说不过去。 问题细述特别说明:本文代码因为只是用于我自己后台写markdown上传图片,运行环境只考虑PC,所以没有考虑任何兼容性,推荐Chrome下使用。 以下面一张图片为例: 原始图片为85kb,jpg格式的,上传之后就变成png格式了,而且变成了560kb!实在是... 阅读全文

@2016-10-23 JavaScript 浏览(967)
#
JS自定义事件

原文发表于:20160423 兼容性较好的方法先看一个例子: var event = document.createEvent("CustomEvent");event.initCustomEvent("myevent", true, true, {a:1, b:2});document.addEventListener("myevent", function(e){ console.l... 阅读全文

@2016-10-20 JavaScript 浏览(1246)
#
jQuery.width()和jQuery.css('width')的区别

原文发表于:20160316 问题描述使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '10rem')时却能正确,简单得查阅了下jQuery文档,发现文档里面对$.fn.width的描述是: val为空时是取得第一个匹配元素当前计算的宽度值(px),val不为空时是设置宽度,可以是字符串... 阅读全文

@2016-10-20 JavaScript 浏览(955)
#
Promise简单学习

Promise用法介绍ES6中内置了Promise,非ES6下也有很多第三方实现。Promise是JS中异步编程的一种解决方案,主要是为了解决异步回调深渊。 我喜欢偷懒,懒得介绍杂七杂八等等,直接上代码。 最基本用法先来看个例子: // 用setTimeout模拟简单的ajax,num传参来人为模拟成功或者失败,大于10表示成功function ajax(num) { return n... 阅读全文

@2016-10-09 JavaScript 浏览(412)
#
【经典面试题】JavaScript数组去重

题目已知有如下一个数组,要求实现一个去重方法: var arr = ['aa', 'bb', 'cc', '', 1, 0, '1', 1, 'bb', null, undefined, null]; 既然是面试题,肯定要考虑兼容性和效率。 几种实现第一种实现这是最容易想到的方法: function unique1(array){ var result = []; for(va... 阅读全文

@2016-09-28 JavaScript 浏览(1169)
#
JavaScript中call和apply的区别

区别二者的作用都是在指定this值和参数的情况下调用某个函数,它们 唯一区别 就是参数指定的形式不一样,call接收的是参数列表,apply接收的是数组。 语法: fn.call(thisArg[, arg1[, arg2[, ...]]]);fn.apply(thisArg[, argsArray]); call和apply老是分不清,如何记忆呢?可以这样记:apply比call单词长,参... 阅读全文

@2016-09-23 JavaScript 浏览(931)
#
[精品] JavaScript正则表达式详解

创建正则表达式JS的正则表达式类型叫RegExp,有2种创建方式: var reg1 = /a/g; // 双斜杠法,这种方法书写更方便var reg2 = new RegExp('a', 'g'); // 传统写法,这种方法更正统console.log(/a/g instanceof RegExp); // 输出true 这2种方式没有任何区别,但是,当正则表达式的内容是动态的时候,用Reg... 阅读全文

@2016-09-22 JavaScript 浏览(1442)
#
认识Function.prototype.bind

先来看个例子假设现有一个方法test,它接受一个参数str,现在我有3个现成的参数,我需要根据它们生成3个定制的无参方法: function test(str){console.log(str);}var params = ['aaa', 'bbb', 'ccc'];var functions = [];for(var i=0; i<params.length; i++){ func... 阅读全文

@2016-09-22 JavaScript 浏览(1123)
#
【转载】addEventListener的第三个参数分析

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

@2016-09-21 JavaScript 浏览(982)
#
11行代码实现简单的图片懒加载以及背景图懒加载

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

@2016-09-08 JavaScript 浏览(1693)
#
onkeydown和onkeypress的区别

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

@2016-09-02 JavaScript 浏览(903)
#
[精品] 分享自己写的JS版日期格式化和解析工具类,绝对好用!

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

@2016-09-02 JavaScript 浏览(2092)
#
有强迫症的我只能自己写一个json格式化工具

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

@2016-08-29 JavaScript 浏览(1806)
#
JavaScript中实现最高效的数组乱序

本文内容参考自网络。 常规做法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.... 阅读全文

@2016-08-22 JavaScript 浏览(1028)
#
JavaScript的hasOwnProperty和isPrototypeOf详解

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

@2016-08-22 JavaScript 浏览(1404)
#
[精品] JavaScript数组常用方法详解

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

@2016-08-17 JavaScript 浏览(1089)
#
网页上如何实现禁止复制粘贴以及如何破解

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

@2016-08-17 JavaScript 浏览(8886)
#
JavaScript作用域与变量声明提升

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

@2016-08-02 JavaScript 浏览(928)
#
console.log报错:uncaught typeerror illegal invocation

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

@2016-08-02 JavaScript 浏览(2330)
第2页,共3页