发表于: 2020-01-08 23:13:21

1 1253


今天的收获

js有哪几种传参方式?

一、URL

把参数值附在url后面传递到其他页面

如:http://xxx.com/login.html?user=lol&pwd=66666

其中“user=lol”和“pwd=66666”就是我们传递的参数名称和值。

url和参数之间用"?"隔开,多个参数之间用"&"符号连接。


二、H5 web storage

localStroage 和 sessionStorage

1、sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

2、localStorage HTML5本地存储web storage特性的API之一,用于将大量数据(最大5M)保存在浏览器中

保存后数据永远存在不会失效过期,除非手动清除。不参与网络传输。一般用于性能优化,可以保存图片、js、css、html 模板、大量数据。

3、数据以 键/值 (key/value)对存在, web网页的数据只允许该域访问使用

4、不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

保存数据:localStorage.setItem(key,value);

读取数据:localStorage.getItem(key);

删除单个数据:localStorage.removeItem(key);

删除所有数据:localStorage.clear();

得到某个索引的key:localStorage.key(index);

5、数据储存:

在有多组数据需要储存时,一般:

.建立一个新的对象,然后将多组数据储存在对象中,

.使用 JSON.stringify() 来将对象转换为字符串,

.使用localStorage.setItem(key,value);保存数据。

6、数据提取:

.使用localStorage.getItem(key)读取数据

. 使用 JSON.parse 方法将字符串转换为 JSON 对象。

. 直接引用对象的各个值


三、Cookie

Cookie是当你浏览某网站时,网站存储在你机器上的一个小文本文件, 它记录了你的用户ID,密码、浏览过的网页、停留的时间等信息,当你再次来到该网站时, 网站通过读取Cookie,得知你的相关信息,就可以做出相应的动作,如在页面显示欢迎你的标语, 或者让你不用输入ID、密码就直接登录等等

Cookie一般有两个作用。

第一个作用是识别用户身份。

比如用户 A 用浏览器访问了 http://a.com,那么 http://a.com 的服务器就会立刻给 A 返回一段数据「uid=1」(这就是Cookie)。当 A 再次访问 http://a.com 的其他页面时,就会附带上「uid=1」这段数据。

同理,用户 B 用浏览器访问 http://a.com 时,http://a.com 发现 B 没有附带 uid 数据,就给 B 分配了一个新的 uid,为2,然后返回给 B 一段数据「uid=2」。B 之后访问 http://a.com 的时候,就会一直带上「uid=2」这段数据。

借此,http://a.com 的服务器就能区分 A 和 B 两个用户了。

第二个作用是记录历史。

假设 http://a.com 是一个购物网站,当 A 在上面将商品 A1 、A2 加入购物车时,JS 可以改写 Cookie,改为「uid=1; cart=A1,A2」,表示购物车里有 A1 和 A2 两样商品了。

这样一来,当用户关闭网页,过三天再打开网页的时候,依然可以看到 A1、A2 躺在购物车里,因为浏览器并不会无缘无故地删除这个Cookie。

借此,就达到里记录用户操作历史的目的了。

Cookie的一些特点。

1.Cookie可以使用 js 在浏览器直接设置(用于记录不敏感信息,如用户名), 也可以在服务端通使用 HTTP 协议规定的set-cookie来让浏览器种下Cookie,这是最常见的做法。

2.每次网络请求 Request headers 中都会带上Cookie。所以如果Cookie太多太大对传输效率会有影响。

3.一般浏览器存储Cookie最大容量为4k,所以大量数据不要存到Cookie。


四、form表单


Form表单传值也是通过URL传递参数

通常使用的表单的提交方式主要是:

post和get两种。

两者的区别在于:post方式是把数据内容放在请求的数据正文部分,没有长度的限制;

get方式则是把数据内容直接跟在请求的头部的URL后面,有长度的限制。

而一般在表单的数据提交中,都会选择POST方式,

因为使用GET方法数据是通过URL传递的,在地址栏中会直接看到传递的数据,这样就缺少安全性。

而使用POST传递时,是把提交的数据放置在HTTP包的包体中,地址栏不会看到数据。




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


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

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


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


返回列表 返回列表
评论

    分享到