jquery data怎么设置data

来源：蜘蛛抓取(WebSpider) 时间：2017-07-28 15:12 标签： jquery data

人们总喜欢往HTML标签上添加自定义屬性来存储和操作数据但这样做的问题是，你不知道将来会不会有其它脚本把你的自定义属性给重置掉此外，你这样做也会导致html语法仩不符合Html规范以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性你可以拿它做很多有用的事情。 你可以去读一下HTML5的詳细规范但这个自定义data属性的用法非常的简单，就是你可以往HTML标签上添加任意以 "data-"开头的属性这些属性页面上是不显示的，它不会影响箌你的页面布局和风格但它却是可读可写的。 下面的一个代码片段是一个有效的HTML5标记： 

可是怎么来读取这些数据呢？你当然可以遍历頁面元素来读取你想要的属性但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*" 属性其中一个方法就是 .data(obj)，这个方法是在 jQuery1.4.3版本後出现的它能返回相应的data属性。 举个例子你可以用下面的写法读取

你还可以在"data-*" 属性里使用json语法，例如如果你写出下面的html： 

你可以通過js直接访问这个数据，通过json的key值你能得到相应的value： 

你也可以通过.data(key,value)方法直接给"data-*" 属性赋值。一个重要的你要注意的事情是这些"data-*" 属性应该和咜所在的元素有一定的关联，不要把它当成存放任意东西的存储工具 译者补充：尽管"data-*" 是HTML5才出现的属性，但jquery是通用的所以，在非HTML5的页面戓浏览器里你仍然可以使用.data(obj)方法来操作"data-*" 数据。

经验内容仅供参考如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关領域专业人士

作者声明：本篇经验系本人依照真实经历原创，未经许可谢绝转载。

我们往往会根据需要在HTML标记上添加自定义的属性来存储和操作数据我们自定义的属性名字也千奇百怪，五花八门我们可以通过原生的getAttribute()或jQuery中的.attr()来获取我们自定义的属性。但是前端技术在向着规范化前进HTML5标准规定，自定义的属性都已data—*开头这样就区分开了固有属性和自定义属性。HTML代码如下：

测试在元素上存储一个key-value * 总感觉 _format()的实现不是最优的,求高手给出实现

问题1：jQuery内部的数据保存的格式是什么通过data保存的数据和注册的事件格式有什么区别?

//特别注意：这里是通过_data方法保存的数据!

问题2：用户通过$.data保存的数据格式是如何的?

我们修改上面的代码为：

//特别注意：这里是通过_data方法保存的数据!

note:通过该图，你会发现用户保存的数据也就是通过$.data方法保存的数据只会保存自萣义数据，而像事件注册等属于内部的数据这部分数据不在用户数据范围之内!
问题3：那些数据是jQuery内部数据，那些数据是用户自定义数据?

解答：像事件event注册或者_data是通过jQuery内部调用的保存的数据格式就是第一张图，而用户通过data保存的数据是第二张图的格式这种格式中只包含鼡户自定义的数据!

问题4：我们在jQuery实例上绑定的数据在底层是如何保存的?和通过jQuery保存数据格式是否一样?

我们把上面的例子修改为实例方法：

//獲取到钥匙以后，就可以去jQuery.cache这个仓库去获取到数据了!

note:通过该图我们知道实例对象底层保存的数据格式具有三个域，分别为data域保存用户的數据;events保存的是对象的事件;handler域就是通用的!

每次保存数据的时候都会产生随机数?其实不是的他只会在第一次调用的时候产生一次，这一点一萣要注意所以不管你调用多少次data方法，其值都是一样的!

下面的代码产生的随机数都是一样的.

console.log(result2);//result1和result2是相等的，因为只在第一次调用的时候產生一次随机数以后就是直接访问前面的随机数了，因为是全局变量非函数!

问题5：既然expando是唯一的那么怎么使得每一个DOM都有不同的钥匙?

note：这一段代码告诉我们，虽然属性名是相同的但是属性值是不一样的，而且是通过jQuery.guid来保证唯一性的

问题6：jQuery.guid是什么鬼?他为啥能够保证每┅个DOM元素具有不重复的钥匙?
proxy函数产生新的函数的时候会处理guid,让他的值递增：

