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