使用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>
使用data-自定义数据及如何获取该值的更多相关文章
- HTML5自学笔记[ 6 ]data自定义数据
在标签中添加data-name属性并赋值,在js脚本中用ele.dataset.name就可以获取该属性的值.如: <div id="box" data-age=" ...
- 小程序开发 绑定自定义数据data- 及JS获取
1wxml<!-- 茶系显示隐藏函数sectionSelect --><view class="img-fur" data-id="{{item.id} ...
- H5标签--“data自定义数据”
HTML代码部分: <div id="div1" data-zg="中国人" data-zgr="我们是祖国的儿女,我爱祖国"> ...
- [转]IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载)，按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取
兼容问题1: 页面的分享等插件加载不全,并无法点击. 兼容问题2: IE下页面选择器(#id..class.etc.)绑定click事件无法访问到,后台springmvc方法,也无法获取ajax的su ...
- Core Data 版本数据迁移
Core Data版本迁移基础 通常,在使用Core Data的iOS App上,不同版本上的数据模型变更引发的数据迁移都是由Core Data来负责完成的.这种数据迁移模式称为Lightweight ...
- iOS开发——数据持久化Swift篇&使用Core Data进行数据持久化存储
使用Core Data进行数据持久化存储 一,Core Data介绍 1,Core Data是iOS5之后才出现的一个数据持久化存储框架,它提供了对象-关系映射(ORM)的功能,即能够将对象转化成 ...
- Qt之界面数据存储与获取（使用setUserData()和userData()）
在GUI开发中,往往需要在界面中存储一些有用的数据,这些数据可以来配置文件.注册表.数据库.或者是server. 无论来自哪里,这些数据对于用户来说都是至关重要的,它们在交互过程中大部分都会被用到,例 ...
- C#在自定义事件里传递自定义数据,使用EventArgs的姿势
EventArgs是包含事件数据的类的基类,用于传递事件的细节.今天分享的是使用泛型来约束EventArgs,在事件里传递自定义数据的例子. 正题 由于这个关注点很小,直接上代码了. 定义泛型类TEv ...
- 4.自定义数据《jquery实战》
4.4 元素中的存储自定义数据 data([key],[value]) 在元素上存放数据,返回jQuery对象. key (String) 存储的数据名. key,value (String,Any) ...
随机推荐
- 9、samtool view
参考:https://www.sogou.com/link?url=DOb0bgH2eKh1ibpaMGjuy6YnbQPc3cuKbWqIy1k6SBFomuBEhdSpHkUUZED5fr2OTk ...
- Android常见内存泄露，学会这六招优化APP性能
很多开发者都知道,在面试的时候会经常被问到内存泄露和内存溢出的问题. 1.内存溢出(Out Of Memory,简称 OOM),通俗理解就是内存不够,即内存占用超出内存的空间大小. 2.内存泄漏(Me ...
- 【转】log4j.properties 详解与配置步骤 - edward0830ly的专栏 - 博客频道 - CSDN.NET
一.log4j.properties 的使用详解 1.输出级别的种类 ERROR.WARN.INFO.DEBUGERROR 为严重错误 主要是程序的错误WARN 为一般警告,比如session丢失IN ...
- CodeForces 104C【树特性】
题意: 判断这副图是否满足根是一个环的缩点,然后其余点都是一个点,满足树特性. 思路: 一开始就像无向图缩点乱搞,然后实在太烦搞不下去.... 一副图是满足结点和边数量相等,且连通,则一定有一个环. ...
- 《OD学spark》20160925 Spark Core
一.引言 Spark内存计算框架 中国Spark技术峰会 十二场演讲 大数据改变世界,Spark改变大数据 大数据: 以Hadoop 2.x为主的生态系统框架(MapReduce并行计算框架) 存储数 ...
- 洛谷P2580（trie）
第一行一个整数 n,表示班上人数.接下来 n 行,每行一个字符串表示其名字(互不相同,且只含小写字母,长度不超过 50).第 n+2 行一个整数 m,表示教练报的名字.接下来 m 行,每行一个字符串表 ...
- 洛谷P2700 逐个击破
P2700 逐个击破 题目背景 三大战役的平津战场上,傅作义集团在以北平.天津为中心,东起唐山西至张家口的铁路线上摆起子一字长蛇阵,并企图在溃败时从海上南逃或向西逃窜.为了就地歼敌不让其逃走,毛主席制 ...
- bzoj3731: Gty的超级妹子树（树分块）
传送门 分块树,代码参考了Manchery的 具体细节还是看代码好了 这题卡常……注意常数写好点…… //minamoto #include<iostream> #include<c ...
- mysql之SQL入门与提升（二）
在mysql之SQL入门与提升(一)我们已经有了些许基础,今天继续深化 先造表 SET NAMES utf8;SET FOREIGN_KEY_CHECKS = 0; -- -------------- ...
- Educational Codeforces Round 48 (Rated for Div. 2) D 1016D Vasya And The Matrix (构造)
D. Vasya And The Matrix time limit per test 2 seconds memory limit per test 256 megabytes input stan ...