1、如何多次给同一元素绑定多种同类型的事件?
1、使用addEventListener()方法
2、使用on事件名的方式
3、jQuery使用bind()方法
2、说明 localStorage 和 sessionStorage 的区别
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅、是会话级别的存储。只允许同一窗口访问。
而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。同源可以读取并修改localStorage数据。
3、localStorage 和 sessionStorage 和 cookies 的区别
特性 | Cookie | localStorage | sessionStorage |
数据的声明周期 | 一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie ,默认是关闭浏览器后失效 | 除非被清楚,否则永久保存 | 仅在当前会话下有效,关闭页面或浏览器后被清楚 |
存放数据的大小 | 4k左右 | 一般为5MB | |
与服务器端通信 | 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 | 仅在客户端(即浏览器)中保存,不参与和服务器的通信 | |
易用性 | 需要程序员自己封装,原生的cookie接口不友好 | 原生接口可以接受,亦可再次封装来对Object和Array有更好的支持 |
4、使用 jquery 完成一个 ajax 请求
1.$().load(url,callback)
2.$.get(url,data,callback)
3.$.ajax({选项})
url 地址
method 方法(GET,POST)
data 提交给服务器的数据
dataType 服务器返回的数据
timeout 超时时间,单位毫秒
success 成功后的回调函数
error 失败后的回调函数
complete 完成后的回调函数
xhr 回调函数获取xhr引用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> 6 <title>jquery</title> 7 </head> 8 <body> 9 <div id="content"></div> 10 <button id="btnLoad">Load载入</button> 11 <button id="btnGet">Get载入</button> 12 <button id="btnAjax">Ajax载入</button> 13 14 </body> 15 </html> 16 <script> 17 $(document).ready( function () { 18 19 $('#btnLoad').click( function () { 20 $('#content').load('/content/ p',function () { 21 alert('载入成功'); 22 }); 23 }); 24 25 $('#btnGet').click( function () { 26 $.get('/content/',null,function (response) { 27 $('#content').html(response); 28 }); 29 }); 30 31 $('#btnAjax').click( function () { 32 $.ajax({ 33 url:'/content/', 34 method:'Get', 35 data:null, 36 success: function (response) { 37 $('#content').html(response); 38 } 39 }); 40 }); 41 42 43 44 45 }); 46 </script>
5、http 常见的状态码有哪些?
200 – 请求成功
301 – 资源(网页等)被永久转移到其它URL
404 – 请求的资源(网页等)不存在
500 – 内部服务器错误