<!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. Freemarker01

    1 如何使用freemarker 1.1 导包 freemarker-2.3.19.jar 1.2 创建一个ftl文件作为模板 1.3 创建一个方法来将ftl模板和数据组合起来 2 利用maven实现 ...

  2. HDFS内容追加

    配置:hdfs-site.xml <property> <name>dfs.support.append</name> <value>true</ ...

  3. GEO（Gene Expression Omnibus）：高通量基因表达数据库

    Gene Expression Omnibus(GEO)是一个公共存储库,可以存档和自由分发由科学界提交的全套微阵列,新一代测序和其他形式的高通量功能基因组数据. 除数据存储外,还提供一系列基于Web ...

  4. 【机器学习】关联规则分析（一）：Apriori

    一.Apriori原理 Apriori是关联分析中较早的一种方法,主要用来挖掘那些频繁项集合,其思想是: 1.如果一个项目集合不是频繁集合,那么任何包含它的项目(超集)也一定不是频繁集. 2.如果一个 ...

  5. Struts2学习第七课 动态方法调用

    动态方法调用:通过url动态调用Action中的方法. action声明: <package name="struts-app2" namespace="/&quo ...

  6. 10. CTF综合靶机渗透(三)

    靶机说明 斗牛犬工业公司最近将其网站污损,并由恶意德国牧羊犬黑客团队拥有.这是否意味着有更多的漏洞可以利用?你为什么不知道?:) 这是标准的Boot-to-Root.你唯一的目标是进入根目录并看到祝贺 ...

  7. 介绍两款常用的“图表统计图"的插件

    一.相信朋友们在开发的过程中都会使用到“数据统计”的功能,图表的统计更为直观,在这里就介绍两款插件:fusionChart.DataVisualization. 1.fusionChart实际项目中用 ...

  8. TMF大数据分析指南 Unleashing Business Value in Big Data（二）

    前言 此文节选自TMF Big Data Analytics Guidebook. TMF文档版权信息  Copyright © TeleManagement Forum 2013. All Righ ...

  9. 【redis对象，集合序列化Demo】

    package org.seckill.dao.cache; import java.io.ByteArrayInputStream;import java.io.ByteArrayOutputStr ...

  10. DropDownList绑定数据库

    this.DropDownList_设备列表.DataSource = dt_eq;//设置数据源 this.DropDownList_设备列表.DataTextField = "equip ...