在HTML5 中，新增加了data-attributes属性，可以在页面级保存一些数据，比如：
<body>
<div data-site="www.codeguru.com" data-category="Technology">Hi, Welcome to HTML 5 data attributes!</div>
<div data-name="Dave" data-age=23 data-dept="Clerical">Hi Dave!</div>
</body>
</html>
而在jquery 中，可以通过.data的方法去获得和设置data attributes，比如：
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>5.
<script type="text/javascript">
$("#btnSet").click(function(e) {
$("#divEmployee").data("name", "Dave");
$("#divEmployee").data("age", "23");
$("#divEmployee").data("dept", "Clerical");
10.
});</script>
</head>
<body>
<div id="divEmployee">
Hi Dave!
</div>
15.
<input type="button" id="btnSet" value="Set Value" />
</body>
</html>
可以看到设置了divEmployee的一系列属性，包括name,age,dept.
也可以用如下两个方法设置：
<script type="text/javascript">
$("#btnSet").click(function(e) {
$("#divEmployee").data( {
"name" : "Dave",
"age" : 23,
"dept" : "Clerical"
});
});
</script>
<script type="text/javascript">
$("#btnSet").click(function(e) {
$("#divEmployee").data("name", "age", "dept").data("Dave", 23, "Clerical");
});
</script>
而获取和删除的方法分别如下：
<script type="text/javascript">
$("#btnSet").click(function(e) {
var name = $("#divEmployee").data("name")
var age = $("#divEmployee").data("age")
var dept = $("#divEmployee").data("dept")
});
</script>
<script type="text/javascript">
$("#btnSet").click(function(e) {
$("#divEmployee").removeData("employee");
});</script>
分享到：
相关推荐
同时，HTML5的数据属性（data attributes）也可能被用来存储和传递信息，帮助jQuery识别和操作特定的元素。 此外，为了实现表白动画的个性化，开发者可能还利用了jQuery的AJAX功能，从服务器获取或提交数据，比如...
它可能利用HTML5的新特性，如数据属性（data-attributes）来绑定jQuery事件，或者使用canvas来创建动态图形。 `images`目录包含了页面所需的图像资源，这些图片可能包括背景图、项目展示图、图标等，它们对于提升...
1. 数据属性（data attributes）：HTML5的数据属性允许我们在元素上存储自定义数据，这在jQuery中可以通过`data()`方法访问。例如，我们可以为导航按钮添加数据属性来关联相应的图片。 2. 事件监听：jQuery的事件...
7. **属性与数据（Attributes and Data）**：`$(selector).attr('attributeName')`用于获取或设置元素属性，而`$(selector).data('key')`则可以存储和检索与元素相关的任意数据。 8. **插件（Plugins）**：jQuery的...
4. **属性和数据（Attributes and Data）**：`.attr()`用于获取或设置元素的属性，`.data()`则用于在元素上存储和检索自定义数据。 5. **CSS操作（CSS Manipulation）**：`.css()`方法允许动态改变元素的样式，包括...
jQuery Mobile 提供了一系列的 HTML5 数据属性（data- attributes）和 CSS 类，使开发者能够快速构建具有统一外观和交互体验的页面。例如，通过添加 `data-role="page"` 和 `data-role="header"` 等属性，可以轻松...
HTML5是超文本标记语言的最新版本，引入了许多新特性，如数据属性（data attributes）和语义化标签。在tooltip的实现中，数据属性可以用来存储附加信息，比如提示文本，而语义化标签（如`<article>`、`<section>`等...
- **数据属性（Data Attributes）**：jQuery Mobile 使用 HTML5 的 data-* 属性来标记和配置 UI 元素，例如 `data-role="button"` 创建按钮，`data-theme` 定义颜色主题。 - **增强页面（Enhancement）**：当页面...
jQuery 是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，特别是在处理DOM操作、事件处理、动画效果以及Ajax交互等方面。jQuery 1.7是该库的一个重要版本，引入了许多新特性、改进和修复，以增强...
1. 数据属性（data attributes）：用于增强HTML元素功能，如`data-role="page"`创建页面，`data-rel="back"`实现返回功能。 2. 事件处理：如`pagecreate`、`pagebeforechange`等，帮助开发者在页面生命周期的不同...
此外，HTML5的数据属性（data attributes）也可能被用到，它们可以用来存储额外的非语义信息，而这些信息可以被jQuery读取和操作。 在文件列表中，“132686932656944537”可能是JavaScript脚本或CSS样式表，负责...
在HTML5中，我们可以看到用于构建购物车界面的各种元素，如表格（table）、按钮（button）等。HTML5的新特性，例如数据属性（data attributes）和离线存储（localStorage），可能被用来存储和检索购物车中的商品信息...
数据和属性（Data and Attributes）** `.data()` 方法用于存储和检索元素相关的数据，而 `.attr()` 和 `.removeAttr()` 则用于设置和移除元素的属性。 **8. 插件（Plugins）** jQuery 社区提供了大量的插件，如...
1. **页面结构和导航**：jQuery Mobile通过数据属性（data-attributes）来标记HTML元素，创建可滚动的页面和页面区域。它使用单一页面架构，通过AJAX进行页面切换，提供平滑的用户体验。 2. **主题系统**：jQuery ...
6. **数据属性（data attributes）**：为了存储与元素相关的额外信息，可以使用HTML5的数据属性，如`data-*`。这些信息可以在jQuery中通过`.data()`方法访问，用于显示图片的详细信息。 7. **事件委托**：如果图片...
HTML5的数据属性（data attributes）也可能用于存储和传递与刮奖相关的数据。 CSS3在美化和增强用户体验方面扮演着重要角色。在这个项目中，可能会使用CSS3的过渡（transitions）和动画（animations）来创建平滑的...
`html5.html`可能利用了HTML5的一些新特性，如数据属性（data attributes）来存储与选卡相关的元数据，或者新的标签元素（如`<section>`和`<article>`）来提升内容的语义性。 6. **图片资源** `images`目录包含了...
3. **属性操作（Attributes）**：用于读取和修改HTML元素的属性，如`.attr("attribute", value)`设置属性值。 4. **事件处理（Events）**：jQuery简化了事件绑定，如`.click(fn)`为元素添加点击事件，`.on("event",...
7. **数据属性（data attributes）**： HTML5的数据属性可以用来存储自定义信息，jQuery可以方便地访问这些数据。在幻灯片切换中，这些数据可能包含当前幻灯片的索引、动画状态等。 8. **性能优化**： 高性能的...
5. **数据链接（Data-Linking）**：通过 data- attributes，可以将 HTML 元素与 JavaScript 事件绑定，实现页面的动态更新。 6. **可扩展组件**：包括下拉菜单、滑块、按钮、表单、弹出对话框等多种 UI 控件，方便...