query中的bind(),live(),delegate(),on()有什么区别？

bind()方法

bind()方法用于对匹配的元素进行特定事件的绑定。它直接绑定在现有的元素节点上，也很好的解决了浏览器在事件处理中的兼容问题。例如，它的调用格式如下：

bind(type, [data], fn) //事件类型(必选)，传递的参数(可选)，相关的函数$('a').bind('click',function(){alert('that tickles!')})

JQuery扫描文档找出所有的$(‘a’)元素，并把alert函数绑定到每个元素的click事件上。

 live()方法

live()是事件委托的概念来执行，把节点的处理委托给了document，向当前或未来的匹配元素添加一个或多个事件处理器。

live(type, [data], fn) //事件类型(必选)，传递的参数(可选)，相关的函数

$('a').live('click',function(){alert('That tickles!')})

它是将函数绑定到$(document)元素上，并使用'click'和'a'作为参数。只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与'a'这一CSS选择器是否匹配，如果都是的话，则执行函数。

delegate()方法

delegate()方法的行为有点类似live()。但是不是把选择器和事件的信息附加到了document上，而是可以自行选择它要附加的DOM元素，这个技术可以让事件的委托正常工作。我们的选择又多了一些灵活性，不单可以利用事件委托，还可以选择委托的对象。它适用于当前或未来的元素（比如由脚本创建的新元素）。

delegate(selector,[type],[data],fn)//元素节点(字符串形式，一般是子级元素childselector)，事件类型，传递的参数(可选)，相关的函数$('#container').delegate('a','click',function(){ alert("That tickles!") });

