使用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) ...
随机推荐
- MD5算法的c++实现
需要注意的几点: (1)md5存取的数据长度仅为64位,位于数据的最前端,大于令其自然溢出. (2)update函数和final函数处理得很繁琐,需要仔细分析. (3)16位md5码取32位md5码的 ...
- SpringSecurity02 表单登录、SpringSecurity配置类
1 功能需求 springSecuriy默认的登录窗口是一个弹出窗口,而且会默认对所有的请求都进行拦截:要求更改登录页面(使用表单登录).排除掉一些请求的拦截 2 编写一个springSecurity ...
- Flask08 包含(include)、继承(extends)、宏???、模板中变量的来源、利用bootstrap构建自己的网页结构
1 包含 直接把另一个文件的内容,复制粘贴过来 {% include "模板路径" %} 注意:模板都是放在 templates 这个文件夹下面的,可以在里面新建文件夹来进行分离: ...
- Java静态检测工具/Java代码规范和质量检查简单介绍(转)
静态检查: 静态测试包括代码检查.静态结构分析.代码质量度量等.它可以由人工进行,充分发挥人的逻辑思维优势,也可以借助软件工具自动进行.代码检查代码检查包括代码走查.桌面检查.代码审查等,主要检查代码 ...
- Netty 线程模型与Reactor 模式
前言 Netty 的线程模型是基于NIO的Selector 构建的,使用了异步驱动的Reactor 模式来构建的线程模型,可以很好的支持成百上千的 SocketChannel 连接.由于 READ/W ...
- mobile web页面调试方法
此文已由作者张含会授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 开发过程问题排查 Chrome Emulation关键词:使用方便 模拟各种设备尺寸.像素比.自定义user ...
- SpringBoot应用篇(一):自定义starter
一.码前必备知识 1.SpringBoot starter机制 SpringBoot中的starter是一种非常重要的机制,能够抛弃以前繁杂的配置,将其统一集成进starter,应用者只需要在mave ...
- CircleCI 与持续集成
CircleCI 入门 最近在完成老师的作业:使用 CircleCI 进行持续集成,现将过程书写下来,与大家一起学习进步. A. What is CircleCI? 1. 什么是持续集成 持续集成(C ...
- click点击事件先后顺序的问题
//页面加载时,每秒钟调用一次var times = setInterval("loadFlws()","1000"); function loadFlws() ...
- pod 安装
cocoapods 简介: CocoaPods是OS X和iOS下的一个第三类库管理工具,通过CocoaPods工具我们可以为项目添加被称为“Pods”的依赖库(这些类库必须是CocoaPods本身所 ...