js之 data-*自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="box" data-age="18">html5 data-*自定义属性 age</div>
<div id="box1" data-user-list="user_list">data-user_list自定义属性 </div>
<div id="box2" >data-user_list自定义属性 </div>
<script>
/* //jquery
var box= $('#box').data('age');
alert(box);
//js
var box= document.getElementById('box');
var getData=box.dataset.age;
alert(getData);
//使用说明
//1.读取的时候使用”.”通过dataset来获取属性
//2.读取的时候需要去掉data-前缀，连字符需要转化为驼峰命名 如下box1
*/
//js
var box1= document.getElementById('box1');
var getData1=box1.dataset.userList;
alert("js="+getData1);
//jquery
var getData=$('#box1').data('userList');
alert("jq="+getData);
/*
//3. 通过js方式给data-*设置值
var box2= document.getElementById('box2');
box2.dataset.name='js设置name';
alert(box2.dataset.name);
//jquery
$('#box2').data('name','jquery设置name');
*/
</script>
</body>
</html>
js之 data-*自定义属性的更多相关文章
- JS中的自定义属性
<div id="div1" a="a" data-bbb="bbb">div</div> <script&g ...
- js基础的自定义属性练习
js基础的自定义属性练习: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type ...
- vue.js 中 data, prop, computed, method，watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- 还原Vue.js的data内的数组和对象
最近学习Vue.js发现其为了实现对data内的数组和对象进行双向绑定,将数组和对象进行了封装. 如下的对象 todos: [ { id: 1, title: ...
- data自定义属性获取方法和设置
<!--原生获取方法--> <div data-id="id=1"></div> <script> //js原生获取方法 var i ...
- JS初学之-自定义属性（索引值）
重点:1.添加索引值的作用:建立匹配.对应的关系. 比如:使每一个按钮对应数组里的每一张图,arrImg[this.index]. 2.不要在for循环的函数里面使用i. 3.添加索引值的方法aBtn ...
- JS 操作 HTML 自定义属性
<input type="text" id="txtBox" displayName="123456" /> 获取自定义属性值: ...
- 【vue】——vue.js 获取当前 自定义属性值
假设有一个标签h5, 我们给它添加了一个自定义属性值,(item.id是从动态添加的) 点击h5 标签,如何才能获取当前对应的自定义属性值呢? 想当然的我最开始这样写: <h5 class=&q ...
- Vue.js中data,props和computed数据
data data 是Vue实例的数据对象.Vue将会将data 的属性转换为 getter/setter, 也就是用Object.defineProperty方法(在官网里面有深入响应式原理里面具体 ...
- js简单对象List自定义属性排序
简单对象List自定义属性排序 <script type="text/javascript"> var objectList = new Array(); functi ...
随机推荐
- idc交叉引用
#查找所有调用MSHookFunction的地方 ea=LocByName("MSHookFunction") if None !=ea: refs = idautils.Code ...
- 一个vue的循环列表，里面的按钮的移入事件
需求:移入的时候,互相关注变成取消关注 移入移出事件传参$event,把这个参数打印出来看就可以搞定,而不是移入的时候,文本都改变,只改变当前行 的文本 <p @mouseover=" ...
- Cocos Creator 动作（动画）笔记
动作cc.ActionInterval 和cc.ActionInstant; var action = cc.moveTo(2, 100, 100); // 创建一个移动动作node.runActio ...
- 多模块项目提示“Module ** must not contain source root **. The root already belongs to module **”的解决办法
从Project Structure里添加模块,完了点击Apply时弹出提示: Module "paycode"must not contain source root " ...
- 48.HTML---Flex 布局教程：实例篇
你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solve ...
- 解决Nginx重启时提示nginx: [emerg] bind() to 0.0.0.0:80错误
Nginx是一款轻量级的Web服务器,特点是占有内存少,并发能力强,因而使用比较广泛,蜗牛今天在一个VPS上重启Nginx时提示“nginx: [emerg] bind() to 0.0.0.0:80 ...
- ZOJ 3690 Choosing number(矩阵)
Choosing number [题目链接]Choosing number [题目类型]矩阵 &题解: 这题就和已经dp极像了,所以找方程就很困难了.可以这样找: 设f(n)是前n-1个人已经 ...
- 百度编辑器 Ueditor
针对与编辑器里面的图片的存储问题:\ueditor\1.4.3\php\conf.json 文件里面 /* 前后端通信相关的配置,注释只允许使用多行方式 */{/* 上传图片配置项 */“imageA ...
- samba共享目录无法访问的一般解决方案，非用户登录和读写权限问题
配smb,被第四点坑了很久,特此转载. 由于这5点都是比较普通的情况,不涉及用户登录和读写权限问题 1)关闭防火墙: #sevice iptables stop 2)修改 /etc/samba/smb ...
- CXF框架入门（重点）
l CXF是一个开源的webservice框架 l CXF支持的协议:SOAP.XML/HTTP等 l CXF可以很好的和spring集成 l CXF可以部署到tomcat.jboss.jetty等服 ...