使用data-自定义数据及如何获取该值

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

更多专业前端知识，请上【猿2048】www.mk2048.com

使用data-自定义数据及如何获取该值相关推荐

深度学习之“制作自定义数据”--torch.utils.data.DataLoader重写构造方法。
深度学习之"制作自定义数据"–torch.utils.data.DataLoader重写构造方法. 前言: 本文讲述重写torch.utils.data.DataLoader类 ...
PHP发送数据到指定方法,php通过header发送自定义数据方法_php技巧
下面小编就为大家分享一篇php通过header发送自定义数据方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧本文将介绍如何通过header发送自定义数据.发送请求时,除了可以使用 ...
乌班图安装mysql 目录_Ubuntu 安装mysql 自定义数据存储目录
一.安装 apt-get install mysql-server 执行过程如下: root@duke:~# apt-get install mysql-server 正在读取软件包列表... 完成 ...
ajax请求数据 ztree_ajax 异步获取数据填充到表格显示(ajax) 文档(Options API) DataTables中文网...
描述(Description) 使用这个参数可以让 DataTables 像使用jQuery ajax 一样从一个数据源获取数据,最终获取到返回的数据来显示表格,DataTables 支持 Java ...
php自定义请求headers,php通过header发送自定义数据方法
本文将介绍如何通过header发送自定义数据.发送请求时,除了可以使用$_GET/$_POST发送数据,也可以把数据放在header中传输过去. 发送header: 我们定义了三个参数,token.l ...
网站数据常见的获取途径有什么
通常数据的来源分为4部分:点击流数据.运营数据.调研数据和竞争对手数据.在获取上述几类数据的同时,还可以从其他方面获取一些更为丰富的数据.下面是针对网站分析数据获取途径的整理,从网站内部数据.外部数据 ...
QVariant类及QVariant与自定义数据类型转换的方法
这个类型相当于是Java里面的Object,它把绝大多数Qt提供的数据类型都封装起来,起到一个数据类型"擦除"的作用.比如我们的 table单元格可以是string,也可以是int ...
PPv3-OCR自定义数据从训练到部署
PPv3-OCR自定义数据从训练到部署一.配置Paddle环境二.配置PaddleOCR 1.安装python包 2.测试环境三模型列表及其对应的配置文件 1. 文本检测模型 1.1 中文检测 ...
H264码流插入自定义数据（SEI字段）
文章目录前言一.H264码流结构 1. 文字说明 2. 码流格式图解二.自定义数据封装以及H264码流插入 1.将自定义数据封装成SEI字段通用格式即可插入H264码流中 2.编程逻辑三.附上 ...

使用data-自定义数据及如何获取该值

使用data-自定义数据及如何获取该值相关推荐

最新文章

热门文章