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 ...
随机推荐
- iOS 内存管理分析
内存分析 静态分析(Analyze) 不运行程序, 直接检测代码中是否有潜在的内存问题(不一定百分百准确, 仅仅是提供建议) 结合实际情况来分析, 是否真的有内存问题 动态分析(Profile == ...
- 4.无监督学习--K-means聚类
K-means方法及其应用 1.K-means聚类算法简介: k-means算法以k为参数,把n个对象分成k个簇,使簇内具有较高的相似度,而簇间的相似度较低.主要处理过程包括: 1.随机选择k个点作为 ...
- html5-div布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Python 学习记录之----模块 paramiko
paramiko 一.安装 pip3.5 install paramiko pip3.5 install pycrypto # pycrypto,由于 paramiko 模块内部依赖pycrypto, ...
- 【2017-2-23】C#switch case分支语句，for循环语句
switch case分支语句 switch(一个变量值) { case 值:要执行的代码段;break; case 值:要执行的代码段;break; … default:代码段;break;(def ...
- Axis2之wsdl2java工具
本章主要介绍axis2的wsdl2java工具的使用. Axis2提供了一个wsdl2java命令可以根据WSDL文件自动产生调用WebService的代码.wsdl2java命令可以在<Axi ...
- 【转】SQLyog SSH 密钥登陆认证提示： No supported authentication methods available 解决方法
问题背景: 问题原因: SQLyog不支持非标准的的私钥格式 解决方案: 使用puttyGen重新导入原来的私钥,然后重新保存成PPK证书文件,最后用SQLyog加载该PPK文件即可. 效果截图: 原 ...
- linux下怎么删除名称带空格的文件
linux下怎么删除名称带空格的文件-rm 'mysql bin.000005' 用引号把文件名括起来 某些情况下会出现名称带空格的文件, 如果想要删除的话,直接用rm mysql bin.00000 ...
- Building Tool(Maven/Gradle)
构建工具的简单介绍 在代码世界中有三大构建工具,ant.Maven和Gradle.现在的状况是maven和gradle并存,gradle使用的越来越广泛.Maven使用基于XML的配置,Gradle采 ...
- redis安装集群的2种方式
redis主从只是数据的备份,当主宕机后不会自动切换从为主,需要手动切换从为主. 哨兵就可以自动切换从为主, 当主数据库遇到异常中断服务后,开发者可以通过手动的方式选择一个从数据库来升格为主数据库,以 ...