<!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. 项目遇到的css样式

    1. 这种怎么写?用radio,我这里用的时element的radio <div class="menu"> <span>我的粉丝({{totalNumbe ...

  2. markdown入门杂记

    系统环境:win10 软件:sublime Text 3 安装插件: markdown editing.markdownlivepreview 修改prference-markdownliveprev ...

  3. 加减plugin

    plugin插件↓↓ ;(function (underfined) { "use strict" var _global; //插件函数 /* var plugin = { ad ...

  4. Sublime text3 经常出现 “ There are no packages avaliable for installation” 解决方法

    对应这个问题,一开始在度娘上找到很多答案,包括将json文件放在本地然后通过 package setting 更改的,发现其实不好使,原因未知. 后来测试了在hosts文件添加sublime text ...

  5. react-demo

    实现博客动态的评论.动态的点赞.评论的删除. 百度云链接:https://pan.baidu.com/s/199l3iu0qhM6qSe9CBnHFzw 提取码:n4w6

  6. would you please...could you please...两句区别是什么?

    Could you please 是can you please 更为礼貌.委婉的说法,并不是过去式,是“能否麻烦你……”.“请你……”的意思,更侧重“能否”及客观情况:回答时要注意,eg:A:“Co ...

  7. man查看帮助命令

    man -h/-help 1.在man命令帮助信息的界面中,所包含的常用操作按键及其用途 按键 用处 空格键 向下翻一页 PaGe down 向下翻一页 PaGe up 向上翻一页 home 直接前往 ...

  8. 43. Multiply Strings (大数乘法)

    DescriptionHintsSubmissionsDiscussSolution   Pick One Given two non-negative integers num1 and num2  ...

  9. Vue系列之 => 组件中的data和methods

    使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  10. Necklace of Beads （polya定理的引用）

    Beads of red, blue or green colors are connected together into a circular necklace of n beads ( n &l ...