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 ...
随机推荐
- .Net Core资源
官网:https://dotnet.github.io/ 1.开发环境 vs2015安装: .net core sdk : https://download.microsoft.com/downloa ...
- ideal使用eclipse快捷键
1.修改使用Eclipse风格的快捷键目的是习惯了使用eclipse的快捷键,在使用IDEA时不想重头记一套新的快捷键.按照下面的顺序操作File --> settings --> key ...
- MyBatis基础入门《十八》动态SQL(if-where)
MyBatis基础入门<十八>动态SQL(if-where) 描述: 代码是在<MyBatis基础入门<十七>动态SQL>基础上进行改造的,不再贴所有代码,仅贴改动 ...
- Hadoop.之.入门部署
一.课程目标 ->大数据是什么?大数据能做什么? ->什么是Hadoop?Hadoop的设计思想? ->Hadoop如何解决大数据的问题?(什么是hdfs与yarn.MapReduc ...
- 第一章 CSS基础
1.CSS:层叠样式表 (1)好处:结构样式分离.样式复用.精确控制布局定位.方便搜索引擎搜索(2)用途:美化修饰.布局定位 2.CSS样式表使用方式(3种):(1)内嵌样式[行内样式]:确定到具体元 ...
- linux文件目录管理命令
1．touch命令 touch命令用于创建空白文件或设置文件的时间,格式为“touch [选项] [文件]”. touch test命令可以创建出一个名为test的空白文本文件 touch命令的参数 ...
- sitecore系列教程之如何以编程方式将访客数据关联到联系人卡片
在我之前关于Sitecore体验资料的帖子中,我们看到了我们如何了解访问者的一切,包括访问他们在访问期间触发的事件.在这篇博客文章中,我将引导您完成识别匿名用户并将用户访问与联系人记录联系起来的过 ...
- Python -- 连接数据库SqlServer
用Python几行代码查询数据库,此处以Sql server为例. 1. 安装pymssql,在cmd中运行一下代码 pip install pymssql 2. 链接并执行sql语句 #-*-cod ...
- WIN7系统怎样增加C盘空间
具体操作参考:https://jingyan.baidu.com/article/215817f78e05c01eda142385.html
- 阿里巴巴 Java 代码规范
1. 抽象类命名使用 Abstratc开头. 2. 阿里强制规定不允许任何魔法值(未经定义的常量)直接出现在代码中.魔法值会让代码的可读性大大降低,而且如果同样的数值多次出现时,容易出现不清楚这些数值 ...