上传文件或目录
<input type="file" id="ctrl" webkitdirectory directory multiple/> 上传文件，谷歌可以直接传目录
读取文件
调用FileReader对象的方法 （FileReader接口提供了读取文件的方法和包含读取结果的事件模型。）
FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能
需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。
方法名 参数 描述
abort none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file, [encoding] 将文件读取为文本
处理事件
FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。
事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发，无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
web worker
web worker 是运行在后台的 JavaScript（w=new Worker("/example/html5/demo_workers.js");）
WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
var Socket = new WebSocket(url, [protocol] );
第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
{WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。}
常用要点大杂烩
console.log(new Date().toLocaleString()); 把时间格式转换为字符串格式
var arr=[1,2,3,4,5,0]; console.log(Math.max(...arr)); 求最大值
console.log(document.referrer); // 获取当前页面是从哪里跳转过来的
// 去除浏览器默认动作兼容和阻止事件冒泡兼容
if (document.all) {
event.returnValue = false;
} else {
e.preventDefault();
};
e.stopPropagation(); 阻止事件冒泡
window.event? window.event.cancelBubble = true : e.stopPropagation(); 阻止事件冒泡 兼容
toLocaleString() 把数组转换为本地字符串。用于new date
// 跨域请求是只能是get请求（jsonp），不能使用post请求，如果要post,要点就是 :通过修改document.domain来跨子域
arr.reverse() 数组反向排序
insertAdjacentHTML和 insertAdjacentText方法 (***可自行搜索使用***)
方法名称：insertHtml(where,el,html)
参数介绍：
where：插入位置。包括beforeBegin,beforeEnd,afterBegin,afterEnd。
el：用于参照插入位置的html元素对象
html：要插入的html代码
insertAdjacentHTML 方法：在指定的地方插入html标签语句
原型：insertAdajcentHTML(swhere,stext)
有四种值可用
1. beforeBegin: 插入到标签开始前
2. afterBegin:插入到标签开始标记之后
3. beforeEnd:插入到标签结束标记前
4. afterEnd:插入到标签结束标记后
> localforage:用来本地存储数据的 突破常规5M的限制 异步执行
localforage的逻辑是这样的：优先使用IndexedDB存储数据，如果浏览器不支持，使用WebSQL，浏览器再不支持，使用localStorage
var blob = URL.createObjectURL(new Blob([event.target.result]));
eleImg.src = blob; // blob本地存储
localforage.setItem('zxxImg', blob);
localforage.getItem('key', function (err, value) {
// 如果err不是null，则出错。否则value就是我们想要的值
});
Blob的存在，允许我们可以通过JS直接操作二进制数据
Blob对象可以看做是存放二进制数据的容器，此外还可以通过Blob设置二进制数据的MIME类型
Blob对象是一个代表二进制数据的基本对象，在它的基础上，又衍生出一系列相关的API，用来操作文件。【类型化数组 视图数组 复合视图 DataView视图 无符号整数】
参考：http://blog.csdn.net/u010081689/article/details/50537600
File对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件；
FileList对象：File对象的网页表单接口；
FileReader对象：负责将二进制数据读入内存内容；
URL对象：用于对二进制数据生成URL。
HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。
如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。
第三个参数用于针对image/jpeg格式的图片进行输出图片的质量设置
void canvas.toBlob(callback, type, encoderOptions);
如果明确知道返回的二进制数据类型，可以把返回类型（responseType）设为arraybuffer；如果不知道，就设为blob。【ajax】
使用btoa和atob来进行Base64转码和解码
var str = 'javascript';
window.btoa(str)
//转码结果 "amF2YXNjcmlwdA=="
window.atob("amF2YXNjcmlwdA==")
Base64转码的对象只能是字符串，因此来说，对于其他数据还有这一定的局限性，在此特别需要注意的是对Unicode转码。
var str = "China，中国";
window.btoa(window.encodeURIComponent(str))
//"Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ="
window.decodeURIComponent(window.atob('Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ='))
//"China，中国"
var arr = [1, 'a', 'a ', 'b ', 'd ', 'e', 'e', 1, 0];
利用ES6的集合Set，达到快速去重复。var arrNew = new Set(arr);
请求数据时用到：encodeURI() 编码 dncodeURI()解码
toString()方法 转换为字符串
$(".item_name")[j].innerHTML=_text.substring(0,13)+"..."; 字符串方法 截取 超过13个字符显示省略号
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
result 属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义。 一般为两个事件，第一个事件里有个return 第二个事件里显示出就行了
// addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。
Webuploader教程（一）------简单实用上传（文件，图片）功能
var jj=eval(arrs.join('+'));
eval() 计算的函数 join是分隔符，将数组里的值相加起来 然后计算
fun1(){ 找到上级函数的this
let me =this;
fun2.call(this)
}
// apply call bind 这三个方法都是改变this指向的 bind和前俩个不一样 有个函数再调用执行
call（对象）；重新定义一个变量，变量.call(a)，后面可以传参数，以逗号形式
apply（对象）；和上面一样，不同的是后面的参数是个数组
bind（）；这个东西比较特殊，bind方法返回的是一个修改过后的函数，变量名保存后，必须调用一下才行。参数是以函数的形参形式传进来的
function getRads (degrees) { return (Math.PI * degrees) / 180; }
function getDegrees (rads) { return (rads * 180) / Math.PI; }
getRads(30); // 0.5235987755982988rad 转换为π
getDegrees(0.7853981633974483); //45deg 转换为角度
context.arc(x,y,r,sAngle,eAngle,counterclockwise); 闲来无事 canvas
参数 描述
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
获取文件路径：window.URL.createObjectURL(obj.files[i])
var name=obj.files[i].name
原声方法获取元素的属性值，IE有一套兼容性的属性，去自己js函数里有封装好的函数
var a=window.getComputedStyle(box, ":after").content;
百度禁止转码
通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加
html 代码:
<meta http-equiv="Cache-Control" content="no-siteapp" />
iframe
$(window.frames["qq"].document).find("#aa").html() 这里的frames是获取name值
$("#if").contents().find("#aa").html() 妈的 坑死我 加上window.onload就ok了 必须等父级元素加载完
判断安卓和IOS
function isMobile() {
var sUserAgent = navigator.userAgent.toLowerCase(),
bIsIpad = sUserAgent.match(/ipad/i) == "ipad",
bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os",
bIsMidp = sUserAgent.match(/midp/i) == "midp",
bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4",
bIsUc = sUserAgent.match(/ucweb/i) == "ucweb",
bIsAndroid = sUserAgent.match(/android/i) == "android",
bIsCE = sUserAgent.match(/windows ce/i) == "windows ce",
bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile",
bIsWebview = sUserAgent.match(/webview/i) == "webview";
if((bIsAndroid||bIsIphoneOs)==true){ }else{ };
return (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM);
}(isMobile());
A链接锚点加动画效果
$(".aa a").click(function(){
$("html,body").animate({scrollTop:$($(this).attr("href")).offset().top -50 +"px"},"slow");
return false; //不要这句会有点卡顿
})
模糊查询 实时监测input值变化 input propertychange事件
var arr=[];
for(var i=0;i<$("ul li").length;i++){
arr.push($("ul li")[i].innerText)
}
$("input").bind('input propertychange',function(){
for(var i=0;i<arr.length;i++){
if($("input").val()&&arr[i].indexOf($("input").val())!=-1){
$("ul li").eq(i).css("display","block");
}else{
$("ul li").eq(i).css("display","none");
}
}
});
JS高级程序设计（第三版）：
构造函数，有一个容易混淆的地方，那就是原型的constructor属性。在JavaScript中，每一个函数都有默认的原型对象属性prototype，该对象默认包含了两个成员属性：constructor和__proto__。
a.prototype 包含了2个属性，一个是constructor ，另外一个是__proto__
constructor 属性返回对创建此对象的数组函数的引用。指向a的构造函数本身 str.constructor
instanceof 检测对象的原型链，通常你是无法修改的（不过某些引擎通过私有的__proto__属性暴露出来）。
typeof和instanceof都可以用来判断变量，它们的用法有很大区别：
typeof会返回一个变量的基本类型，只有以下几种：number,boolean,string,object,undefined,function；
instanceof只能用来判断对象和函数，不能用来判断字符串和数字等，instanceof返回的是一个布尔值 alert(a instanceof Object)
toString(radix) 将其转换为字符串
delete person.age; 删除对象属性
arguments.callee 相当于递归自调用 匿名函数用到
var person = {}; 调用Object.defineProperty()方法，它接收三个参数：对象，属性名，描述符对象（必须是：configurable、enumberable、writable和value，可设置一个或多个值）。
Object.defineProperty(person, 'name', {
configurable: false,
writable: false,
value: 'Jack'
});
Object.defineProperty(Person2.prototype,'constructor',{ // 重新设置构造属性
enumerable:false,
value:Person2
});
object方法：hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有，返回true，否则返回false。
数组：
var arr=new Array(5); 只指定一个参数是数组的长度
var str_json = JSON.stringify(new_data); 转换成json对象 系列化，还有第二个参数 key=value
var max1=-Infinity; 定义一个无穷大的数
位操作符：var a=9.5; var b=a|0; 后面必须为0，取整 否则就相加了（奇数不相加，偶数相加） console.log(b)
JSON数据转换
// 示例1功能为将json字符串转化为json对象。（注意！json字符串的格式一定要标准，key和value一定要用双引号包括，否则会出线解析异常）
var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);
document.write(contact.surname + ", " + contact.firstname + ", "+ contact.phone);
var bb=JSON.stringify(obj); //可以将json对象转换成json对符串
var aa=JSON.parse(objstr); //可以将json字符串转换成json对象
web API
1、getUserMedia API
特别有趣的一个 API，能够调用电脑的摄像头，结合 标签和 Canvas 就能在浏览器中拍摄照片了。未来这个 API 将被广泛用来让浏览器和用户之间互动
2、Battery API
顾名思义，这是一个电池 API ，明显是为移动设备准备的，用于监控电池的状态。能够通过事件监听电池电量的变化，电池的等级、可用时间等状态。
下面是是示例代码，可以通过后面的教程链接学习更详细的使用方法。
3、Link Prefetching
这个链接预取 API 非常有用，让开发者可以控制网页资源在后台安静的预先加载，这样用户在浏览网站或者使用 Web 应用程序的时候能够有流畅的使用体验。
可以预加载整个页面，也可以是单个资源，示例代码如下：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
