小色帝
- 浏览: 67818 次
-
文章分类
最新评论
-
小色帝：
我是天才是打发
Jquery实现的Tabs页 -
小色帝：
小色帝 写道1111而温热
Jquery实现的Tabs页 -
小色帝：
1111而温热
Jquery实现的Tabs页
jQuery.data()
所属分类：数据操作 | 工具类 English manual: jQuery.data()
存储任意数据到指定的元素并且/或者返回设置的值。
Contents:
jQuery.data( element, key, value )
jQuery.data( element, key, value )
jQuery.data( element, key )
jQuery.data( element, key )
jQuery.data( element )
jQuery.data( element, key, value )返回: Object
描述: 存储任意数据到指定的元素,返回设置的值。
添加的版本: 1.2.3jQuery.data( element, key, value )
element
类型: Element
要存储数据的DOM对象
key
类型: String
存储的数据名
value
类型: Object
新数据值
注意：这是一个底层的方法，你应该用.data()代替。
jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时，jQuery 同时也会移除添加在上面的数据。我们可以在一个元素上设置不同的值，并获取这些值：
1
2
jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');
注意: 这个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许在XML文档中通过自定义属性附加数据。
例子:
在 div 元素上先存储再获取数据。
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
span { color:red; }
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>var div = $("div")[0];
jQuery.data(div, "test", { first: 16, last: "pizza!" });
$("span:first").text(jQuery.data(div, "test").first);
$("span:last").text(jQuery.data(div, "test").last);</script>
</body>
</html>
Demo:
jQuery.data( element, key )返回: Object
描述: 返回用jQuery.data(element, name, value)储存在元素上的相应名字的数据，或者元素上完整的数据存储
添加的版本: 1.2.3jQuery.data( element, key )
element
类型: Element
T要关联数据的DOM对象
key
类型: String
存储的数据名
添加的版本: 1.4jQuery.data( element )
element
类型: Element
要关联数据的DOM对象
注意这是一个底层的方法，你应该用.data()代替。
关于 HTML5 data-* 属性: 这个低层次的方法不检索的data-*属性， 除非.data()方法已经返回了它们。
jQuery.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值，并获取这些值：
alert(jQuery.data( document.body, 'foo' ));
alert(jQuery.data( document.body ));
上面几行代码alert body元素上设置的值。若果先前没有设置任何值，那么将返回一个空字符串。
调用jQuery.data(element)时将获取一个JavaScript对象，它包含了元素上所有存储的数据。jQuery内部自身使用这个方法来绑定数据，如事件处理器，所以不要以为这对象只包含你的代码中储存的数据。
注意: 这个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许XML 文档中通过自定义属性附加数据。
例子:
获取存放在元素上名叫 "blah" 的数据。
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:5px; background:yellow; }
button { margin:5px; font-size:14px; }
p { margin:5px; color:blue; }
span { color:red; }
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div>A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>
<script>
$("button").click(function(e) {
var value, div = $("div")[0];
switch ($("button").index(this)) {
case 0 :
value = jQuery.data(div, "blah");
break;
case 1 :
jQuery.data(div, "blah", "hello");
value = "Stored!";
break;
case 2 :
jQuery.data(div, "blah", 86);
value = "Stored!";
break;
case 3 :
jQuery.removeData(div, "blah");
value = "Removed!";
break;
}
$("span").text("" + value);
});
</script>
</body>
</html>
Demo:
原文地址：http://www.jquery123.com/jQuery.data/
所属分类：数据操作 | 工具类 English manual: jQuery.data()
存储任意数据到指定的元素并且/或者返回设置的值。
Contents:
jQuery.data( element, key, value )
jQuery.data( element, key, value )
jQuery.data( element, key )
jQuery.data( element, key )
jQuery.data( element )
jQuery.data( element, key, value )返回: Object
描述: 存储任意数据到指定的元素,返回设置的值。
添加的版本: 1.2.3jQuery.data( element, key, value )
element
类型: Element
要存储数据的DOM对象
key
类型: String
存储的数据名
value
类型: Object
新数据值
注意：这是一个底层的方法，你应该用.data()代替。
jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时，jQuery 同时也会移除添加在上面的数据。我们可以在一个元素上设置不同的值，并获取这些值：
1
2
jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');
注意: 这个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许在XML文档中通过自定义属性附加数据。
例子:
在 div 元素上先存储再获取数据。
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
span { color:red; }
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>var div = $("div")[0];
jQuery.data(div, "test", { first: 16, last: "pizza!" });
$("span:first").text(jQuery.data(div, "test").first);
$("span:last").text(jQuery.data(div, "test").last);</script>
</body>
</html>
Demo:
jQuery.data( element, key )返回: Object
描述: 返回用jQuery.data(element, name, value)储存在元素上的相应名字的数据，或者元素上完整的数据存储
添加的版本: 1.2.3jQuery.data( element, key )
element
类型: Element
T要关联数据的DOM对象
key
类型: String
存储的数据名
添加的版本: 1.4jQuery.data( element )
element
类型: Element
要关联数据的DOM对象
注意这是一个底层的方法，你应该用.data()代替。
关于 HTML5 data-* 属性: 这个低层次的方法不检索的data-*属性， 除非.data()方法已经返回了它们。
jQuery.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值，并获取这些值：
alert(jQuery.data( document.body, 'foo' ));
alert(jQuery.data( document.body ));
上面几行代码alert body元素上设置的值。若果先前没有设置任何值，那么将返回一个空字符串。
调用jQuery.data(element)时将获取一个JavaScript对象，它包含了元素上所有存储的数据。jQuery内部自身使用这个方法来绑定数据，如事件处理器，所以不要以为这对象只包含你的代码中储存的数据。
注意: 这个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许XML 文档中通过自定义属性附加数据。
例子:
获取存放在元素上名叫 "blah" 的数据。
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:5px; background:yellow; }
button { margin:5px; font-size:14px; }
p { margin:5px; color:blue; }
span { color:red; }
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div>A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>
<script>
$("button").click(function(e) {
var value, div = $("div")[0];
switch ($("button").index(this)) {
case 0 :
value = jQuery.data(div, "blah");
break;
case 1 :
jQuery.data(div, "blah", "hello");
value = "Stored!";
break;
case 2 :
jQuery.data(div, "blah", 86);
value = "Stored!";
break;
case 3 :
jQuery.removeData(div, "blah");
value = "Removed!";
break;
}
$("span").text("" + value);
});
</script>
</body>
</html>
Demo:
原文地址：http://www.jquery123.com/jQuery.data/
分享到：
发表评论
-
项目里 Jquery 日期空间,vilidation,highchars控件
2017-03-06 11:24 0项目中用到了一个Jquery 日期控件，挺好用的，特意总结下 ... -
jquery常用事件（整理）
2017-02-13 17:47 269Jquery事件 (一)、事件 ... -
开源轻量级移动端友好的JS地图库——leaflet学习教程
2017-01-05 18:57 1187开源轻量级移动端友好的JS地图库——leaflet学习教程 ... -
$("parent > child")、$("A B")、$("div#test")、$("div,#test")、$(".test","div")
2016-12-15 10:38 334这个标题似乎有些奇怪，但这些都是合法有效的jQuery选择器。 ... -
type=＂button＂ ,＂submit＂ 的区别（转）
2016-07-22 11:16 488type=＂button＂ ,＂submit＂ 的区别 ... -
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2016-07-21 14:10 415Jquery中$.get(),$.post(),$.a ... -
Ztree用法事例
2016-05-17 01:11 533【简介】 zTree 是利用 jQuery 的核心代码，实现一 ... -
jQuery 数据缓存data(name, value)详解及实现
2016-05-16 10:35 423本文要讨论的是最流行的JavaScript框架jQuery的数 ... -
jQuery数据缓存$.data 的使用以及源码解析
2016-05-16 00:49 432jQuery数据缓存$.data 的使用以及源码解析 实现原 ... -
jQuery之AJAX
2016-05-16 00:16 402jQuery之AJAX 一、load() 加载页面数据 ... -
JQuery OrgChart
2016-05-15 12:36 568Query OrgChart 是一个jQuery插件能够让帮你 ... -
JS横向树（组织结构）
2016-05-15 11:19 2920最近看到不少人有类似的需求，实现组织架构的横向展开，显示，无聊 ... -
我也来说说怎么封装jQuery插件
2016-05-14 19:32 400http://www.w3cfuns.com/notes/17 ... -
echarts 各个属性意义注释
2016-05-14 18:27 1079<!DOCTYPE html PUBLIC " ... -
jQuery插件原来如此简单 jQuery插件的机制及实战
2016-05-14 01:00 481jQuery插件原来如此简单 ... -
Echarts 仪表盘实例
2016-05-14 00:51 5279HTML 首先引入Echarts，然后在需要放置图表的地方加上 ... -
Jquery封装对象实例
2016-05-14 00:48 572jQuery自定义类封装 jQuery自定义类封装： ( ... -
Jquery 选择器总结
2015-04-15 19:21 517jQuery 的选择器可谓之强 ... -
关于SS框架后台代码开发规范实例
2013-02-01 17:20 1009工作半年了，接触的第一个项目就是SS为后台的框架的开发。 ... -
jquery 里面的.find() .each() .parent() .value(parseInt())
2013-02-01 09:33 20331.find() 方法获得当前元素集合中每个元素的后代，通过选 ...
相关推荐
`jQuery.data()` 是 jQuery 库中的一个核心方法，它用于在DOM元素上存储和检索数据。这个功能强大的工具使得开发者可以方便地与DOM元素关联任意的JavaScript对象或值，而无需污染HTML属性或使用全局变量。这篇博客...
一个字段连接另一个字段，一个改变，另一个也改变
<div data-role="page"> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> $(document).on('mobileinit', function () { $('#myMenu')....
jquery.validate.1.9.0.min.js jquery.validate.1.12.0.min.js jquery.validate.1.13.1.min.js jquery.validate.1.16.0.min.js jquery.validate.1.14.0.min.js jquery.validate.1.15.1.min.js jquery.validate....
$.getJSON('data.json', function(data) { console.log(data); }); ``` **jQuery的ajax()函数** `$.ajax()`函数是jQuery的核心Ajax方法，可以处理各种类型的HTTP请求，包括获取JSON数据。使用`dataType: 'json'`...
《jQuery.paginate.js插件详解及其应用》 在网页开发中，当数据量过大时，分页功能就显得尤为重要，它能帮助用户更好地浏览和管理大量信息。jQuery是一个广泛使用的JavaScript库，它提供了丰富的功能来简化DOM操作...
**jQuery.formautofill 表单填充控件详解** 在Web开发中，处理表单数据的填充是一项常见的任务。为了提高开发效率和用户体验，开发者们经常寻找自动化解决方案，以简化表单字段的赋值过程。这里我们要介绍的是...
url: "getData.php", success: function(data) { var tableData = processAjaxData(data); // 处理并生成表格HTML $("#myTable").html(tableData); $("#myTable").printArea(); // 立即打印 } }); ``` 五、...
**jQuery.kxbdmarquee插件详解** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理和动画效果。在这个库的基础上，开发者创建了许多插件来扩展其功能，其中`jquery.kxbdmarquee`...
《jQuery Marquee插件详解与应用》 在Web开发中，滚动效果经常被用来吸引用户的注意力，例如新闻头条、广告横幅等。jQuery Marquee插件就是为实现这种滚动效果而设计的一个轻量级库，它使开发者能够方便地在网页上...
4. **Ajax交互**：jQuery的`.ajax()`方法是进行异步数据交互的标准方式，它可以处理XMLHttpRequest的所有细节，如`$.ajax({url: "data.json", type: "GET", success: function(data) { ... }})`，用于从"data.json...
<img class="lazyload" data-src="image.jpg"> ``` 最后，调用jQuery.Lazyload插件并进行必要的配置： ```javascript $("img.lazyload").lazyload(); ``` 如果需要，还可以通过配置项来设定各种行为，如设置加载占位...
《jQuery.onoff插件详解与应用实践》 在前端开发中，我们经常需要处理各种开关按钮，例如开启或关闭某个功能、切换显示状态等。jQuery作为一个广泛使用的JavaScript库，提供了丰富的API来帮助开发者实现这些需求。...
5. **创建Data URL**：将Blob对象转换为Data URL，这是一种表示资源的字符串形式，可以用于创建链接或者在浏览器中直接显示。 6. **模拟下载**：最后，通过创建一个隐藏的`<a>`标签，设置其`href`属性为Data URL，并...
《jQuery OrgChart.js：构建灵活组织结构图的利器》 OrgChart.js 是一款基于 jQuery 的高效、可定制化的组织结构图插件。它允许开发者轻松地在网页上展示层次分明的组织架构，如公司部门、团队成员关系或者任何具有...
本篇将深入探讨jQuery Mobile 1.0.1版本，包括其核心组件`jquery.mobile-1.0.1.js`和压缩版`jquery.mobile-1.0.1.min.js`，以及配套的样式文件`jquery.mobile-1.0.1.css`和压缩版`jquery.mobile-1.0.1.min.css`。...
首先，`jquery.carousel.js`是一个基于jQuery库的轻量级插件，它提供了创建自定义轮播图的功能。要使用此插件，你需要确保已经引入了jQuery库，因为`jquery.carousel.js`依赖于它。可以将jQuery库和`jquery.carousel...
3. 数据操作：为了方便数据的存储和读取，jQuery.common可能提供了一种统一的方式来操作元素的data属性，甚至可以扩展到JSON格式的数据操作。 4. 动画效果：jQuery库本身就具有强大的动画功能，jQuery.common则可能...
《jQuery.Localize：JavaScript 国际化插件详解与应用》 在当今全球化背景下，网站和应用程序需要支持多语言环境，以满足不同地区用户的需求。jQuery.Localize 是一个优秀的 JavaScript 插件，专为实现这一目标而...