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. Centos6.5网络配置

    由于项目部署的需要,不得不继续研究Linux,前期看过一些Linux方面的资料,也动手配置过Linux网络配置,但是由于开发项目一般在windows下进行的,用Linux比较少,所以基本上也就忘记以前 ...

  2. vue element-ui 动态上传

    上传填写完毕的幼儿及体测数据文件,上传成功后会自动导入该文件的数据 <el-upload :action="UploadUrl()" :on-success="Up ...

  3. Java8之集合排序

    1,List<Map<String,Object>>格式 //排序 Comparator<Map<String, Object>> comparator ...

  4. Linux入门笔记

    1.Linux常用快捷键 按键 作用 Ctrl+d 键盘输入结束或退出终端 Ctrl+s  暂停当前程序,暂停后按下任意键恢复运行 Ctrl+z 将当前程序放到后台运行,恢复到前台为命令fg Ctrl ...

  5. zookeeper安装(Linux)

    安装环境: Linux:centos6.4 Jdk:1.7以上版本 Zookeeper是java开发的可以运行在windows.linux环境.需要先安装jdk. 安装步骤: 第一步:安装jdk 第二 ...

  6. PHP利用GD库处理图片方法实现

    这里写的是完成每个功能的函数,可以复制单个函数直接使用,这里的每个函数都是另外一篇PHP常用类------图片处理类Image当中的方法进行细化,可以参考一下 废话不多说,直接付代码吧! 添加水印(文 ...

  7. Java Configuration Manager Automatic Reloading

    公司一个项目的从另外一个小公司,拷贝了一个PropertyParser的类,实现的有问题,必须重启java应用才能读取新的配置. 简单的解决办法,就是每次读任何配置项时,都重新加载xxx.proper ...

  8. 被深信服上网行为管理器AC拒绝的操作如何正常访问

    1.管理员登入帐号 2.如下图,在菜单[实时状态]-[上网行为监控]中,搜索指定IP的行为记录,找到被拒绝的数据 3.如下图,在菜单[系统管理]-[全局排除地址]中,增加不过滤的地址并提交即可  

  9. SQL 中GO的作用

    use db_CSharp go select *, 备注=case when Grade>= then '成绩优秀' when Grade< and Grade>= then '成 ...

  10. 关于python 文件操作os.fdopen(), os.close(), tempfile.mkstemp()

    嗯.最近在弄的东西也跟这个有关系,由于c基础渣渣.现在基本上都忘记得差不多的情况下,是需要花点功夫才能弄明白. 每个语言都有相关的文件操作. 今天在flask 的例子里看到这样一句话.拉开了文件操作折 ...