<!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. linux统计文件夹大小

    统计总大小: du -sh dirname 统计文件夹内部各文件大小及总大小: du -h dirname

  2. Appium环境搭建(一)

    python环境做测试,需要准备工具如下: 1.python2.7(这里使用的是python2你也可以选更高版本) 2.Appium(Window版) 3.Android SDK 4.Appium_P ...

  3. 网络编程之Socket的TCP协议实现客户端与客户端之间的通信

    我认为当你学完某个知识点后,最好是做一个实实在在的小案例.这样才能更好对知识的运用与掌握 如果你看了我前两篇关于socket通信原理的入门文章.我相信对于做出我这个小案列是完全没有问题的!! 既然是小 ...

  4. 44.JS--hover事件防重复效果

    遇到一种情况,就是运用hover事件的时候,会出现对象(主要是图片)闪动现象.主要是由于hover事件重复触发导致这一现象. html: <p class="smallImg" ...

  5. Eclipse 在Debug调试中用到的快捷键

    作用域 功能 快捷键 全局 单步返回 F7 全局 单步跳过 F6 全局 单步跳入 F5 全局 单步跳入选择 Ctrl+F5 全局 调试上次启动 F11 全局 继续 F8 全局 使用过滤器单步执行 Sh ...

  6. spark stream001

    package stream.scala import java.io.PrintWriter import java.net.ServerSocket class LoggerSimulation ...

  7. Vue系列之 => 使用第三方animated.css动画

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

  8. copy on write，代理模式

    StringBuilder 内部用了代理的技术实现, 是可变字符串的代理 .net设计模式实例之代理模式(Proxy Pattern) 一.代理模式简介(Brief Introduction) 代理模 ...

  9. 51ll网产品信息保存为txt文件

    import requests from pyquery import PyQuery as pq url='http://www.51xxx.com/Try/index/p/3' headers={ ...

  10. js中时间戳转换成时间格式

    js中时间戳转换成时间格式, // 时间戳转换成时间格式 var formatDate = function(date){ date = new Date(date); var y=date.getF ...