###1-1把新创建的li标签添加到ul标签里面的后面代码块先创建一个liele标签var liele=document.createElement('li');给空标签赋值liele.innerText='哪吒';将标签添加到ul$('#u1').append(liele);代码块var e1ele=document.createElement('li');e1ele.innerText='朴树';$('#u1').prepend(e1ele);代码块删除id=d1的标签$('#d1').remove();删除u1里面的li$('#u1').empty();
代码块<!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对象 // var tdEle1 = document.createElement("td"); // tdEle1.innerText = "3"; // $(trEle).append(tdEle1); // var tdEle2 = document.createElement("td"); // tdEle2.innerText = "黄袍哥"; // $(trEle).append(tdEle2); // var tdEle3 = document.createElement("td"); // tdEle3.innerText = "吹牛逼"; // $(trEle).append(tdEle3); trEle.innerHTML = ` <td>3</td> <td>黄袍哥</td> <td>吹牛逼</td> <td><button class="delete">开除</button></td> `; // 2. 追加到tbody的最后 $("tbody").append(trEle); })</script></body></html>代码块var aele=document.createElement('a');aele.innerText='baidu';$(aele).attr('href','http://www.baidu.com');$('p').replaceWith(aele);代码块<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> </head><body><button class="btn">屠龙宝刀，点击就送</button><script src="jquery-3.4.1.min.js"></script><script> $('.btn').click(function(){ <!--$(this).after($('.btn ').clone());--> $(this).clone().insertAfter(this); });</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><button id="b1">点我</button><hr><button class="c1">蝇蝇</button><script src='../../../../../Users/hello王思雨/Desktop/jquery-3.4.1.min.js'></script><script> // 1. 定义一个函数 function f() { alert(123); } $("#b1").on("click", function () { f(); }); $('.c1').click(function(){ alert(123); }); // 利用事件冒泡的原理，进行事件委托 ，把.c1样式类的事件委托给父标签body来处理 <!--$("body").on("click", ".c1", function () { <!-- alert("蝇蝇");--> <!-- });--></script></body></html>操作js代码添加新的BUTTON按钮
代码块var btn=document.createElement('button');btn.innerText='进入';$(btn).addClass('c1');$('body').append(btn);代码块<!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><hr><button class="c1">蝇蝇</button><script src='../../../../../Users/hello王思雨/Desktop/jquery-3.4.1.min.js'></script><script> // 1. 定义一个函数 function f() { alert(123); } $("#b1").on("click", function () { f(); }); // 利用事件冒泡的原理，进行事件委托 ，把.c1样式类的事件委托给父标签body来处理 $("body").on("click", ".c1", function () { alert("蝇蝇"); });</script></body></html>当我们给夫标签添加点击事件，点击子标签的时候也会出现绑定事件，点击的时候，会一层一层往上找，逐个执行点击事件。stopPropagation()可以阻止向上传播。
代码块<!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><script src='../../../../../Users/hello王思雨/Desktop/jquery-3.4.1.min.js'></script><script> $("#d1").click(function () { alert("div"); }); $("#p1").click(function () { alert("ppp") }); $("#s1").click(function (e) { alert("sss"); // 阻止事件向上级传递 e.stopPropagation(); })</script></body></html>
