html5的data-自定义属性出来很久了，我们一起认识一下。

比如如下一个代码，我们怎么取到对应的name，对应的age？

既然data-*自定义属性是它的一个属性，这个时候就可以用getAttribute获取到他的值。当然也可以通过setAttribute设置属性值，改变其属性。

结果如下

可以看看控制台setAttribute是不是实质性的改变了html结构。

上面是原生js实现获取自定义属性值，那么使用jquery是如何获取自定义的值呢？

看看代码如下

看看效果如下

那我们引申一下呢？当我们进行表格的编辑的时候，是不是通过可以设置data-属性，获取我们取到的每一行的值呢？




html5的data-*属性，我们一起认识下的更多相关文章

  1. 【翻译】详解HTML5 自定义 Data 属性

    原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...

  2. js 获取html5的data属性

    我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html> <head> <title>dat ...

  3. HTML5自定义data属性

    可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role=&qu ...

  4. 【转载】HTML5自定义data属性

    可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果:   [html]  <div data-role= ...

  5. html5 data属性的使用

    html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data- ...

  6. JS组件系列——使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

  7. HTML 5：你必须知道的data属性

    原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可 ...

  8. html 5实用特性之data属性

    HTML 5之前,我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段,这种做法有时会在网站的外观和实用性之间产生冲突.而HTML 5 Data属性的存在就能很好满足需要. HTML5 ...

  9. 『HTML5挑战经典』是英雄就下100层-开源讲座(二)危险！英雄

    本篇为<『HTML5挑战经典』是英雄就下100层-开源讲座>第二篇,需要用到开源引擎lufylegend,可以到这里下载: 下载地址:http://lufylegend.googlecod ...

  10. Web 前沿——HTML5 Form Data 对象的使用

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...

随机推荐

  1. iptables限制连接数(如sftp) 以及 谨防CC/DDOS攻击的配置 ( connlimit模块)

    之前在公司服务器上部署了sftp,用于上传业务系统的附件.后来由于程序连接问题,使的sftp连接数过多(最多时高达400多个sftp连接数),因为急需要对sftp的连接数做严格限制.操作记录如下: 启 ...

  2. MongoDB副本集（一主一备+仲裁）环境部署-运维操作记录

    MongoDB复制集是一个带有故障转移的主从集群.是从现有的主从模式演变而来,增加了自动故障转移和节点成员自动恢复.MongoDB复制集模式中没有固定的主结点,在启动后,多个服务节点间将自动选举产生一 ...

  3. Scrum Meeting 7

                第七次会议 No_00:工作情况 No_01:任务说明 待完成 已完成 No_10:燃尽图 No_11:照片记录 待更新 No_100:代码/文档签入记录 No_101:出席表 ...

  4. 《Linux内核分析》第五周学习笔记

    <Linux内核分析>第五周学习笔记 扒开系统调用的三层皮(下) 郭垚 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.c ...

  5. 8-Python3从入门到实战—基础之数据类型（集合-Sets）

    Python从入门到实战系列--目录 集合的定义 集合(set)和字典类似,也是一组key的集合,但不存储value:由于key不能重复,所以,在set中,没有重复的key. 创建一个set,需要提供 ...

  6. Trouble shooting（问题解决）：centos 7 gnome show someting has gone wrong.

    centos 7 升级 内核 3.10,startx启动不了了.进界面也是oh,no!someting has gone wrong . 参见帖子:http://bbs.csdn.net/topics ...

  7. Linux 多主机SSH互信操作---noob....

    创建虚拟机后-- ssh-keygen 生成公钥和私钥对 -rw------- 1 root root 1679 11月 4 09:18 id_rsa-rw-r--r-- 1 root root 39 ...

  8. Linux中gcc与g++编译器的区别

    一.对于C文件 对于C文件gcc和g++所做的事情确实是一样的,g++在编译C文件时调用了gcc. 二.对于C++文件 1.预处理 预处理gcc与g++做了相同的事. 2.编译 gcc无法自动和c++ ...

  9. .NET中的许可证机制--License

    .NET中的许可证机制主要类:System.ComponentModel.License(为所有许可证提供 abstract 基类.向组件的特定实例授予许可证)     System.Componen ...

  10. html5應用緩存

    HTML5使用了應用緩存,就是web應用緩存,使得在離線狀態下可以訪問web'應用. 應用緩存的優點: 離線訪問-可以在無網的狀態下訪問應用 速度-有緩存的應用加載更快 瀏覽器負載-瀏覽器只從服務器加 ...