<!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. chef语法和案例

    1. 添加用户 $ vim create_user.rb -----------------------------------> user 'charlie' do //创建一个uid为88的 ...

  2. Javascript作用域和变量提升

    下面的程序是什么结果? var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); 结果是10: 那么 ...

  3. [Uva10641]Barisal Stadium(区间dp)

    题意:按照顺时针给出操场的周边点,然后给出周围可以建设照明灯的位置,以及在该位置建设照明灯的代价,照明灯照射的范围与操场的边界相切,现在要求一个最小的花费,要求操场的所有边都被照射到. 解题关键:预处 ...

  4. 红米用adb连接显示unauthorized的解决办法

    网上能搜到的各种办法都试过了, 没一个可行: 1.大部份是用来解决usb不识别的,也就是adb devices不显示.但现在是有显示,只是unauthorized 2.我习惯用tcp连接,少根线,多台 ...

  5. java高并发前言

  6. Redis常见7种使用场景（PHP）

    转发:https://www.jianshu.com/p/2f3add45351b Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并 ...

  7. Solr 6.7学习笔记（02）-- 配置文件 managed-schema (schema.xml)（1）

    刚学Solr(版本6.7.0),新建一个core时,提示要求schema.xml文件,我找了半天也没在源码包中找到名为schema.xml的文件.这个版本其实用的是managed-schema文件,没 ...

  8. ASP.NET控件之RequiredFieldValidator控件

    作用:对textbox或者其他输入框进行非空验证: 属性:ControlToValidate (选择要指向的控件) ErrorMessage(错误,输入要显示的错误信息) 应用方法: 原型: Demo ...

  9. 利用CSS制作脸书

    很多网站都支持图片上的头像框识别,鼠标在头像框处,会提示一些人物信息. 这次就利用CSS实现这样一个功能: div处主要包括两部分,一部分是图片:另一部分是链接以及脸框 <div class=& ...

  10. Java按模板导出Excel———基于Aspose实现

    目录 开发环境 先看效果 引入jar包 校验许可证 导出方法 测试结果 占位符 开发环境 jdk 1.8 Maven 3.6 SpringBoot 2.1.4.RELEASE aspose-cells ...