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. Python-复习-文件操作-21

    # 文件处理 # 打开文件 #open('路径','打开方式','指定编码方式') # 打开方式 r w a r+ w+ a+ b #r+ 打开文件直接写 和读完再写 # 编码方式 —— utf-8 ...

  2. 个人博客Week3——案例分析

    一.调研,评测 我使用的bing的WINDOWS客户端,其大致分为四个模块:词典.例句.翻译.应用. (1)“词典”模块 BUG:搜索”http“词条,界面显示http的相关,但是无法再回到最初的主界 ...

  3. ELF文件格式分析

    一般的 ELF 文件包括三个索引表:ELF  header,Program  header  table,Section header table. 1)ELF  header:在文件的开始,保存了路 ...

  4. 实验--使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用(杨光)

    使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用 攥写人:杨光  学号:20135233 ( *原创作品转载请注明出处*) ( 学习课程:<Linux内核分析>MOOC课程 ...

  5. ajax跨域请求数据

    最近开始接触ajax的跨域请求问题,相比网上说的一大堆,我这里就说得比较浅显了. 关于为什么要跨域这个问题,实际的需求是当网站项目部署在一个域名上的时候,分域可以很好地解决网站卡顿问题(拥有多台服务器 ...

  6. PAT 1081 检查密码

    https://pintia.cn/problem-sets/994805260223102976/problems/994805261217153024 本题要求你帮助某网站的用户注册模块写一个密码 ...

  7. 查看Linux机器名

    uname -a hostname vim /etc/sysconfig/network

  8. vuex的数据交互

    methods:{ ...mapMutations({aaa:hs}) //将mutations的方法暴露出来,进行调用 aaa是他的名字 ...mapActions(['hs']) //将actio ...

  9. Linux基础学习（4）--Linux常用命令

    第四章——Linux常用命令 一.文件处理命令 1.命令格式与目录处理命令ls: (1)命令格式:命令 [-选项] [参数]   例:ls -la /etc (2)说明:个别命令使用不遵循此格式;当有 ...

  10. Get请求，Post请求乱码问题解决方案

    下面以两种常见的请求方式为例讲解乱码问题的解决方法. 1.Post方式请求乱码. 自从Tomcat5.x以来,Get方式和Post方式提交的请求,tomcat会采用不同的方式来处理编码. 对于Post ...