`

jquery中操作HTML5中的dataattributes

阅读更多
在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>
1
0
分享到:
评论

相关推荐

    jQuery+Html5表白动画代码

    同时,HTML5的数据属性(data attributes)也可能被用来存储和传递信息,帮助jQuery识别和操作特定的元素。 此外,为了实现表白动画的个性化,开发者可能还利用了jQuery的AJAX功能,从服务器获取或提交数据,比如...

    jquery html5仿前海公馆移动端手机页面模板下载

    它可能利用HTML5的新特性,如数据属性(data-attributes)来绑定jQuery事件,或者使用canvas来创建动态图形。 `images`目录包含了页面所需的图像资源,这些图片可能包括背景图、项目展示图、图标等,它们对于提升...

    jquery html5三屏图片排列滑动切换代码

    1. 数据属性(data attributes):HTML5的数据属性允许我们在元素上存储自定义数据,这在jQuery中可以通过`data()`方法访问。例如,我们可以为导航按钮添加数据属性来关联相应的图片。 2. 事件监听:jQuery的事件...

    jQuery1.10.3中文文档

    7. **属性与数据(Attributes and Data)**:`$(selector).attr('attributeName')`用于获取或设置元素属性,而`$(selector).data('key')`则可以存储和检索与元素相关的任意数据。 8. **插件(Plugins)**:jQuery的...

    jQuery 1.6 中文API

    4. **属性和数据(Attributes and Data)**:`.attr()`用于获取或设置元素的属性,`.data()`则用于在元素上存储和检索自定义数据。 5. **CSS操作(CSS Manipulation)**:`.css()`方法允许动态改变元素的样式,包括...

    jQuery_Mobile中文手册

    jQuery Mobile 提供了一系列的 HTML5 数据属性(data- attributes)和 CSS 类,使开发者能够快速构建具有统一外观和交互体验的页面。例如,通过添加 `data-role="page"` 和 `data-role="header"` 等属性,可以轻松...

    jQuery HTML5实现tooltip样式代码.zip

    HTML5是超文本标记语言的最新版本,引入了许多新特性,如数据属性(data attributes)和语义化标签。在tooltip的实现中,数据属性可以用来存储附加信息,比如提示文本,而语义化标签(如`&lt;article&gt;`、`&lt;section&gt;`等...

    jQuery 1.7 中文 API

    jQuery 是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,特别是在处理DOM操作、事件处理、动画效果以及Ajax交互等方面。jQuery 1.7是该库的一个重要版本,引入了许多新特性、改进和修复,以增强...

    Jquery+Mobile+a4+html5+css3中文手册

    1. 数据属性(data attributes):用于增强HTML元素功能,如`data-role="page"`创建页面,`data-rel="back"`实现返回功能。 2. 事件处理:如`pagecreate`、`pagebeforechange`等,帮助开发者在页面生命周期的不同...

    Jquery mobile 中文开发文档

    - **数据属性(Data Attributes)**:jQuery Mobile 使用 HTML5 的 data-* 属性来标记和配置 UI 元素,例如 `data-role="button"` 创建按钮,`data-theme` 定义颜色主题。 - **增强页面(Enhancement)**:当页面...

    jQueryhtml5实现手机触屏点击弹出导航菜单效果源码.zip

    此外,HTML5的数据属性(data attributes)也可能被用到,它们可以用来存储额外的非语义信息,而这些信息可以被jQuery读取和操作。 在文件列表中,“132686932656944537”可能是JavaScript脚本或CSS样式表,负责...

    jQuery的购物车代码.zip

    在HTML5中,我们可以看到用于构建购物车界面的各种元素,如表格(table)、按钮(button)等。HTML5的新特性,例如数据属性(data attributes)和离线存储(localStorage),可能被用来存储和检索购物车中的商品信息...

    jQuery1.10.3_API中文手册

    数据和属性(Data and Attributes)** `.data()` 方法用于存储和检索元素相关的数据,而 `.attr()` 和 `.removeAttr()` 则用于设置和移除元素的属性。 **8. 插件(Plugins)** jQuery 社区提供了大量的插件,如...

    jQuery HTML5实现刮刮乐抽奖特效.zip

    HTML5的数据属性(data attributes)也可能用于存储和传递与刮奖相关的数据。 CSS3在美化和增强用户体验方面扮演着重要角色。在这个项目中,可能会使用CSS3的过渡(transitions)和动画(animations)来创建平滑的...

    jQuery Mobile开发源码 api文档中文

    1. **页面结构和导航**:jQuery Mobile通过数据属性(data-attributes)来标记HTML元素,创建可滚动的页面和页面区域。它使用单一页面架构,通过AJAX进行页面切换,提供平滑的用户体验。 2. **主题系统**:jQuery ...

    jQuery显示图片详情

    6. **数据属性(data attributes)**:为了存储与元素相关的额外信息,可以使用HTML5的数据属性,如`data-*`。这些信息可以在jQuery中通过`.data()`方法访问,用于显示图片的详细信息。 7. **事件委托**:如果图片...

    jquery选卡切换案例

    `html5.html`可能利用了HTML5的一些新特性,如数据属性(data attributes)来存储与选卡相关的元数据,或者新的标签元素(如`&lt;section&gt;`和`&lt;article&gt;`)来提升内容的语义性。 6. **图片资源** `images`目录包含了...

    Jquery中文API.zip

    3. **属性操作(Attributes)**:用于读取和修改HTML元素的属性,如`.attr("attribute", value)`设置属性值。 4. **事件处理(Events)**:jQuery简化了事件绑定,如`.click(fn)`为元素添加点击事件,`.on("event",...

    jQuery+html5实现的五款液体扭曲水波纹全屏幻灯片切换特效源码.zip

    7. **数据属性(data attributes)**: HTML5的数据属性可以用来存储自定义信息,jQuery可以方便地访问这些数据。在幻灯片切换中,这些数据可能包含当前幻灯片的索引、动画状态等。 8. **性能优化**: 高性能的...

    JQueryMobile UI 汇总

    5. **数据链接(Data-Linking)**:通过 data- attributes,可以将 HTML 元素与 JavaScript 事件绑定,实现页面的动态更新。 6. **可扩展组件**:包括下拉菜单、滑块、按钮、表单、弹出对话框等多种 UI 控件,方便...

Global site tag (gtag.js) - Google Analytics