<!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. 基于OpenCV之视频读取,处理和显示框架的搭建(一)

    主要包括以下内容: 1.使用的主要函数的说明. 2.两个实例:视频读取和显示.搭建视频读取和处理框架,调用canny函数提取边缘并显示. 3.一些注意事项和代码说明. 一.使用的主要函数 1.延时函数 ...

  2. [dp]最长单调递增子序列LIS

    https://www.51nod.com/tutorial/course.html#!courseId=12 解题关键: 如果将子序列按照长度由短到长排列,将他们的最大元素放在一起,形成新序列$B\ ...

  3. windows10 Ubuntu子系统下卸载Mysql重装

    首先删除mysql: sudo apt-get remove mysql-* 然后清理残留的数据 dpkg -l |grep ^rc|awk '{print $2}' |sudo xargs dpkg ...

  4. N72烧写

    1.打开MFGTOOL.exe烧写工具:上电之前,先短接左下脚,当查看到MFGTOOL工具扫描到工具之后,点击开始,过2分钟左右烧写完成:完成之后电源要拔插以下!! 2.利用---生产工具V1.3 2 ...

  5. 20169219《linux内核原理与分析》第七周作业

    网易云课堂学习 把write系统调用加入到MenuOS里面 我在试验过程中在MenuOS里加入了time.time-asm.write和write-asm命令.以time和time-asm为例, 步骤 ...

  6. 33、生鲜电商平台-定时器,定时任务quartz的设计与架构

    说明:任何业务有时候需要系统在某个定点的时刻执行某些任务,比如:凌晨2点统计昨天的报表,早上6点抽取用户下单的佣金. 对于Java开源生鲜电商平台而言,有定时推送客户备货,定时计算卖家今日的收益,定时 ...

  7. enter键触发事件的清除

    使用iframe弹窗时 父级页面 初始化的时候 给enter键绑定了事件 在子页面中 按下enter键会触发 而报错,此时在本页面的初始化的时候 将enter键绑定的方法取消 即可: $(docume ...

  8. 从阿里中台战略看企业IT架构转型之道

    此文是我阅读<企业IT架构转型之道>一书的学习笔记,所有内容出自钟华老师的这本书. 零.为何读<企业IT架构转型之道> 在加入X公司后,开始了微服务架构的实践,也开始了共享平台 ...

  9. n皇后问题_回溯法

    具体问题如下图 先看一下4*4的回溯过程 程序结束条件: 一组解:设标志,找到一解后更改标志,以标志做为结束循环的条件. 所有解:k=0 判断约束函数判断第k个后能不能放在x[k]处 两个皇后不能放在 ...

  10. vue里的tab标签

    <template> <div class="Test2"> <div class="tabs_wrap" v-model=&qu ...