【HTML&JavaScript】data-* 属性与data( )方法
来源:互联网 发布:数据库分页查询sql语句 编辑:程序博客网 时间:2024/06/13 12:54
定义和用法
- data-* 属性用于存储页面或应用程序的私有自定义数据。
- data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
- 存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。
data-* 属性包括两部分:
1.属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符2.属性值可以是任意字符串
注释:用户代理会完全忽略前缀为 “data-” 的自定义属性。
HTML 4.01 与 HTML5 之间的差异
data-* 属性是 HTML5 中的新属性。
语法
<element data-*="somevalue">
自定义data-*属性与jquery的data()方法的使用:
- 使用jQuery的.data()方法来访问这些”data-*” 属性。其中一个方法就是 .data(obj),这个方法是在jQuery1.4.3版本后出现的,它能返回相应的data属性。 举个例子,你可以用下面的写法读取 data-myid属性值:
<div id="awesome" data-myid="3e4ae6c4e">Some awesome data</div>//js部分var myid= jQuery("#awesome").data('myid');
- 你还可以在”data-*” 属性里使用json语法,例如:
<div id="awesome-json" data-awesome='{"game":"on"}'></div> //你可以通过js直接访问这个数据,通过json的key值,你能得到相应的valuevar gameStatus= jQuery("#awesome-json").data('awesome').game;
- 也可以通过.data(key,value)方法直接给”data-*” 属性赋值。
要注意的是,这些”data-*” 属性应该和它所在的元素有一定的关联,不要把它当成存放任意东西的存储工具。 尽管”data-*” 是HTML5才出现的属性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你仍然可以使用.data(obj)方法来操作”data-*” 数据。
0 0
- 【HTML&JavaScript】data-* 属性与data( )方法
- HTML data-* 属性
- HTML全局属性data-
- HTML data-*属性
- HTML data-*自定义属性
- html属性-data-*自定义属性
- html data-*自定义属性的
- HTML中data的属性
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
- ffmpeg cmd 基本用法
- iOS 蓝牙开发 BabyBluetooth蓝牙库介绍
- Windows 窗口层次关系
- 利用Cocoa Layout Instrument检视自动布局
- logback探究
- 【HTML&JavaScript】data-* 属性与data( )方法
- java字符转义和替换
- 统计项目中图片使用情况
- 最简单的介绍如何使用mmseg进行自然语言处理
- ros的navigation之———amcl(localization)应用详解
- 我的Java笔记
- 工作总结
- nsq源码阅读笔记之nsqd(一)——nsqd的配置解析和初始化
- 如何鉴别不同手机