<!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路径相关操作

    #获取当前文件所在目录filedir = __file__ print os.path.dirname(filedir) #获取文件名print os.path.basename(filedir)

  2. HDU 3117 Fibonacci Numbers(矩阵)

    Fibonacci Numbers [题目链接]Fibonacci Numbers [题目类型]矩阵 &题解: 后4位是矩阵快速幂求,前4位是用log加Fibonacci通项公式求,详见上一篇 ...

  3. MyBatis基础入门《四》接口方式.Select查询集合

    MyBatis基础入门<四>接口方式.Select查询集合 描述: 在<MyBatis基础入门<二>Select查询>中有说过,SQLSession有两种用法,这里 ...

  4. linux编写脚本检测本机链接指定IP段是否畅通

    linux编写脚本检测本机链接指定IP段是否畅通,通过ping命令检测指定IP,检测命令执行结果,若为0表示畅通,若为1表示不通,以此判断网络是否畅通,但是指定机器禁用ping命令除外.代码如下: # ...

  5. armv8 memory translation table descriptor

    上一节大致给出了descriptor的结构,这篇细致分析各个field: 1) Table Descriptor:stage2中不包含任何的attribute的field,每个level中的descr ...

  6. linux系统状态检测命令

    1．ifconfig命令 ifconfig命令用于获取网卡配置与网络状态等信息,格式为“ifconfig [网络设备] [参数]”. 使用ifconfig命令来查看本机当前的网卡配置与网络状态等信息时 ...

  7. mysql的指令

    mysql有一下几方面的特性: 1:多语言支持 2:可以移植性好 3:免费开源 4:高效(支持多线程,充分利用cpu资源,运行速度非常) 5:支持大量数据查询和储存 6:操作简单易于学习 其实数据库就 ...

  8. limit小结

    1. Limit接受一个或两个数字参数.参数必须是一个整数常量.如果给定两个参数,第一个参数指定第一个返回记录行的偏移量,第二个参数指定返回记录行的最大数目. 2. 初始记录行的偏移量是 0(而不是 ...

  9. vue-i18n国际化插件

    vue-i18n国际化插件 安装,到项目目录下执行:npm install vue-i18n 配置在src\main.js里面引入vue-i18n // 语言包插件import VueI18n fro ...

  10. 【JavaScript 6连载】五、继承的概念

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...