HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情。
你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"
开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。
下面的一个代码片段是一个有效的HTML5标记:
<div id="awesome"data-myid="3e4ae6c4e">Some awesome data</div>
可是,怎么来读取这些数据呢?你当然可以遍历页面元素来读取你想要的属性,但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*"
属性。其中一个方法就是 .data(obj)
,这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性。
举个例子,你可以用下面的写法读取 data-myid
属性值:
var myid= jQuery("#awesome").data('myid'); console.log(myid);
你还可以在"data-*"
属性里使用json语法,例如,如果你写出下面的html:
<div id="awesome-json" data-awesome='{"game":"on"}'></div>
你可以通过js直接访问这个数据,通过json的key值,你能得到相应的value:
var gameStatus= jQuery("#awesome-json").data('awesome').game; console.log(gameStatus);
你也可以通过.data(key,value)
方法直接给"data-*"
属性赋值。一个重要的你要注意的事情是,这些"data-*"
属性应该和它所在的元素有一定的关联,不要把它当成存放任意东西的存储工具。
译者补充:尽管"data-*"
是HTML5才出现的属性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你仍然可以使用.data(obj)
方法来操作"data-*"
数据。
转载于:https://www.cnblogs.com/juancreate2014/p/3529098.html
HTML 5 的自定义 data-* 属性和jquery的data()方法的使用相关推荐
- eazyui ajax传值,jquery easyui ajax data属性传值方式
$.ajax({ url:url, type:'post', data:data, dataType:'json', contentType: "application/x-www-form ...
- jQuery初识 - jQuery中的方法
jQuery的attr方法 attr(name|pro|key,val|fn) 作用:获取或者设置属性节点的值 可以传递一个参数,也可以传递两个参数 如果传递一个参数,代表获取属性节点的值 ...
- ajax的同步,设置JQuery的Ajax方法同步
如何设置jquery的ajax方法为同步 jax请求默认的都是异步的如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: "so ...
- jquery html data属性,jQuery Mobile Data 属性
jQuery Mobile Data 属性 jQuery Data 属性 jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观. 在下面的参考列 ...
- jQuery Data 属性
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术: MVC 作者:林松 ...
- html css data-,HTML+CSS入门 HTML自定义data属性详解
本篇教程介绍了HTML+CSS入门 HTML自定义data属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 可以在HTML标签上添加任意以 "data-&q ...
- html元素data属性设置变量,HTML5 自定义属性 data-* 和 jQuery.data 详解
编辑注:HTML中使用data-xx="xx"开头标记的属性到底有什么用,直接使用xx="xx"不是更简单吗?其实data-xx是HTML5的一个属性,支持通过 ...
- HTML data属性简介以及低版本浏览器兼容算法
实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...
- html 5实用特性之data属性
HTML 5之前,我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段,这种做法有时会在网站的外观和实用性之间产生冲突.而HTML 5 Data属性的存在就能很好满足需要. HTML5 ...
最新文章
- CentOS 6.4下编译安装MySQL 5.6.14
- python——常用的内置函数
- [计算机视觉:算法与应用]学习笔记一:图像形成
- JAVA中利用DOM解析XML文档
- Django05: 请求生命周期流程图/路由层
- 不得不服!腾讯优图联合腾讯会议正式上线神奇的眼神接触功能
- redux异步action_【第1586期】基于Redux/Vuex/MobX等库的通用化状态OOP
- linux 源码安装mysql 5.5
- centos7下cups + samba共打印服务
- 制作可以 SSH 登录的 Docker 镜像
- 零基础学python要多久-零基础学习Python大概要多久,感悟分享?
- Windows安装office出现1046错误
- vue 点击div 获取位置_Vue中div contenteditable 的光标定位方法
- kafka eagle的介绍和详细安装教程
- 欢迎大家关注公众号【音视频开发训练营】
- Linux下安装Nginx(实战配置)
- Maxent软件安装及使用
- Ext3文件系统介绍
- LED驱动程序第一课
- 什么是cellpadding
热门文章
- 最新数据显示,全国有580万人被限制乘坐高铁,大家怎么看?
- 借呗利息为什么比银行信用贷款高很多?
- 云闪付单个红包最高2018,这是要打败支付宝的节奏吗?
- Snapshot Instance 操作详解 - 每天5分钟玩转 OpenStack(36)
- 张洁的新书「流浪的老狗」
- 《2012》:让灾难成为一场洗礼
- HTML一个form表单中有两个(多个)submit,后台如何区分(纯HTML实现,无需javascript)
- 尺度空间(Scale space)理论
- 腾讯云,物联网通信产品,动态注册步骤
- html如何设置文本斜体,CSS/HTML:使文本斜体的正确方法是什么?