都是自己整理的，除了题目，其他都别当真。（答案不是100分的对/(ㄒoㄒ)/~~）
jQuery和zepto的区别
zepto主要针对移动设备上的，只支持较新的浏览器，好处是代码量小，性能较好；zepto有一些基础的触摸事件，如tap、swipe；
jQuery主要是兼容性好，可以跑在PC也可以移动设备上，好处是兼容性好，缺点是代码量大，性能不够好，jQuery的2.X版本也不支持IE678也是基于这个考虑的。
大多数在jQuery 常用的API 和方法zepto都有，zepto种有些方法jQuery反而没有，大部分都能兼容。
具体的一些区别：
on事件委托的区别
Zepto 的each 方法只能遍历 数组，不能遍历JSON对象。
width()和height()的区别：Zepto由盒模型(box-sizing)决定，用.width()返回赋值的width，用.css('width')返回加border等的结果；jQuery会忽略盒模型，始终返回内容区域的宽/高(不包含padding、border)。
offset()的区别：Zepto返回{top,left,width,height}；jQuery返回{width,height}。
jQuery的$.fn.extend和$.extend的区别
jQuery便是一个封装得非常好的类，比如，$("#btn1") 会生成一个 jQuery类的实例，理解这一点很重要。
$.extend是用来扩展jQuery类的，可以理解为添加静态方法，是全局性的，直接用jQuery类调用即可。
$.extend({minValue:function(a,b){return a<b?a:b;}})
$.minValue(5.6);
也可以把这类函数称作为工具函数，不直接操作DOM元素，而是操作Javascript的非元素对象，或者执行其他非对象的特定操作。
$.extend还可以用一个或多个其他对象来扩展一个对象，返回被扩展的对象
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
//settings == { validate: true, limit: 5, name: "bar" }
$.fn是指jQuery的命名空间，它是对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
$.fn.extend({
theAlert:function(){
alert("自定义的函数");
}
})
$("thediv").theAlert()
cookie、localStorage、sessionStorage的区别
LocalStorage（本地存储）和sessionStorage（会话存储） 是HTML5 Web Storage API 提供的，这两种方式都允许开发者使用js设置的键值对进行操作，在在重新加载不同的页面的时候读出它们。这一点与cookie类似。
数据的生命期：
cookie一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效；localStorage除非被清除，否则永久保存；sessionStroage仅在当前会话下有效，关闭页面或浏览器后被清除;存放数据大小:
cookie:4K左右;localStorage和sessionStorage一般为5MB；与服务器端通信：
cookie每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题；localStorage和sessionStorage仅在客户端（即浏览器）中保存，不参与和服务器的通信易用性：
cookie需要程序员自己封装，源生的Cookie接口不友好；localStorage和sessionStorage源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
JS跨域（ajax跨域、iframe跨域）解决方法
只要协议、域名、端口有任何一个不同，都被当作是不同的域。
要解决跨域的问题，我们可以使用以下几种方法：
通过jsonp跨域：
在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。jsonp的原理就是，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。如果你的页面使用jquery，那么通过它封装的方法$.getJSON(url,data,success(data,status,xhr))
function dosometing(jsondata){
//处理获得的数据
}
<script src=" http://example.com/data.php?callback=dosometing"></script>我们看到获取数据的地址后面还有一个callback参数，按惯例是用这个参数名，但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的，就得按照提供数据的那一方的规定格式来操作了。
因为是当做一个js文件来引入的，所以 http://example.com/data.php 返回的必须是一个能执行的js文件，所以这个页面的php代码可能是这样的:
<?php
$callback = $_GET['callback'];//得到回调函数名
$data = array('a','b','c');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>
最终那个页面输出的是：dosomething(['a','b','c'])
通过修改document.domain来跨子域：
要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。使用window.name来进行跨域：
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。注意，window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。
<!--www.cnblogs.com/data.html页面的代码-->
window.name = "消息";
<!-- www.example.com/a.html页面的代码-->
function getData(){//iframe载入data.html页面后台执行的函数
var iframe = document.getElementById("iframe");
iframe.onload = function(){//这个时候a.html和data.html已经是处于同一个域了，可以互相访问
var data = iframe.contentWindow.name;//获取iframe的window.name，也就是data.html页面给她设置的数据
alert(data);
}
iframe.src = "b.html";//这里的b.html只要和a.html同一个域就行了，目的是让a能访问iframe里的东西，设置成about:blank也可以
}
<iframe id="iframe" src="www.cnblogs.com/data.html" style="display:none" onload = "getData()">
使用HTML5中新引进的window.postMessage方法来跨域传送数据
window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
<!-- http://test.com/a.html 的代码 -->
function frameLoad(){
var iframe = document.getElementById("iframe");
var win = iframe.contentWindow;//获取window对象
win.postMessage("消息","*");//向不同域的页面发送消息
}
<iframe id = "ifrmae" src = "www.test.com/b.html" onload = "frameLoad()"></iframe>
<!-- http://www.test.com/b.html 的代码 -->
window.onmessage = function(e){
e = e || event;//获取时间对象
alert(e.data);//通过data属性得到传送的消息
}
HTTP协议的主要特点
超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。目前我们使用的是HTTP/1.1 版本。
http协议是无状态的，同一个客户端的这次请求和上次请求是没有对应关系，对http服务器来说，它并不知道这两个请求来自同一个客户端。 为了解决这个问题， Web程序引入了Cookie机制来维护状态.
HTTP协议的主要特点可概括如下：
支持客户/服务器模式。
简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。
灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。
http请求由三部分组成，分别是：请求行、消息报头、请求正文
HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文
HTTP响应的状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值：
1xx：指示信息--表示请求已接收，继续处理
2xx：成功--表示请求已被成功接收、理解、接受
3xx：重定向--要完成请求必须进行更进一步的操作
4xx：客户端错误--请求有语法错误或请求无法实现
5xx：服务器端错误--服务器未能实现合法的请求常见状态代码、状态描述、说明：
200 OK //客户端请求成功
400 Bad Request //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
403 Forbidden //服务器收到请求，但是拒绝提供服务
404 Not Found //请求资源不存在，eg：输入了错误的URL
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常
GET和POST方法的区别
Http协议定义了很多与服务器交互的方法，最基本的有4种，分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源，而HTTP中的GET, POST, PUT, DELETE就对应着对这个资源的查，改，增，删4个操作。 我们最常见的就是GET和POST了。GET一般用于获取/查询资源信息，而POST一般用于更新资源信息.
GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditPosts.aspx?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的Body中.
GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制.
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值。
GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码.
js的变量作用域
在js当中，变量的作用域就是定义这个变量的区域。变量分为：局部变量和全局变量。在函数内声明的变量只在这个函数内有定义，作用域是局部的，函数的参数也是局部变量。
理解作用域链可以更好的理解变量的作用域，每个JavaScript执行环境都有一个和它关联在一起的作用域链。在变量解析过程中首先查找局部的作用域链，然后查找外部的作用域链。
闭包的概念
闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包的用途:
最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
function f1(){
var n=999;
nAdd=function(){n+=1}//没有var的全局变量，nAdd的值是一个匿名函数，而这个匿名函数本身也是一个闭包，可以在函数外部对函数内部的局部变量进行操作。
function f2(){//f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
使用闭包的注意点：
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
this和闭包的解读代码
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){//闭包函数
return this.name;//到父函数getNameFunc找name变量，找不到，到外部找，找到"The Window"
};
}
};
alert(object.getNameFunc()());//The Window
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());//因为this的对象引用就是object，所以返回值在Object中开始查找，找到了Obeject中的name就不到全局变量中查找。
this 的用法
this是Javascript语言的一个关键字。
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。
function test(){
alert(this.x);
}
var o = {
x:1,
m:test
};
o.m.apply();//undefined
function test(){
alert(this.x);
}
var o = {
x:1,
m:test
};
o.m.apply(o);//1
call和apply两个方法的区别
这两函数的作用其实就是更改对象的内部指针，即改变对象的this指向的内容，这两个方法都能劫持另外一个对象的方法，继承另外一个对象的属性.
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
// 第一个参数对象o将代替add类里this对象
// 后面的参数就是需要逗号隔开的参数列表
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
// 第一个参数对象o将代替add类里this对象
// 第二个参数为数组，就是需要传递的参数列表
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
//apply的一个例子，
function Person(name,age){ //定义一个类
this.name=name; //名字
this.age=age; //年龄
this.sayhello=function(){alert(this.name)};
}
function Print(){ //显示类的属性
this.funcName="Print";
this.show=function(){
var msg=[];
for(var key in this){
if(typeof(this[key])!="function"){
msg.push([key,":",this[key]].join(""));
}
}
alert(msg.join(" "));
};
}
function Student(name,age,grade,school){ //学生类
Person.apply(this,arguments);//比call优越的地方
Print.apply(this,arguments);
this.grade=grade; //年级
this.school=school; //学校
}
var p1=new Person("卜开化",80);
p1.sayhello();
var s1=new Student("白云飞",40,9,"岳麓书院");
s1.show();
s1.sayhello();
alert(s1.funcName);
另外一个需要注意的：传null或undefined时，将是JS执行环境的全局变量。浏览器中是window，其它环境（如node）则是global。
function fun() {
alert(this);
}
fun.call(1);//“1”
fun.call('a');//“a”
fun.call(true);//“true”
fun.call({name:'jack'}); //“[object Object]”
fun.call(null); // window or global
fun.call(undefined); // window or global严格模式下情况又有所不同，ES3比较宽容尽量去揣测代码意图。ES5严格模式（ie6/7/8/9除外）则不再揣测，给call/apply传入的任何参数不再转换。
'use strict'
function fun() {
alert(this);
}
fun.call(null) // null
fun.call(undefined) // undefinedjs的继承机制
js中有三种继承方式:
1、js原型（prototype）继承:
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayHello=function(){
alert("使用原型得到Name："+this.name);
}
var per=new Person("马小倩",21);
per.sayHello(); //输出：使用原型得到Name:马小倩
function Student(){}
Student.prototype=new Person("洪如彤",21);
var stu=new Student();
Student.prototype.grade=5;
Student.prototype.intr=function(){
alert(this.grade);
}
stu.sayHello();//输出：使用原型得到Name:洪如彤
stu.intr();//输出：5
2、构造函数继承
function Parent(name){
this.name=name;
this.sayParent=function(){
alert("Parent:"+this.name);
}
}
function Child(name,age){
this.tempMethod=Parent;
this.tempMethod(name);
this.age=age;
this.sayChild=function(){
alert("Child:"+this.name+"age:"+this.age);
}
}
var parent=new Parent("江剑臣");
parent.sayParent(); //输出：“Parent:江剑臣”
var child=new Child("李鸣",24); //输出：“Child:李鸣 age:24”
child.sayChild();
3、call、apply实现继承
function Person(name,age,love){
this.name=name;
this.age=age;
this.love=love;
this.say=function say(){
alert("姓名："+name);
}
}
//call方式
function student(name,age){
Person.call(this,name,age);
}
//apply方式
function teacher(name,love){
Person.apply(this,[name,love]);
//Person.apply(this,arguments); //跟上句一样的效果，arguments
}
//call与aplly的异同：
//1,第一个参数this都一样,指当前对象
//2,第二个参数不一样：call的是一个个的参数列表；apply的是一个数组（arguments也可以）
var per=new Person("武凤楼",25,"魏荧屏"); //输出：“武凤楼”
per.say();
var stu=new student("曹玉",18);//输出：“曹玉”
stu.say();
var tea=new teacher("秦杰",16);//输出：“秦杰”
tea.say();
transition transfrom translate animation有什么区别？
transition：过渡；transfrom：变换；translate：平移;animation：动画;
CSS3动画和js动画
css3在性能上可以快速加载，但是缺点就是 IE8或以下不支持，而且复杂的动画效果写起来比较困难
js兼容性比较强，能实现比较复杂的代码，缺点就是加载需要时间
bootsrtap封装jQuery插件的方式
用button.js举例
!function ($) {
"use strict";
var Button = function(element, options){
this.$element = $(element)
this.options = $.extend({}, Button.DEFAULTS, options)
}
Button.DEFAULTS = {}
Button.prototype.toggle = function(){}
function Plugin(options){
return this.each(function(){
...
new Button(this,options)
...
})
}
var old = $.fn.Button;
$.fn.Button = Plugin;
$.fn.Buttn.Contructor = Button;//将插件类暴露给外界,可以修改和添加类里面的方法,如$.fn.Buttn.Contructor.prototype.show = function(){}
// 避免命名空间冲突
$.fn.Button.noConflict = function(){
$.fn.Button = old;
return this;
}
}(window.jQuery);
js中new关键字的理解
new是用来实例化一个对象。
// 定义类 类名字是 classA
function classA(){
this.name=1;
}
classA.prototype.show = function(){
alert(this.name);
};
// 用new实例化
var b = new classA();
b.show();
var b = new classA();这句话，new的作用流程是：
1、创建一个新的对象，这个对象的类型是object；
2、查找class的prototype上的所有方法、属性，复制一份给创建的Object
3、将构造函数classA内部的this指向创建的Object
4、创建的Object的__proto__指向classA的prototype，b.__proto__ = classA.portotype
5、执行构造函数classA
6、返回新创建的对象给变量b
句话总结：new关键字以ClassA()为模板创建了一个新的对象，它复制了ClassA构造器中的所有成员变量，同时this指向新创建的对象。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。