jQuery中data()方法用法实例


Posted in Javascript onDecember 27, 2014

本文实例讲述了jQuery中data()方法用法。分享给大家供大家参考。具体分析如下:

此方法可以向匹配元素附加数据,或者从匹配元素获取数据。

语法结构一:

$(selector).data(name,value)

参数列表:

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

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>data()函数-三水点靠木</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","三水点靠木欢迎您");

  })

  $("#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,值为“三水点靠木欢迎您”的数据,然后利用数据名称返回。

语法结构二:

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

$(selector).data(name)

参数列表:

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

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>data()函数-三水点靠木</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","三水点靠木欢迎您");

  })

  $("#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,值为“三水点靠木欢迎您”的数据,然后利用数据名称返回。

语法结构三:

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

$(selector).data(properties)

参数列表:

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

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>data()函数-三水点靠木</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="https://3water.com/" />

<title>data()函数-三水点靠木</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="三水点靠木欢迎您";

  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程序设计有所帮助。

Javascript 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
Javascript中正则表达式的全局匹配模式分析
Apr 26 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
prototype.js常用函数详解
Jun 18 Javascript
bootstrap table小案例
Oct 21 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
jQuery中index()方法用法实例
Dec 27 #Javascript
jQuery中get()方法用法实例
Dec 27 #Javascript
jQuery的context属性用法实例
Dec 27 #Javascript
jQuery对象的selector属性用法实例
Dec 27 #Javascript
jQuery对象的length属性用法实例
Dec 27 #Javascript
jQuery中size()方法用法实例
Dec 27 #Javascript
jQuery中each()方法用法实例
Dec 27 #Javascript
You might like
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
PHP递归创建多级目录
2015/11/05 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
javascript 节点遍历函数
2010/03/28 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
浅谈python迭代器
2017/11/08 Python
python生成随机图形验证码详解
2017/11/08 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
Python3多线程基础知识点
2019/02/19 Python
python异常处理和日志处理方式
2019/12/24 Python
python 模拟登陆163邮箱
2020/12/15 Python
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
《天游峰的扫路人》教学反思
2014/04/25 职场文书
促销活动总结怎么写
2014/06/25 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
JavaScript文档对象模型DOM
2021/11/20 Javascript
nginx配置之并发频次限制
2022/04/18 Servers