<!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. cocos2d JS-(JavaScript) 基础语法运算符

    简单且逼格高的运算符 var a = 12; console.log(-a); //输出 -12 - -> 取反 var b = a++; console.log(b); //输出 12 - - ...

  2. (已解决)iOS真机运行 Xcode报错(libpng error: CgBI: unhandled critical chunk)

    Cocos2d-x加载图片资源出现libpng error: CgBI: unhandled critical chunk Xcode7.3 设置Remove Text Metadata From P ...

  3. HTML5 缓存

    一.在html/htm文件中声明缓存,声明方式: <!DOCTYPE HTML> <html manifest="demo.appcache">...3 & ...

  4. rpm方式安装MySQL5.1.73

    1.安装MySQL server 首先下载好mysql的rpm安装包 使用rpm命令安装: rpm -ivh MySQL-server-5.1.73-1.glibc23.i386.rpm 命令解释:i ...

  5. Semaphore wait has lasted > 600 seconds

    解决方案:set global innodb_adaptive_hash_index=0;

  6. java的移位运算详解（举例说明）

    1)java中无符号右移:>>>,下面是一个int型的负数,然后每次移动一位. int k = -0x123;System.out.println(Integer.toBinaryS ...

  7. uvm设计分析——field automation

    uvm中的field_automation主要实现了class中的基础元素的copy,compare等函数, 实现方式分为两种:1)用户注册,field系列宏:uvm内部调用static status ...

  8. linux打包压缩与搜索命令

    1．tar命令 tar命令用于对文件进行打包压缩或解压,格式为“tar [选项] [文件]”.  tar命令的参数及其作用 参数 作用 -c 创建压缩文件 -x 解开压缩文件 -t 查看压缩包内有哪些 ...

  9. jQuery安装

    http://www.runoob.com/jquery/jquery-install.html 网页中添加jQuery: 方法一:可以从http://jquery.com/download/ 下载j ...

  10. Gitlab注册时报错：There was an error with the reCAPTCHA. Please solve the reCAPTCHA again.

    今天注册时碰到以下问题: 上面的错误是因为注册时有一个google的验证码需要输入.但是中国无法访问google,因此无法访问并输入该验证码导致. 解决方案: FanQiang或者通过Github登陆 ...