一、Click事件的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>click事件</title> </head> <body> <form action=""> <input id ='username' type="text"> <input id='pwd'type="password"> <input id ='i1'type="submit" value="提交"> </form> <script src="jquery-3.3.1.min.js"></script> <script> $('#i1').on('click',function () { alert(123); }) </script> </body> </html>
二、三个按钮 模态框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>就三个按钮的作业讲解</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.hide {
display: none;
}
/*遮罩层*/
.cover {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.8;
z-index: 999;
}
//显示层
.modal {
position: fixed;
top: 50%;
left: 50%;
height: 200px;
400px;
margin-top: -100px;
margin-left: -200px;
background-color: white;
z-index: 1000;
}
</style>
</head>
<body>
<button id="add">新增</button> //新增按钮
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>街舞</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Alex</td>
<td>烫头</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>苑局</td>
<td>日天</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
</tbody>
</table>
<div id="myCover" class="cover hide"></div>
//下面是模态框部分
<div id="myModal" class="modal hide">
<div>
<p>
<label for="modal-name">姓名</label>
<input type="text" id="modal-name">
</p>
<p>
<label for="modal-hobby">爱好</label>
<input type="text" id="modal-hobby">
</p>
<p>
<button id="modal-submit">提交</button>
<button id="modal-cancel">取消</button>
</p>
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
// 弹出模态框的函数
function showModal() {
// 把模态框显示出来
$("#myCover, #myModal").removeClass("hide");
}
// 隐藏模态框的函数
function hideModal() {
// 把模态框隐藏起来
$("#myCover, #myModal").addClass("hide");
// 清空模态框中input标签的值
$("#modal-name, #modal-hobby").val("");
}
// 新增按钮绑定事件
$("#add").on("click", function () {
showModal();
});
// 给模态框中的取消按钮绑定事件
$("#modal-cancel").on("click", function () {
hideModal();
});
var $table = $("table");
// 表格中每一行的删除按钮,绑定事件
$table.on("click", ".delete-btn", function () {
// 更新表格中当前行后面每一行的序号
// 找到当前行后面的每一行
$(this).parent().parent().nextAll().each(function () {
// each中的this和外面的this不一样了!
var num = $(this).children().first().text();
$(this).children().first().text(num-1);
});
// 找到当前行,删除
$(this).parent().parent().remove();
});
// 编辑按钮绑定事件
$table.on("click", ".edit-btn", function () {
// 显示模态框
showModal();
// 把原来的内容填充到模态框中
// 取到当前编辑的这一行
var $currentTr = $(this).parent().parent();
// 将当前编辑行保存到模态框对象中
$("#myModal").data("key", $currentTr);
// 1. 取值
var name = $currentTr.children().eq(1).text();
var hobby = $currentTr.children().eq(2).text();
// 填充到模态框
$("#modal-name").val(name);
$("#modal-hobby").val(hobby);
});
// 点击模态框中的提交按钮
$("#modal-submit").on("click", function () {
// 获取模态框中input的值
var name = $("#modal-name").val();
var hobby = $("#modal-hobby").val();
// 如何区分是编辑还是新增
var $tr = $("#myModal").data("key");
if ($tr !== undefined){ // 可以简写,这里是为了引出来好理解
// 是编辑操作
$tr.children().eq(1).text(name);
$tr.children().eq(2).text(hobby);
// 编辑完之后要把之前保存的data删掉
$("#myModal").removeData("key");
}else {
// 就是新增操作
// 创建一个新的tr标签
var newTr = document.createElement("tr");
// 塞td标签
var num = $("table tr").length;
var eleStr = "<td>" + num + "</td>";
eleStr += "<td>" + name + "</td>";
eleStr += "<td>" + hobby + "</td>";
eleStr += "<td>" + '<button class="edit-btn">编辑</button> <button class="delete-btn">删除</button>' + "</td>";
newTr.innerHTML = eleStr;
// 将新创建的tr标签追加到table里
$("tbody").append(newTr);
}
// 隐藏模态框
hideModal();
})
</script>
</body>
</html>