JQuery扫描文档查找$(‘#container’)，并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。

 on()方法

on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。它是在1.7版本中被提出来的，提供绑定事件处理程序所需的所有功能。用于替换 bind()、delegate()和 live()。

on(events,[selector],[data],fn) // 事件类型，元素节点(可选)，传递的参数(可选)，相关的函数

.常见问题

问题: bind(),live(),delegate(),on()的特点及区别？

解决方案

bind()的特点：直接绑定在已经存在的元素上，但是对在它执行完后动态添加的那些元素上不起作用。因为直接绑定在具体的元素上，响应事件及时，它是出现最早的一种绑定事件的方法。这种方法很浪费资源，引起性能问题，因为它要匹配选择器中的每一项并且挨个设置相同的事件处理程序。如果在页面加载前要处理添加事件的话，会影响加载效率的。在jquery1.7版本以前比较受推崇。在jquery1.7版本之后，官方推荐使用on()方法代替。在jquery3.0版本之后，已经删除该方法。

live()的特点：与bind()的实现原理却不同。live()方法附加事件处理程序在document上通过冒泡来关联匹配到相应的元素和事件信息。对新添加的元素依然有效。不需要在每个元素上去绑定事件，而只在document上绑定一次就可以了。可以在document ready之前就可以绑定那些需要的事件。但是jquery1.9版本之后，已经被弃用了。

delegate()方法的特点：更精确的小范围使用事件代理，性能优于live()。它可以自由选择附加的选择器和事件信息的位置，把事件绑定到具体元素的上一级较稳定（不会动态地添加或者删除、变化）的元素上，缩短了事件冒泡的路径。同样对新添加的元素依然有效。在jquery3.0版本之后，已经删除该方法。

on()的特点：是以上三种方法的统一。可以使用一个方法，设置不同参数值来实现上述三种方法的功能。简化了jQuery代码库，并删除一个界别的重定向。

JS有哪几种传参方式?

js中的传值方式，对于简单类型（比如字符串和数值）就是值传递和引用传递。但是HTML页面之间如何传递数据？

如果是动态页面，根本就不需要考虑这个问题，可以如果是一个纯HTML+JavaScript的应用，

无法使用数据库等操作，没有保存数据，光依靠前端的手段该如何实现页面之间的传递数据和参数呢？

（2）知识剖析：

第一种常见的是通过url传值，

主要原理是：通过GET方法然后获取URL从中解析出传递的数据

//获取到的url值是以"?"开头的url

var deocdeURL = decodeURI(location.search);//解码url

//封装的解析url的方法

function doClickfamg(){

var pureURL = deocdeURL.split("?")[1];//获取"?"以后的参数

var valuesArray = pureURL.split("&");

var url_Object = new Object();

for(var i = 0;i< valuesArray.length;i++){

var key_value = valuesArray[i].split("=");

//动态给对象添加key和value

//是以传递过来的key和value作为解析后的新的对象的key和value

url_Object[key_value[0]] = key_value[1];

}

return url_Object;//返回对象

}

获取url传的值

//调用解析方法

var mydecodeURI = doClickfamg();

//比如我要知道传递的key2的value是什么

alert(mydecodeURI.key2);

优缺点

优点

1.URL地址法简洁易用可同时传递多个字符型参数；

2.URL地址法可以很方便的在页面之间切换并传递参数，无需额外的处理，基于正常情况比较不会性能损失；

不足：

3.URL传递参数长度受限，最大为2K；

4.URL只能传递字符型参数，传递中文时由于发送页面和接收页面的字符编码方式不一样而导致参数解析处理错误，参数包含中文时可能出现乱码或者参数接收错误；

5.URL地址在客户端可见，所以涉及隐私的参数需进行加密后才能进行传递，不加密传输会导致信息泄露，产生安全隐患。

2.3、Cookie

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时，他的名字可以记录在 cookie 中。

在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储

Cookie原理和特点

1.第一次访问网站的时候，浏览器发出请求，服务器响应请求后，会将cookie放入到响应请求中，

在浏览器第二次发请求的时候，会把cookie带过去，服务端会辨别用户身份，当然服务器也可以修改cookie内容

2.cookie 是有大小限制的，每个 cookie 所存放的数据不能超过4kb，如果 cookie 字符串的长度超过4kb，则该属性将返回空字符串。

3.由于 cookie 最终都是以文件形式存放在客户端计算机中，所以查看和修改 cookie 都是很方便的，这就是为什么常说 cookie 不能存放重要信息的原因。

4.一个 cookie 的生命周期就是在浏览器关闭的时候结束。想要 cookie 能在浏览器关掉之后使用，就要为 cookie 设置有效期

在js中操作cookie

document.cookie = "userName = mike";

还可以在cookie中添加过期时间，默认在浏览器关闭时删除cookie

document.cookie = "userName = mike expires = Mon,14 Oct 2018 12:00:00 GMT";

读取cookie

let data = document.cookie;

、H5 web storage

存储有效期

localStorage

永久性。除非WEB应用刻意删除存储的数据，或者用户通过设置浏览器配置来删除，否则数据会一直保留在用户电脑上，永不过期。

实际上，localStorage的数据是写入磁盘中，每次读取数据时，实际上是从硬盘驱动器上读取这些字节。

sessionStorage

窗口或标签页被永久关闭，则通过sessionStorage存储的数据也被删除。

常用操作

localStorage.setItem("x",1);//以"x"的名字存储一个数值

localStorage.x = 1;//直接向 Web 存储对象添加键/值对

localStorage.getItem("x");//获取数值

localStorage.x;//直接从 Web 存储对象中检索键/值对

localStorage.removeItem("x");//删除“x”项。

//removeItem是唯一通用的能删除单个名值对的方式。（因为IE8不支持delete操作符）

localStorage.clear();//全部删除。唯一能删除存储对象中所有名值对的方式

//将一个数组存储为字符串

var myArray = new Array('First Name', 'Last Name', 'Email Address');

localStorage.formData = JSON.stringify(myArray);

//检索数组的字符串版本并将它转换成一个可用的 JavaScript 数组

var myArray = JSON.parse(localStorage.formData);

常见问题：

这几种页面传参方式选用哪种比较好

解决方案：

根据页面功能来选择比较好，比如像登录页，就可以使用ajax或者angular 通过URL来传递参数进行页面验证。

localStoragesessionStorage则可以在像任务2-4上这种页面上使用，

而cookie的用途就是解决"如何记录客户端的用户信息"，在需要存储诸如用户名，搜索历史等数据时便可以使用