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>