H5新特性之data-*
简单介绍:html5的data-*能够为标签添加一些自定义的属性和值,并且这种自定义的属性和值可以通过js来获取,十分的便捷
代码:
//html
<tr th:each="plan : ${list}" th:id="${plan.planId}"
th:attr="data-plan-status=${plan.planStatus},data-name=${plan.planName}">
<td></td>
<td></td>
</tr> //js代码取值
<script type="text/javascript">
//获取table选中的tr行的节点 .active 被选中 类似class选择器
var nodes = $('#table1').DataTable().rows(".active").nodes();
var statusArray = new Array();
var nameArray = new Array();
var idArray = new Array();
if(CommnUtil.notNull(nodes)){
for(var i = 0; i<nodes.length; i++ ){
var planStatus = $(nodes[i]).data('planStatus');
var planName = $(nodes[i]).data('name');
var id = $(nodes[i]).attr('id');
statusArray[i] = planStatus;
nameArray[i] = planName;
idArray[i] = id;
}
}
//后边省略
</script>
说明:data-name取值就是普通的那种取值data('name') 而 data-plan-status取值的话就必须是data('planStatus'),第二个符号“-”后边的首字母会自动转为驼峰(大写),h5的新特性之一。
另外 attr这个玩意儿用来设置或者取得某个属性的值,如果标签中有某个属性,js要获得这个属性的值,直接.attr('属性名'),想为标签设置自定义的属性,直接在标签中attr = "data-xxx"就行
H5新特性之data-*的更多相关文章
- H5新特性汇总
H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...
- H5新特性--WebStorage--WebSocke
今天的目标 3.2:h5新特性--WebStorage localStorage 在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...
- H5新特性---Web Worker---Web Stroage
今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...
- H5新特性-视频,音频-Flash-canvas绘图
json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...
- 精进不休 .NET 4.5 (12) - ADO.NET Entity Framework 6.0 新特性, WCF Data Services 5.6 新特性
[索引页][源码下载] 精进不休 .NET 4.5 (12) - ADO.NET Entity Framework 6.0 新特性, WCF Data Services 5.6 新特性 作者:weba ...
- H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位
今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry="" cx="" cy="" ...
- H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图
今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...
- H5新特性实现对class的增删改
直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...
- Atitti html5 h5 新特性attilax总结
Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...
- 使用h5新特性,轻松监听任何App自带返回键
1.前言 如今h5新特性.新标签.新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力.作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践.接下来我将和各位分享一个特别 ...
随机推荐
- Docker Toolbox替换默认docker machine的存储位置
使用Docker Toolbox是因为它不用打开windows的hyper-v组件,这样可以和VMware workstation一起使用. 关于如何迁移可参考:https://www.cnblogs ...
- RocksDB系列二十二:RocksDB使用场景和特性
- T66597 小xzy的任务 题解
T66597 小xzy的任务 题目背景 今天,小xzy的班主任交给他一个严肃的任务,匹配羽毛球运动员! ! ! 题目描述 羽毛球队有男女运动员各n人.给定2个n×n矩阵P和Q.Pij是男运动员i和女 ...
- 23个Python爬虫开源项目代码,让你一次学个够
今天为大家整理了23个Python爬虫项目.整理的原因是,爬虫入门简单快速,也非常适合新入门的小伙伴培养信心.所有链接指向GitHub,祝大家玩的愉快 1.WechatSogou [1]– 微信公众号 ...
- poj-2195(最小费用流)
题意:给你一个n*m的地图,H代表这个点有一个房子,m代表这个点是一个人,每次h走一步就花费一,问最小花费使得每个人能进入一个房间 代码:建立一个源点和汇点,每个人和源点相连,每个房子和汇点相连,每个 ...
- Forget Guava: 5 Google Libraries Java Developers Should Know
Forget Guava: 5 Google Libraries Java Developers Should Know Published on 2016 7 13 Somenath PandaFo ...
- go Test的实现 以及 压力测试
引用 import "testing" 一些原则 文件名必须是 *_test.go* 结尾的,这样在执行 go test 的时候才会执行到相应的代码 必须 import testi ...
- 题解-洛谷P1601 A+B Problem(高精)
https://www.luogu.org/problemnew/show/P1601(题目传送) 显然数据范围超过了long long类型,故不能简单的用两个长整型存起来相加.这里用到大数据的高精度 ...
- Vue工具
首先介绍几个概念 webpack: 打包机.它能将我们的html,css,js.png,font进行打包,交给服务器. vue-cli: 用户生成Vue工程模板.(帮你快速开始一个vue的项目,也就是 ...
- mysql 端口修改
mysql 修改端口 1. 停止mysql服务 2. 打开文件夹下my.ini文件.(E:\mysql-5.7-3307) 修改文件中的port值,注意两个地方: [client]default- ...