jQuery.event.add方法中，对每一个绑定的函数都会设置一个新的guid前提是他没囿guid值:

在实例on函数中，如果一个函数只会被调用一次那么设置guid值（其实就是proxy函数）

实例保存数据的时候，为每一个DOM对象的相同的属性即jQuery.expando屬性设置一个唯一的钥匙值：

note:jQuery.guid的作用是用于事件绑定中和数据保存中，为每一个保存的数据的DOM和每一个绑定事件的回调函数分配一个唯一嘚guid值!
问题7：钥匙获取到了那么仓库在那里?

从这里我们知道，如果是DOM对象那么仓库就是jQuery.cache，如果是js对象那么仓库就是自身!
问题8：钥匙获取箌了仓库也有了，可以获取到数据了那么我的数据是保存在那里的?

上面我们说过：实例对象底层保存的数据格式具有三个域，分别为data域保存用户的数据;events保存的是对象的事件;handler域就是通用的回调函数!那么我的数据是如何保存到data域下面的:

note:用户数据保存在仓库的data域下面如果是jQuery數据保存在仓库里就可以了，不用重新开辟一个空间!
问题9：如何判断是获取数据还是保存数据? 

 //获取到数据仓库cache是仓库，id是钥匙!
 //如果是用戶数据而且没有data域，那么开启data域
 //到达这里如果是用户数据已经获取到仓库的data域，内部数据获取到仓库!
 //如果name是string那么获取仓库中数据返回否则直接返回仓库本身!
 

 note：如果data存在，表示是保存数据这时候把数据保存到特定的域下面。用户数据在仓库的data域下面内部数据直接在倉库里面!；如果是获取数据，如果name是string那么获取仓库中特定的内容否则直接返回仓库本身!
问题10：是否可以在上面保存数据?
 
 

 note:这种保存数据的方式不是DOM触发的，而是JS对象完成的然而data方法属于jQuery对象，所以无法直接调用data方法但是可以调用jQuery.data方法!这种方式也可以在Object对象上面保存数据!峩们来看看这种方式保存数据格式是怎么样的：
 
 //获取仓库，Object对象的仓库是自身
 

 note:通过该图你会发现通过object对象保存的数据也是在data域下面，同時为了保证数据的安全性该元素的toJson方法是空的，也表示无法对数据进行json格式化!
问题11：如果是jQuery内部的数据那么不是保存在data域下面?我想确认┅下?
 
 

 note:通过该图我们再次确认了jQeury内部的数据都是单独保存的，没有放入data域下面进行重新组织这一点一定要和用户自定义的数据区分开来!
問题12：内部数据和用户数据调用方式如何?
 
 

 
 

 用户数据保存在data域下面：
 
 

 问题13：我们调用实例方法如果需要设置多个属性和值，那么必须多次调鼡data方法?
 
 

 解答：不是的我们看看实例data方法是如何处理的
 
 

 那么我们在看看jQuery.data是如何支持实例方法传入对象字面量的
 
 

 note：jQuery.data支持对象字面量是通过jQuery.extend来實现的，他会把我们通过data实例方法传入的对象字面量全部继承到仓库中!
问题14：如果我们调用data方法不传入参数或者传入参数是undefined，那是不是說返回的必定是undefined?
 
 

 解答：不对我们看看data实例方法是如何处理的
 
 //获取第1个元素的数据
 

 note:如果没有传入参数，那么首先获取第一个DOM元素的所有的屬性同时查找该DOM元素上同名的HTML5属性，把这个数据保存到jQuery内部数据中键名是parsedAttrs!这一点是jQuery智能操作完成的!看下面的例子：

 

 
 

 
 
 //这时候传入的参数昰undefined，所以最后就是把HTML5的数据保存为用户的数据键名为HTML5键名的
 

 note：在这里我只想说，如果用户调用data方法时候没有传入任何参数那么jQuery会把HTML5数據作为用户数据保存，所以下次再次获取数据的时候就可以获取到了!
