jQuery中data()方法用法实例
语法结构一:
参数列表:
| 参数 | 描述 |
| name | 存储的数据名称。 |
| value | 将要存储的任意数据。 |
实例代码:
<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欢迎您”的数据，然后利用数据名称返回。
语法结构二:
从匹配元素中返回指定数据名称的附加的数据。
参数列表:
| 参数 | 描述 |
| name | 存储的数据名称。 |
实例代码:
<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欢迎您”的数据，然后利用数据名称返回。
语法结构三:
使用键/值对对象向匹配元素添加数据。
参数列表:
| 参数 | 描述 |
| properties | 一个用于设置数据的键/值对。 |
实例代码:
<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的数据，然后通过数据名和键取得附加的数据值。
语法结构四:
使用对象方式为指定元素附加数据。
参数列表:
| 参数 | 描述 |
| object | 一个用于设置数据的对象。 |
实例代码:
<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()方法用法实例的更多相关文章
- jQuery中on()方法用法实例详解
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...
- jQuery中on()方法用法实例
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- jQuery中attr()方法用法实例
本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...
- jQuery中animate()方法用法实例
本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...
- jQuery中index()方法用法实例
本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值.索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值 ...
- 解析jQuery中extend方法--用法《一》
extend方法在jQuery中是一个很重要的方法,jQuey内部用它来扩展属性方法.常用语jQuery插件开发. jQuery提供了两个方法,$.extend和$.fn.extend,两个方法内部实 ...
- 对 jQuery 中 data 方法的误解
一直以来都认为新版本中 data 是调用 dataset 实现的,对于低版本IE则采用 getAttribute其实一直是我误解了,也不知道最初这个想法是怎么来的.难道我被盗梦了? 今天 谢亮 兄弟和 ...
- jQuery 中 data 方法的实现原理
前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQuery 中 data 方法是如何实现的,结果答 ...
随机推荐
- HTML5网站如何做到完全不需要jQuery
jQuery是现在最流行的JavaScript工具库. 据统计,目前全世界57.3%的网站使用它.也就是说,10个网站里面,有6个使用jQuery.如果只考察使用工具库的网站,这个比例就会上升到惊人的 ...
- 关于button和form提交的一些问题
1.form 中type 为submit 和button的区别 submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了. 如果表单在点击提交按钮后需要用JS进行处理( ...
- nodejs里的module.exports和exports的关系
关于node里面的module.exports和exports的异同,网上已经有很多的资料,很多的文章,很多的博客,看了很多,好像懂了,又好像不懂,过几天又不懂了...大致总结是这样的: //下面这种 ...
- 阿里云消息队列MQ_HTTP接入 for .NetCore 简单例子
, , )).TotalMilliseconds; , , )).TotalMilliseconds; ) ...
- 使用 Fastlane 实现 IOS 持续集成
简介 持续集成是个“一次配置长期受益”的工作.但很多小公司都没有.以前在做Windows开发配置感觉简单一些,这次配置iOS的,感觉步骤还挺多.整理出来,分享给大家,不正确的地方请及时指正. 本文主要 ...
- linux：手动校准系统时间和硬件CMOS时间
windows下OS时间和主板CMOS芯片里的时间通常是一致的,但是linux却不一定,在无法联网自动校准时间的情况下,只能手动调整: 查看系统时间 date 调整系统时间 sudo date -s ...
- 20145230GDB调试汇编堆栈过程分析
20145230GDB调试汇编堆栈过程分析 分析过程 出现的问题:一开始无法编译,是因为我们的Linux中没有安装一个库. 进入之前先设置断点,之后disassemble可以获取汇编代码,用i r指令 ...
- .Net分布式异常报警系统-服务端Service
服务端的2个Service 1. HandleService: 从Redis中获取异常信息, 入库并发送通知到相关责任人. 2. HealthyCheckService: 对站点指定页面进行模拟访问 ...
- Bootstrap系列 -- 8. 代码显示
一. Bootstrap中的代码块 代码块一般在博客中使用的较多,比较博客园中提供的贴代码. 在Bootstrap中提供了三种形式的代码显示 1. 使用<code></code> ...
- MPLS
Multiprotocol Label Switching From Wikipedia, the free encyclopedia "MPLS" redirects here. ...