转载原地址  http://hanchaohan.blog.51cto.com/2996417/1271551

转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://hanchaohan.blog.51cto.com/2996417/1271551

 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>返回值:jQuerydata([key],[value])</title>
</head>
<body>
<!-- demo3 data方法的使用 -->
<a href="javascript:;" id="demo3">demo3</a>
<div></div>
<button id="clear">clear</button>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
/**
*返回值:jQuerydata([key],[value])
*key:存储的数据名
*value:将要存储的任意数据
*
*在元素上存放数据,返回jQuery对象。
*V1.4.3 新增用法NEW data(obj) 可传入key-value形式的数据。
*
*/
$(document).ready(function(){
/**
* demo3
*/
$("#demo3").click(function(){
//赋值
$(this).data("value","hanchao");
//取值
var value = $(this).data("value");
console.log(value);
//重新赋值
$(this).data("value",78);
//重新取值
var value_new = $(this).data("value");
console.log(value_new);
//赋值一个对象
$(this).data("user",{username:"tom",password:"123456",address:"China"});
//取值
var username = $(this).data("user").username;
var password = $(this).data("user").password;
var address = $(this).data("user").address;
console.log("username:" + username + ", password:" + password + ", address:" + address);
//我们还可以把值放在一个div中
$("div").data("test",{username:"tom",password:"123456",address:"China"});
//取值
var username1 = $("div").data("test").username;
var password1 = $("div").data("test").password;
var address1 = $("div").data("test").address;
console.log("username1:" + username1 + ", password1:" + password1 + ", address1:" + address1);
});
/**
* [ description] 清除div中的data数据
* @return {[type]}
*/
$("#clear").click(function(){
$("div").removeData("test");
//取值
var username = $("div").data("test");
console.log("username1:" + username);
});
});
</script>
</body>
</html>

转载 JQuery.data()方法学习的更多相关文章

  1. html 5 data-* (dataset) 属性和 jquery data方法比较

    一些文章在介绍html 5 data-* (dataset)属性时,会提到jquery的data方法,认为data方法能够很好的利用html 5的这个特性.但实际上,二者的兼容性是很差的.下面给出一段 ...

  2. JQuery data方法的使用-遁地龙卷风

    (-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...

  3. jquery data方法取值与js attr取值的区别

    <a data-v="3"></a> jquery data方法的运行机制: 第一次查找dom,使用attributes获取到dom节点值,并将其值存到缓存 ...

  4. jquery data方法获取某个元素上事件

    获取某个元素上的事件,jquery的给元素绑定的事件可以用data方法取出来. 通过$(element).data("events")来获取 // 比如给一个button绑定两个c ...

  5. jquery data方法

    jquery.data()文档:http://api.jquery.com/jQuery.data/ html5有个data-*属性,跟这个功能一样. Note: This is a low-leve ...

  6. jQuery 数据 - jQuery.data() 方法

    打印出 hi

  7. HTML5 自定义属性 data-* 和 jQuery.data 详解

    新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得dat ...

  8. jquery.data()&jquery.extend()

    JQuery.data()方法 Jquery提供的在节点存取数据的方法. var $el = $('#app'); //使用键值对的方式存数据 $el.data('name', 'jinx'); $e ...

  9. Jquery 扩展方法实现原理

    JSONP原理 首先:JSON和JSONP是不一样的概念. JSON是一种数据交换格式,而JSONP是非正式传输协议. 该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回 ...

随机推荐

  1. 【Todo】深入理解Javascript系列

    真的很好,要看 http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html

  2. 安卓自动化测试工具MonkeyRunner之使用ID进行参数化,以及List选择某项和弹出框点击确定的写法

    一.List选择某项的操作步骤: 1.通过父结点得出列表各子项 2.将选择项的文本与列表中的子项进行比较 3.计算出选择项的坐标位置 截取实例: from com.android.monkeyrunn ...

  3. poj1088

    这题是dp还是dfs+记忆化?(其实好像没什么区别?) 用f[i,j]表示滑到(i,j)时之后最多能滑多远,依次穷举每一个起点(i,j)则 f[i,j]=max{f[i,j-1],f[i-1,j],f ...

  4. Java程序员常用工具集

    我发现很多人没办法高效地解决问题的关键原因是不熟悉工具,不熟悉工具也还罢了,甚至还不知道怎么去找工具,这个问题就大条了.我想列下我能想到的一个Java程序员会用到的常用工具. 一.编码工具 1.IDE ...

  5. FFMPEG视音频编解码零基础学习方法

    在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视音频编解码的人,有的已经是有多年经验的“大神”,有的是刚开始学习的初学者.在和大家探讨的过程中,我忽然发现了一个问题:在“ ...

  6. 在英文 sql2005中 比较nvarchar 与 varchar的速度

    declare @str1 varchar(max); declare @count int; ; print 'begin' begin set @str1 = @str1 + '*'; ; end ...

  7. C# C/S 结构操作Ini系统文件

    Winfrom 开发时,有时会将一些系统某个设置保存到Ini 类型的文件中.下面提供操作Ini 文件的代码: public static class IniFiles { [DllImport(&qu ...

  8. .net-.net试题2

    ylbtech-doc:.net-.net试题2 .net试题2 1.A,.net试题2返回顶部 01.{DotNet题目}下列变量的赋值,正确的是:(  )(选择2项) A )int myInteg ...

  9. 转载:ofstream和ifstream详细用法

    ofstream是从内存到硬盘,ifstream是从硬盘到内存,其实所谓的流缓冲就是内存空间; 在C++中,有一个stream这个类,所有的I/O都以这个“流”类为基础的,包括我们要认识的文件I/O, ...

  10. 翻译【ElasticSearch Server】第一章:开始使用ElasticSearch集群(1)

    我们要做的第一件事是安装ElasticSearch.对于多数应用程序,您开始安装和配置,通常忘记这些步骤的重要性,直到发生了糟糕的事情.这章我们将广泛关注ElasticSearch的这部分.请注意本章 ...