语法结构一:

复制代码代码如下:
$(selector).data(name,value)

参数列表:

参数 描述
name 存储的数据名称。
value 将要存储的任意数据。

实例代码:

复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>data()函数-XXX</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#add").click(function(){
    $("div").data("mydata","XXX欢迎您");
  })
  $("#show").click(function(){
    $("div").text($("div").data("mydata"));
  })
})
</script>
</head>
<body>
<div></div>
<button id="add">向元素添加数据</button>
<button id="show">显示添加的数据</button>
</body>
</html>

以上代码能够在匹配的div元素上附加名称mydata，值为“XXX欢迎您”的数据，然后利用数据名称返回。

语法结构二:

从匹配元素中返回指定数据名称的附加的数据。

复制代码代码如下:
$(selector).data(name)

参数列表:

参数 描述
name 存储的数据名称。

实例代码:

复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>data()函数-XXX</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#add").click(function(){
    $("div").data("mydata","XXX欢迎您");
  })
  $("#show").click(function(){
    $("div").text($("div").data("mydata"));
  })
})
</script>
</head>
<body>
  <div></div>
  <button id="add">向元素添加数据</button>
  <button id="show">显示添加的数据</button>
</body>
</html>

以上代码能够在匹配的div元素上附加名称mydata，值为“XXX欢迎您”的数据，然后利用数据名称返回。

语法结构三:

使用键/值对对象向匹配元素添加数据。

复制代码代码如下:
$(selector).data(properties)

参数列表:

参数 描述
properties 一个用于设置数据的键/值对。

实例代码:

复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>data()函数-XXX</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#add").click(function(){
    $("div").data("mydata",{username:"daoliang"});
  })
  $("#show").click(function(){
    alert($("div").data("mydata").username);
  })
})
</script>
</head>
<body>
<div></div>
<button id="add">把数据添加元素</button>
<button id="show">获取添加到元素的数据</button>
</body>
</html>

以上代码能够以键/值对方式为div附加名称为mydata的数据，然后通过数据名和键取得附加的数据值。

语法结构四:

使用对象方式为指定元素附加数据。

复制代码代码如下:
$(selector).data(object)

参数列表:

参数 描述
object 一个用于设置数据的对象。

实例代码:

复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>data()函数-XXX</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var mytest=new Object();
  mytest.first="XXX欢迎您";
  mytest.second="JQuery专区";
  $("#add").click(function(){
    $("div").data(mytest);
  })
  $("#show").click(function(){
    alert($("div").data("second"));
  })
});
</script>
</head>
<body>
  <div></div>
  <button id="add">把数据添加元素</button>
  <button id="show">获取添加到元素的数据</button>
</body>
</html>

以上代码以对象方式附加数据，并且取得附加的数据值。

jQuery中data()方法用法实例的更多相关文章

  1. jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...

  2. jQuery中on()方法用法实例

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...

  3. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  4. jQuery中attr()方法用法实例

    本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...

  5. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  6. jQuery中index()方法用法实例

    本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值.索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值 ...

  7. 解析jQuery中extend方法--用法《一》

    extend方法在jQuery中是一个很重要的方法,jQuey内部用它来扩展属性方法.常用语jQuery插件开发. jQuery提供了两个方法,$.extend和$.fn.extend,两个方法内部实 ...

  8. 对 jQuery 中 data 方法的误解

    一直以来都认为新版本中 data 是调用 dataset 实现的,对于低版本IE则采用 getAttribute其实一直是我误解了,也不知道最初这个想法是怎么来的.难道我被盗梦了? 今天 谢亮 兄弟和 ...

  9. jQuery 中 data 方法的实现原理

    前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQuery 中 data 方法是如何实现的,结果答 ...

随机推荐

  1. 隐写技巧——利用JPEG文件格式隐藏payload

    0x00 前言 继续对图片隐写技巧的学习,这次是对JPEG文件格式的学习和理解.同PNG文件的格式对比,JPEG文件相对简单,读取其中隐藏payload的方式大同小异,两者区别在于文件格式不同,可供利 ...

  2. BZOJ 2724: [Violet 6]蒲公英

    2724: [Violet 6]蒲公英 Time Limit: 40 Sec  Memory Limit: 512 MBSubmit: 1633  Solved: 563[Submit][Status ...

  3. AngularJs 1.5 $location获取url参数

    地址:http://localhost/waservice.html?id=17 获取参数id的值 app.config(['$locationProvider', function ($locati ...

  4. php 正则匹配中文(转)

    我使用正则表达式来匹配中问的时候,出现了无法匹配的问题,问题如下 PCRE does not support \L, \l, \N{name}, \U, or \u at offset 2 我原来的匹 ...

  5. .net混淆、反编译工具调查

    常用的工具列表[比较常见的] 混淆器.加密 Dotfuscator VS默认带的工具,不过是个社区版 强度不大 dotNET Reactor 使用了NativeCode 和混淆的形式 Xenocode ...

  6. AngularJS中的事件

    欢迎大家指导与讨论 : ) 前言  Angular的作用域在本质上是分层次的(有的住户在低层, 有的住户在高层), 它们可以通过父子关系很自然地进行沟通.但通常, 这种沟通是单向的(父->子的单 ...

  7. JS明确指定函数的接受者

    由于方法和值为对象的属性值没什么区别,因此很容易提取对象的方法作为回调函数直接传递给高阶函数.但这也很容易忘记应明确指定方法的接受者.例如,一个字符串缓冲对象使用数组来存储字符串. var buffe ...

  8. python强大的区间处理库interval用法介绍

    原文发表在我的博客主页,转载请注明出处 前言 这个库是在阅读别人的源码的时候看到的,觉得十分好用,然而在网上找到的相关资料甚少,所以阅读了源码来做一个简单的用法总结.在网络的路由表中,经常会通过掩码来 ...

  9. Nodejs进阶：基于express+multer的文件上传

    关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...

  10. PKI系统深入介绍

    公钥基础设施(Public Key Infrastructure,简称PKI)是目前网络安全建设的基础与核心,是电子商务安全实施的基本保障,因 此,对PKI技术的研究和开发成为目前信息安全领域的热点. ...