<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data-</title>
</head>
<body>
<p>h5新增属性data-的使用</p>
<ul id="u">
    <li onclick="show(this)" id="red" data-type="1">red</li>
    <li onclick="show(this)" id="green" data-type="2">green</li>
    <li onclick="show(this)" id="blue" data-type="3">blue</li>
    <li id="myDiv" data-appid="123" data-myname="lsx">myDiv</li>
</ul>
<script src="js/jquery-3.0.0.min.js"></script>
<script>
    // 方法一：使用getAttribute()获取data-值
    function show(animal) {
        var animalType = animal.getAttribute("data-type");
        alert("the "+animalType+" is "+animal.innerHTML);
    }
    // 方法二：使用dataset属性
    $(function(){
        var div = document.getElementById("myDiv");
        var appId = div.dataset.appid;//获取data-appid的值
        var myName = div.dataset.myname;//获取data-myname的值
        $("#u").on("click","#myDiv",function (e) {
            // console.log(e);
            alert(" data-appid: "+appId+" data-myname: "+myName);
        })
    // 方法三：使用attr()
        var appId1 = $("#myDiv").attr("data-appid");
        $("#u").on("click","#myDiv",function () {
            console.log(appId1);
        })

    // 方法四：使用data() 注意：使用data()方法时，参数不写前面的data-
        var appId2 = $("#myDiv").data("myname");
        $("#u").on("click","#myDiv",function () {
            console.log(appId2);
        })
    })
</script>
</body>
</html>

使用data-自定义数据及如何获取该值的更多相关文章

  1. HTML5自学笔记[ 6 ]data自定义数据

    在标签中添加data-name属性并赋值,在js脚本中用ele.dataset.name就可以获取该属性的值.如: <div id="box" data-age=" ...

  2. 小程序开发 绑定自定义数据data- 及JS获取

    1wxml<!-- 茶系显示隐藏函数sectionSelect --><view class="img-fur" data-id="{{item.id} ...

  3. H5标签--“data自定义数据”

    HTML代码部分: <div id="div1" data-zg="中国人" data-zgr="我们是祖国的儿女,我爱祖国"> ...

  4. [转]IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载)，按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取

    兼容问题1: 页面的分享等插件加载不全,并无法点击. 兼容问题2: IE下页面选择器(#id..class.etc.)绑定click事件无法访问到,后台springmvc方法,也无法获取ajax的su ...

  5. Core Data 版本数据迁移

    Core Data版本迁移基础 通常,在使用Core Data的iOS App上,不同版本上的数据模型变更引发的数据迁移都是由Core Data来负责完成的.这种数据迁移模式称为Lightweight ...

  6. iOS开发——数据持久化Swift篇&使用Core Data进行数据持久化存储

    使用Core Data进行数据持久化存储   一,Core Data介绍 1,Core Data是iOS5之后才出现的一个数据持久化存储框架,它提供了对象-关系映射(ORM)的功能,即能够将对象转化成 ...

  7. Qt之界面数据存储与获取（使用setUserData()和userData()）

    在GUI开发中,往往需要在界面中存储一些有用的数据,这些数据可以来配置文件.注册表.数据库.或者是server. 无论来自哪里,这些数据对于用户来说都是至关重要的,它们在交互过程中大部分都会被用到,例 ...

  8. C#在自定义事件里传递自定义数据,使用EventArgs的姿势

    EventArgs是包含事件数据的类的基类,用于传递事件的细节.今天分享的是使用泛型来约束EventArgs,在事件里传递自定义数据的例子. 正题 由于这个关注点很小,直接上代码了. 定义泛型类TEv ...

  9. 4.自定义数据《jquery实战》

    4.4 元素中的存储自定义数据 data([key],[value]) 在元素上存放数据,返回jQuery对象. key (String) 存储的数据名. key,value (String,Any) ...

随机推荐

  1. overflow: auto;溢出自动显示

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

  2. Loadrunner 监控 Linux (centos6.5)服务器系统资源

    Loadrunner 监控 Linux 服务器系统资源,需要在被监控的服务器上启用 rstatd 进程但尝试启动时,爆炸了: [root@test1 rpc.rstatd-4.0.1]# rpc.rs ...

  3. Servlet编程实例

    ---------------siwuxie095 登录实例: 从 login.jsp 提交登录信息到 LoginServlet,在 LoginServlet 中打印登录信息 工程结构目录如下: Lo ...

  4. python 开发微信 自定义菜单

    1.再次重复说明,下面代码只是为了简单说明接口获取方式.实际中并不推荐,尤其是业务繁重的公众号,更需要中控服务器,统一的获取accessToken. vim basic.py #name: basic ...

  5. 6.JBoss5.x6.x 反序列化漏洞（CVE-2017-12149）复现

    2017 年 9 月 14 日,国家信息安全漏洞共享平台( CNVD )收录了 JBOSS Application Server 反序列化命令执行漏洞( CNVD-2017-33724,对应 CVE- ...

  6. 面试题17：打印1到最大的n位数

    // 面试题17:打印1到最大的n位数 // 题目:输入数字n,按顺序打印出从1最大的n位十进制数.比如输入3,则 // 打印出1.2.3一直到最大的3位数即999. 解题思路: 首先是一个大陷阱,n ...

  7. 解决java.lang.IllegalArgumentException: No converter found for return value of type: class java.util.ArrayList问题

    在spring + springmvc + mybatis框架中,我们配置接口对外返回json格式,但是报如下错误: 24-Oct-2017 17:42:23.495 严重 [http-nio-808 ...

  8. Boost Python官方样例（二）

    返回值 使用return_by_value有点像C++ 11的auto关键字,可以让模板自适应返回值类型(返回值类型必须是要拷贝到新的python对象的任意引用或值类型),可以使用return_by_ ...

  9. 商派OMS增加PMC跟生产中心角色权限思路

    一.目标:根据现有的商派OMS框架逻辑二开 PMC中(外协单位.生产中心)角色权限(如:下图的仓库角色,根据[接单元.发货员.仓库管理员],选择一或多的版权仓库,同理,如外协单位根据[**.** .* ...

  10. Spark 中的 RPC 的几个类

    Spark 中 RPC 部分的涉及了几个类,有点晕,在此记录一下 1. RpcEndpoint: RPC的一个端点.给定了相应消息的触发函数.保证  `onStart`, `receive` and ...