<!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-*自定义属性的更多相关文章

  1. JS中的自定义属性

    <div id="div1" a="a" data-bbb="bbb">div</div> <script&g ...

  2. js基础的自定义属性练习

    js基础的自定义属性练习: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type ...

  3. vue.js 中 data, prop, computed, method,watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  4. 还原Vue.js的data内的数组和对象

    最近学习Vue.js发现其为了实现对data内的数组和对象进行双向绑定,将数组和对象进行了封装. 如下的对象 todos: [     {         id: 1,         title: ...

  5. data自定义属性获取方法和设置

    <!--原生获取方法--> <div data-id="id=1"></div> <script> //js原生获取方法 var i ...

  6. JS初学之-自定义属性(索引值)

    重点:1.添加索引值的作用:建立匹配.对应的关系. 比如:使每一个按钮对应数组里的每一张图,arrImg[this.index]. 2.不要在for循环的函数里面使用i. 3.添加索引值的方法aBtn ...

  7. JS 操作 HTML 自定义属性

    <input type="text" id="txtBox" displayName="123456" /> 获取自定义属性值: ...

  8. 【vue】——vue.js 获取当前 自定义属性值

    假设有一个标签h5, 我们给它添加了一个自定义属性值,(item.id是从动态添加的) 点击h5 标签,如何才能获取当前对应的自定义属性值呢? 想当然的我最开始这样写: <h5 class=&q ...

  9. Vue.js中data,props和computed数据

    data data 是Vue实例的数据对象.Vue将会将data 的属性转换为 getter/setter, 也就是用Object.defineProperty方法(在官网里面有深入响应式原理里面具体 ...

  10. js简单对象List自定义属性排序

    简单对象List自定义属性排序 <script type="text/javascript"> var objectList = new Array(); functi ...

随机推荐

  1. python list seq

    //test.py list1 = [1, 2, 3]list2 = [4, 5, 6] print cmp(list1, list2)print len(list1), len(list2)prin ...

  2. python中参数传递之位置传递、关键字传递、包裹传递与解包裹

    原文地址https://blog.csdn.net/love666666shen/article/details/77131487 1.位置与关键字传递 (1)位置传递:先用形式参数定义,然后在调用时 ...

  3. iOS UI进阶-4.0 地图与定位

    在移动互联网时代,移动app能解决用户的很多生活琐事,比如 导航:去任意陌生的地方 周边:找餐馆.找酒店.找银行.找电影院   在上述应用中,都用到了地图和定位功能,在iOS开发中,要想加入这2大功能 ...

  4. the import XXXX cannot be resolved 解决方法

    明明XXX类完全没问题 突然就报错了 解决方法: 原因一:一个项目引用了兄弟项目的类,报错The import XXX cannot be resolved 解决办法:需要在引用的兄弟项目右键选择Ma ...

  5. PHP json_encode/json_decode与serialize/unserializ性能测

    PHP里面,有时候出于实际需求考虑,需要将某些信息以数组的方式进行存储,甚至有时候介于数组.字符串两者之间,很难确定是数组还是字符串,如果最终还需要将这些信息存储到文件系统中,而且要保证正确无误的存储 ...

  6. Java第一次考试作业

    这次考试感觉自己充分的意识到自己的不足,对于Java没有系统的理解,敲程方面也有很大问题,本次程序题目为ATM机的账户记录Account有账户的唯一性标识,用户的姓名,操作日期(Date),操作类型, ...

  7. InstallShield2015制作安装包----------安装后实现电脑开机自启动

    开机自启动有两个方法: 一 .把程序的快捷方式放在”开始---启动“目录下. 二.把程序的安装目录放在注册表”“. 实现方法一: 1.编写bat脚本.执行bat启动exe. a)核心:cmd命令  : ...

  8. C# mongodb中内嵌文档数组条件查询

    样例数据: {      "_id" : "1064621564857",      "cNo" : "1064621564857 ...

  9. 将Web项目War包部署到Tomcat服务器基本步骤

    参考来源: http://www.cnblogs.com/pannysp/archive/2012/03/07/2383364.html 1. 常识:   1.1 War包 War包一般是在进行Web ...

  10. I Count Tow Three

    #include<cstdio>#include<cstring>#include<algorithm>#include<iostream>#inclu ...