1. 文档操作
创建标签用：document.createElement("div")
1. 内部添加
1. 前面加
1. $(A).prepend(B)
2. $(A).prependTo(B)
2. 后面加
1. $(A).append(B)
2. $(B).appendTo(A)
2. 外部添加
1. 前面加
1. $(A).before(B)
2. $(B).insertBefore(A)
2. 后面加
1. $(A).after(B)
2. $(B).insertAfter(A)
3. 移除和清空
1. remove() --> 把选中过的标签从文档树中移除
2. empty() --> 把选中的标签内部的元素都移除
4. 替换
1. $(A).replaceWith(B)
2. $(B).replaceAll(A)
5. clone
注意参数true,加上true会把标签绑定的事件也复制
2. 事件
1. jQuery绑定事件的方式
1. 给标签绑定事件的方式
1. 在标签上写 onclick=函数();
2. 在js代码中 标签对象.onclick = function(){}
2. jQuery绑定事件
1. $("选择器").click(function(){...});
3. 事件委托（如把.c1样式类的事件委托给body标签（未来的事件）（因为body一直是存在的））
原理：事件冒泡（即div下的span标签，如果事件寻找的是div标签，而点击span标签仍然有效的情况）
1.如何阻止事件冒泡（向上传递）（e为绑定事件的函数参数，下同）
e.stopPropagation()
2.阻止默认事件的发生如（submit按钮有默认的事件，下面有例子）（常用于阻止form表单的提交）
e.preventDefault()
3.阻止后续事件的执行
如在事件函数中添加return false;
目的：解决未来的标签如何绑定事件！（即如果原先有对应的标签对应的样式，但是后来新添加的标签就应用不上这个样式的情况）
语法：
$("祖先标签").on("click", "选择器", function(){...})
#--利用委托给未来的标签绑定事件
<!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.3.1.js"></script>
<script>
$("#b1").click(function () {
// 在表格的最后添加一行数据
// 1. 先有数据
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);
});
// 使用事件委托的方式给未来的标签绑定事件
$("table").on("click", ".delete", function () {
// this指的就是谁触发的事件，this是一个DOM对象，$(this)是jQuery对象
console.log(this);
$(this).parent().parent().remove();
})
</script>
</body>
</html>
#--阻止事件的冒泡
<!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>
<div id="d1">
<p id="p1">
<span id="s1">span</span>
</p>
</div>
<hr>
<form action="">
<input type="text" id="i2">
<input type="submit" value="提交" id="i1">
</form>
<script src="jquery-3.3.1.js"></script>
<script>
$("#s1").click(function (event) {
// event表示事件本身
alert("这是span标签");
// 阻止事件冒泡
event.stopPropagation()
});
$("#p1").click(function () {
alert("这是p标签")
});
$("#d1").click(function () {
alert("这是div标签")
});
// 点击submit按钮，先校验input框的值为不为空，
// 为空就不提交，不为空就提交
$("#i1").click(function (event) {
alert("这是form表单的提交按钮！");
var value = $("#i2").val();
if (value.length === 0){
// 为空就不提交
// 不执行后续默认的提交事件
// 阻止默认事件的执行
// event.preventDefault()
return false;
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号