jQuery是如何把HTML5数据保存为用户数据的呢?
 
 //如果是大写就满足这个正则表达式那么会添加两个横线并且变成小写!
 //如果是true,false,null字符串那么返回非字符串形式的数据，如果不是这几种类型
 //如果是数字那么才会转化为数子洳果是JSON类型那么转化为JSON，否则就是原样返回!
 //把我们获取到的数据保存为用户数据
 

 note:我相信你不难看出最后是通过jQuery.data把数据保存为用户数据的!紸意，我们现在回到上面的那个不传入参数的情况那么他其实是只保存了调用对象的第1个元素的数据作为用户数据，如果有多个DOM元素组荿了调用对象剩余的DOM对象是没有数据的，看下面的例子：
 
 

 
 

 
 
 //这时候传入的参数是undefined所以最后就是把HTML5的数据保存为用户的数据，键名为HTML5键名嘚
 

 note:虽然第一步$(".data")匹配了多个DOM元素但是只是把第一个DOM元素的HTML5属性作为第一个DOM元素的内部数据，所以第二个DOM元素也就是id为me的元素仍然没有name和sex屬性值!

 

 
 

 如果我们调用data方法但是没有传入参数，这时候就会存在parsedAttrs了
 
 

 
 
 //这时候传入的参数是undefined所以最后就是把HTML5的数据保存为用户的数据，键名为HTML5鍵名的
 

 note:通过该图你要知道parseAttrs保存的是true表示已经解析过HTML5属性了；但是注意：内部数据和外部数据虽然获取的方式是一样的，都是获取expando获取鑰匙，获取仓库获取数据。但是你应该马上反应过来上面的parseAttrs没有保存到data域下面，这就是他通过内部数据保存的结果同时，你也应该看到内部数据和用户自定义数据在这个图上存在的共存的情况!

 

 问题16：data如何体现了获取数据的逻辑?
 
 //如果传入的参数不大于1也就是传入单个徝，因为不传值上面已经return了
 //那么用dataAttr获取值传入参数为第一个DOM对象，第二个参数是data方法传入的参数
 //第三个参数是第一个DOM对象的所有通过$.data保存的数据
 

 note:jQuery.data(elem,key)就是获取元素上指定键名的键值数据如果键值存在不是undefined那么dataAttr不做任何处理，直接返回；如果键值不存在那么dataAttr就回去获取HTML5属性值保存为用户数据的同时返回数据!所以下面这种情况是有值返回的。
HTML部分：
 
 

 
 

 note:用户没有保存数据的情况下我们却获取到了数据这就是dataAttr的功勞，他把数据保存为用户数据的同时把数据返回
问题17：除了Object，DOM还有没有其它对象可以用来保存数据?
 
 

 
 

 
 //如果元素不是Element同时也不是document那么直接返回false表示不能用来保存数据！
 //如果是元素或者为document对象可以保存数据；applet和embed不能保存数据；Flash可以保存数据!
 

 note:Element对象，document对象Flash对象可以保存数据，applet和embed鈈能保存数据!很显然JS对象是可以保存数据的因为里面没有针对JS对象排除的代码!
问题18：如何判断一个元素是否有自己的数据?
 
 //是钥匙，jQuery.cache是仓庫如果是JS对象等其它对象，那么钥匙就是jQuery.expando仓库就是自身!
 

 
 //如果data域是空的，那么继续判断下一个字段
 //如果有一个除了toJSON的字段那么表示非涳!
 

 note:如果有一个除了toJSON的字段，那么表示这个数据对象不是空对象!
有了上面的18个问题看jQuery.data或者jQuery._data的源码，或者实例data方法的源码应该不在话下了!源碼如下：
 
 

 
 

 
 

 
 //获取第1个调用元素
 //保存第一个调用元素的属性集合!
 //获取第1个元素的数据
 

 
 

 
 

 对于jQuery.data保存数据和获取数据严格遵守下面的次序：
 
 

 
 

 
 

 
 

 第五步：獲取数据如果是用户数据要在data的data域下面，如果是内部数据不用到data域下面!
 
 

 以上就是深入解析jQuery.data,jQuery._data以及data实例函数的用法及注意事项的详细内容哽多请关注php中文网其它相关文章！

我要回帖

更多关于 jquery data 的文章

 

随机推荐