您的位置：首页 > 编程技术 > js  >  详谈$.data()的用法和作用

详谈$.data()的用法和作用

 更新时间：2017年2月19日 10:00  点击：2252

jQuery.data 即$.data()。向元素附加数据，然后取回该数据

这是提供给客户端程序员使用的方法，它同时是setter/getter。

传一个参数，返回附加在指定元素的所有数据，即thisCachejQuery.data(el); // thisCache

传二个参数，返回指定的属性值jQuery.data(el, 'name');

传三个参数，设置属性及属性值jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu', {});

传四个参数，第四个参数pvt仅提供给jQuery库自身使用。即jQuery._data方法中传true。因为jQuery的事件模块严重依赖于jQuery.data，为避免人为的不小心重写在这个版本中加入的

$.data("#blog_stats","name","lixuekai")
jquery.js:2 Uncaught TypeError: Cannot set property 'toJSON' of undefined(…)data @ jquery.js:2(anonymous function) @ VM913:1
var s = $("#blog_stats")
undefined
s
[<div id=​"blog_stats">​…​</div>​]
$.data(s,"name","lixuekai")
"lixuekai"
$.data(s,"name")
"lixuekai"
$.data(s)
Object {name: "lixuekai"}
$.hasData(s)

true上面代码的调试图如下：

jQuery.hasData 用来判断HTMLElement或JS对象是否具有数据。返回true或false。即如果调用了jQuery.data方法添加了属性，则返回true。

升级简单的写法：selector.data("key","value").

实测如下图：

这是一个位置给装了2个对象数据。然后看看效果如何。

就看截图吧，代码就不贴啦。

//从被选元素中返回附加的数据。
$(selector).data(name)

//向被选元素附加数据。
$(selector).data(name,value)

//使用带有名称/值对的对象向被选元素添加数据。(上面传简单的key value 键值对，这个直接给对象，不用一个个传)
$(selector).data(object)

以上这篇详谈$.data()的用法和作用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

[!--infotagslink--]

相关文章

  • vue 数据(data)赋值问题的解决方案

    这篇文章主要介绍了vue 数据(data)赋值问题的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-29

  • Spring Data JPA 关键字Exists的用法说明

    这篇文章主要介绍了Spring Data JPA 关键字Exists的用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-06-10

  • Vue 重置data的数据为初始状态操作

    这篇文章主要介绍了Vue 重置data的数据为初始状态操作方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-29

  • JQuery基于FormData异步提交数据文件

    这篇文章主要介绍了JQuery基于FormData异步提交数据文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-02

  • Vue使用formData格式类型上传文件的示例

    这篇文章主要介绍了Vue使用formData格式类型上传文件的示例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-04

  • JavaScript中关联原型链属性特性

    这篇文章主要介绍了JavaScript中关联原型链属性特性的相关资料,需要的朋友可以参考下...2016-02-18

  • SpringData Repository接口用法解析

    这篇文章主要介绍了SpringData Repository接口用法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-08-27

  • 源码揭秘为什么 Vue2 this 能够直接获取到 data 和 methods

    本篇文章主要介绍的是Vue2 this 能够直接获取到 data 和 methods，阅读本文将能学到如何学习调试 vue2 源码、data 中的数据为什么可以用 this 直接获取到、methods 中的方法为什么可以用 this 直接获取到,需要的朋友可以参考一下...2021-09-23

  • Swift利用CoreData如何存储多种数据类的通讯录

    这篇文章主要给大家介绍了关于Swift利用CoreData如何存储多种数据类的通讯录的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧。...2020-06-30

  • vue data变量相互赋值后被实时同步的解决步骤

    这篇文章主要介绍了vue data变量相互赋值后被实时同步的解决步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05

  • Ajax+FormData+javascript实现无刷新表单信息提交

    在前端开发中ajax，formdata和js实现无刷新表单信息提交非常棒，接下来通过本文给大家介绍Ajax+FormData+javascript实现无刷新表单信息提交的相关资料,需要的朋友可以参考下...2016-10-25

  • PyQt5使用mimeData实现拖拽事件教程示例解析下

    这篇文章主要为大家介绍了PyQt5使用mimeData实现拖拽事件的教程示例解析，系列文章详见文中跳转链接，有需要的朋友可以借鉴参考下，希望能够有所帮助...2021-10-29

  • C# 使用multipart form-data方式post数据到服务器

    这篇文章主要介绍了C# 使用multipart form-data方式post数据到服务器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-03

  • spring data 连接mongodb的两种方式

    这篇文章主要介绍了spring data mongodb连接方式详解，本文给大家分享两种连接方式，通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-08-27

  • springdata jpa使用Example快速实现动态查询功能

    这篇文章主要介绍了springdata jpa使用Example快速实现动态查询功能，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-11-18

  • Angular.js指令学习中一些重要属性的用法教程

    这篇文章主要给大家介绍了关于Angular.js指令学习中一些重要属性的用法教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。...2017-05-27

  • perl模块Data::Dumper应用一例分享

    perl模块Data::Dumper应用一例，参见下面的代码...2020-06-29

  • 解决Spring Data Jpa 实体类自动创建数据库表失败问题

    这篇文章主要介绍了解决Spring Data Jpa 实体类自动创建数据库表失败问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-09-12

  • vue 解决data中定义图片相对路径页面不显示的问题

    这篇文章主要介绍了vue 解决data中定义图片相对路径页面不显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-14

  • Swift使用CoreData时遇到的一些填坑记录

    这篇文章主要给大家记录了在Swift使用CoreData时遇到的一些坑,以及介绍了CoreData在Swift 3.0中的一点改变，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。...2020-06-30