<!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. 《Spring实战》系列之Bean的装配-Days01

    1 自动化装配bean Spring通过两个方面实现对bean的自动装配 1 ) 组件扫描(component scaning):Spring会自动发现Spring上下文中的bean 2 ) 自动装配 ...

  2. 【总结整理】JavaScript的DOM事件学习（慕课网）

    事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间 HTML和JavaScript的交互通过事件 来实现 比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换 本章内容1.理解事件 ...

  3. Servlet包介绍

    ----------------siwuxie095                         首先到 Tomcat 的官网下载 Tomcat 的 API 帮助文档     Tomcat 官网: ...

  4. 点云视窗类CloudViewer

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=149 点云视窗类CloudViewer是简单显示点云的可视化工具类,可以让用 ...

  5. 泛型中new()约束的用法

    一..NET中支持的类型参数约束有以下几种 where T : struct              T必须是一个结构类型where T : class               T必须是一个类( ...

  6. chrome - Vimium 插件超级方便快捷键

    Vimium插件作用 安装后,可以用定义好的快捷键操作浏览器,好用到爆粗口 下载地址 https://chrome.google.com/webstore/detail/vimium/dbepggeo ...

  7. 如何使用visual studio 2017创建C语言项目

    使用visual studio 2017创建一个C语言项目,步骤如下: (1)打开Visual Studio 2017环境后出现欢迎界面,如图1所示. 图1  Visual Studio 2017欢迎 ...

  8. php用百度地图API进行逆地址解析

    <?php /** * 根据地理坐标获取国家.省份.城市,及周边数据类(利用百度Geocoding API实现) * 百度密钥获取方法:http://lbsyun.baidu.com/apico ...

  9. 基本图形的绘制（基于skimage）

    图形包括线条.圆形.椭圆形.多边形等.在skimage包中,绘制图形用的是draw模块,不要和绘制图像搞混了. 一  线条 函数调用格式:     skimage.draw.line(r1,c1,r2 ...

  10. UPCOJ9526（SG函数打表，nim游戏异或规则）

    #include<bits/stdc++.h>using namespace std;int f[1007],SG[1007],S[1007];//f为可以选取的石头个数,SG为sg函数, ...