<!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. InstallShield2015制作安装包----------卸载前结束执行中的进程

    方法一:InstallShiel直接调用cmd命令来杀掉进程. //更新或卸载时先关闭应用程序 sCmdLine=" /c taskkill /f /im \"Frs.exe\&q ...

  2. quartz demo01

    1,Pom.xml   加入:quartz-2.1.7.jar <dependency> <groupId>org.quartz-scheduler</groupId&g ...

  3. Springboot杂七杂八

    1 加载配置文件 private static ResourceBundle resb = ResourceBundle.getBundle("serverInfo"); 然后在r ...

  4. C# 实现生产者消费者队列

    开发过程中经常会碰到这样的场景:需要从一个地方获取一些数据,然后处理数据并将其保存在数据库中. 1 2 3 4 5 6 7 8 9 10 private void FetchData() {} pri ...

  5. django之视图view小知识

    CBV简版流程 AddPublisher.as_view() ——> view 函数 当请求来的时候才执行view view中执行: 1. 先实例化AddPublisher,给self def ...

  6. 使用yaml+groovy实现Java代码可配置化

    背景与目标 在使用函数接口和枚举实现配置式编程(Java与Scala实现),使用了函数接口和枚举实现了配置式编程.读者可先阅读此文,再来阅读本文. 有时,需要将一些业务逻辑,使用配置化的方式抽离出来, ...

  7. Spring源码阅读（八）

    摘要: 本文首先将举例说明如何使用BeanWrapper,然后根据例子中的结果分析BeanWrapper的源码.由于在spring中BeanWrapperImpl是BeanWrapper接口的唯一实现 ...

  8. linux帮助

    不知道的指令但是你想要了解:man 指令 如果知道某一个指令忘记相关参数:在指令后接 -- help 忘记指令: 两个tab

  9. redis的优缺点和使用场景

    1. 使用redis有哪些好处? (1) 速度快,因为数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1) (2) 支持丰富数据类型,支持string,li ...

  10. python 内置函数 sorted()

    sorted() 函数对所有可迭代的对象进行排序操作. sort 与 sorted 区别: sort 是应用在 list 上的方法,sorted 可以对所有可迭代的对象进行排序操作. list 的 s ...