HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习7</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pageinit",function () {
alert("你好啊,朋友");
$("#P1").on("tap",function () {
$(this).hide();
});
//tap点击事件
$("#P2").on("taphold",function () {
$(this).hide();
});
//长按事件
$("#P3").on("swiperight",function () {
$(this).hide();
//swipe滑动(不分方向,后面加right向右,left向左)
});
});
//pageinit属性页面加载完成后,做出的事件
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>头部</h2>
</div>
<div data-role="main">
<p id="P1">点击</p>
<p id="P2">长按</p>
<p id="P3">滑动</p>
</div>
<div data-role="footer">
<h2>底部</h2>
</div>
</div>
</body>
</html>
效果: