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新特性.新标签.新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力.作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践.接下来我将和各位分享一个特别 ...
随机推荐
- JAVA ==号和equals()的区别
==号和equals()方法都是比较是否相等的方法,那它们有什么区别和联系呢? 首先,==号在比较基本数据类型时比较的是值,而用==号比较两个对象时比较的是两个对象的地址值: int x = 10; ...
- 解决SpringSecurity阻止ajax的POST和PUT请求,导致403Forbidden的问题
前言: 最近在整合springboot+springsecurity,在PUT请求的时候出现了403的问题,这里记录一下解决的过程 到Spring的官网去查查SpringSecurity的参考手册看看 ...
- Python——Window启动服务
一.新建启动服务程序 # ZPF # encoding=utf-8 import win32timezone from logging.handlers import TimedRotatingFil ...
- Linux 学习 (十一) 软件安装管理
Linux软件安装管理 学习笔记 软件包简介 软件包分类: 源码包 :脚本安装包 二进制包(RPM 包.系统默认包) 源码包的优点: 开源,如果有足够的能力,可以修改源代码 可以自由选择所需的功能 软 ...
- JVM运行时内存组成分为一些线程私
JVM运行时内存组成分为一些线程私有的,其他的是线程共享的. 线程私有 程序计数器:当前线程所执行的字节码的行号指示器. Java虚拟机栈:java方法执行的内存模型,每个方法被执行时都会创建一个栈帧 ...
- 利用fis3构建前端项目工程
FIS3是国内百度公司产出的一款前端工程构建工具,FIS3可以解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题,首先 ...
- python之路day06--python2/3小区别,小数据池的概念,编码的进阶str转为bytes类型,编码和解码
python2#print() print'abc'#range() xrange()生成器#raw_input() python3# print('abc')# range()# input() = ...
- beego框架的最简单登入演示
一.controllers逻辑代码 func (c *UserController) Get() { c.TplName="login.html" } func (c *UserC ...
- 计算pi的位数
from random import random from math import sqrt from time import clock DARTS=1000000 hits=0.0 clock( ...
- Linux设备树(六 memory&chosen节点)
六 memory&chosen节点 根节点那一节我们说过,最简单的设备树也必须包含cpus节点和memory节点.memory节点用来描述硬件内存布局的.如果有多块内存,既可以通过多个memo ...