1 可以對列表增加一行模狭，刪除一行
image.png
代碼塊
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<button id="b1">添加</button>
<table border="1">
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>愛好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>康抻</td>
<td>gay in gay out</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>
<script src='jquery-3.4.1.min.js'></script>
<script>
$("#b1").click(function () {
// 在表格的最后添加一行數(shù)據(jù)
// 1. 先有數(shù)據(jù)
var trEle = document.createElement("tr"); // trEle是一個DOM對象
trEle.innerHTML = `
<td>3</td>
<td>黃袍哥</td>
<td>吹牛逼</td>
<td><button class="delete">開除</button></td>
`;
// 2. 追加到tbody的最后
$("tbody").append(trEle);
});
// 使用事件委托的方式給未來的標簽綁定事件
$("tbody").on("click", ".delete", function () {
// this指的就是誰觸發(fā)的事件罚随，this是一個DOM對象窟坐，$(this)是jQuery對象
console.log(this);
<!--$(this).parent().parent().remove();-->
$(this).parentsUntil('tbody').remove();
})
</script>
</body>
</html>
2 .stopPropagation()阻止冒泡向父層傳播
<div id="d1">
<p id="p1">
<span id="s1">span</span>
</p>
</div>
我是分割線
$("#s1").click(function (event) {
// event表示事件本身
alert("這是span標簽");
// 阻止事件冒泡
event.stopPropagation()
});
$("#p1").click(function () {
alert("這是p標簽")
});
$("#d1").click(function () {
alert("這是div標簽")
});
3 判斷text文本框輸入值，如果為空尔崔，阻止默認事件發(fā)生，否則按照代碼來執(zhí)行
image.png
代碼塊
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<hr>
<form action="">
<input type="text" id="i1">
<input type="submit" value="提交" id="i2">
</form>
<script src='jquery-3.4.1.min.js'></script>
<script>
// 點擊submit按鈕褥民，先校驗input框的值為不為空季春，
// 為空就不提交，不提交就不刷新消返，不為空就提交,sumbit標簽提交的時候默認刷新
$("#i2").click(function (event) {
alert("這是form表單的提交按鈕载弄！");
var value = $("#i1").val();
if (value.length === 0){
// 為空就不提交
// 不執(zhí)行后續(xù)默認的提交事件
// 阻止默認事件的執(zhí)行
// event.preventDefault() 表示默認的事件不執(zhí)行了。
return false; <!--表示后面都不走了-->
}
});
</script>
</body>
</html>
