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. SpringMvc返回Json调试

    spring-web-5.0.6.RELEASE.jar!/org/springframework/web/method/support/HandlerMethodReturnValueHandler ...

  2. HTTP协议基础与web服务的重定向，跳转以及请求转发

    JavaWeb中,HttpServletRequest与HttpServletResponse几乎是处理各种请求与操作必备的参数,与原始的ServletRequest/ServletResponse相 ...

  3. Week 3 有求必应

    [引] 必应词典已经伴我很久了,但那并不意味着我天天都用它查来查去,它总是静静地蹲在我E盘的一角. 从前的它特别任性,总喜欢开机自己冒出头来看我.后来我嫌它每天都播报新闻,于是就把它关进了冷宫.直到不 ...

  4. 2017-2018-2 1723《程序设计与数据结构》第十一周作业 & 实验三 & （总体）第三周结对编程 总结

    作业地址 第十一次作业:https://edu.cnblogs.com/campus/besti/CS-IMIS-1723/homework/1933 (作业界面已评分,可随时查看,如果对自己的评分有 ...

  5. HDOJ2025_查找最大元素

    一道简单题 HDOJ2025_查找最大元素 #include<stdio.h> #include<stdlib.h> #include<ctype.h> #incl ...

  6. PAT 1038 统计同成绩学生

    https://pintia.cn/problem-sets/994805260223102976/problems/994805284092887040 本题要求读入N名学生的成绩,将获得某一给定分 ...

  7. Robot Framework 入门教程总结

    Robot Framework 作为一款通用测试框架,可加载多种测试库.驱动多种测试工具,并可对各种自定义脚本进行集成.对于Robot Framework,我准备将其分为 入门--Robot Fram ...

  8. ESXi去掉 SSH已经启用的警告信息

    1. 在vCenter管理的机器里面 总是有几台服务器 提示 SSH启动连接 并且有黄色的警告信息 有时内存或者CPU报警的信息就看不到了.. 所以想着解决他,经过百度发现解决办法为: 选中host主 ...

  9. Android控件第3类——AdapterView

    AdapterView这一类控件的最大特点,在绝大多数的情况下,它们的数据都由Adapter的子类提供(有时可以在控件的entries属性上直接设置显示的数据). 调用AdapterView的setA ...

  10. vim鼠标模式打开与关闭

    开启鼠标模式 :set mouse=x, x取值如下, 例如:set mouse=a, 开启所有模式的mouse支持 n 普通模式    v 可视模式    i 插入模式    c 命令行模式    ...