<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery基本操作</title>
<style type="text/css">
.hide {
display: none;
}
</style>
</head>
<body>
<table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小黑</td>
<td>打游戏</td>
<td>
<button class="delete">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>小白</td>
<td>打小黑</td>
<td>
<button class="delete">删除</button>
</td>
</tr>
</tbody>
</table>
<p><a href="http://www.baidu.com" title="123" id="img1">百度一下</a></p>
<p><a href="" class="img2"></a></p>
<p><a href="" class="img2"></a></p>
<button id="b2">点我将a标签替换掉</button>
<button class="b3">点我克隆</button>
<button class="b4 hide">点我有惊喜</button>
<button id="b1">添加一行数据</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 表示事件都在文档加载完之后执行 建议写的时候加上
$(document).ready(function () {
// 绑定事件
$("#b1").on("click", function () {
// 生成要添加的tr标签及数据
var trEle = document.createElement("tr");
$(trEle).html("<td>3</td>" +
"<td>小兰</td>" +
"<td>打小白</td>" +
"<td><button class='delete'>删除</button></td>");
// 把生成的tr插入到表格中
$("#t1").find("tbody").append(trEle);
});
// 每一行的删除按钮绑定事件
$("tbody").on("click", ".delete", function () {
console.log(this);
//删除父亲td在找父亲tr remove删除
$(this).parent().parent().remove();
});
$("#b2").on("click",function () {
var imgEle = document.createElement("img");
$(imgEle).attr("src","http://fu5.sdo.com/10088/201707/15002005734675.jpg");
//用imgEle去替换id为imag1的标签
$("#img1").replaceWith(imgEle);
});
//克隆 点击一下复制一个自己,ture连标签本身的事件都复制,不加只复制本身
$(".b3").on("click",function () {
$(this).clone(true).insertAfter(this);
});
// 今后绑定事件用on("参数1","参数2","参数3")---适用于页面生成时没没有的标签
// 参数1表示事件 参数2表示选择器 参数3表示function(事件处理函数)
// 监听按键按下事件
$("body").on("keydown",function (event) {
console.log(event.keyCode);
if (event.keyCode === 17){
// 点一下ctrl键就显示隐藏的按键
$(".b4").removeClass("hide")
}
});
// 点一下隐藏的键,双倍的快乐= =
$(".b4").on("click",function () {
var imgEle = document.createElement("img");
$(imgEle).attr("src","http://fu5.sdo.com/10088/201707/15002007508474.jpg");
//用imgEle去替换id为imag1的标签
$(".img2").replaceWith(imgEle);
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞+1</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>