文章目录：
1.jQuery中的第二组函数
1.remove $(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
2.empty $(选择器).empty()：将数组中所有 DOM 对象的子对象删除
3.append 为数组中所有 DOM 对象添加子对象 $(选择器).append("<div>我动态添加的 div</div>")
4.html 设置或返回被选元素的内容（innerHTML）。 $(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。 $(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。
5.each each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。 语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } ) 语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } ) index: 数组的下标 element: 数组的对象
1.1 小实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> $(function() { $("#btn1").click(function() { $("select").remove(); }) $("#btn2").click(function() { $("select").empty(); }) $("#btn3").click(function() { $("#father").append("<input type='button' value='我是增加的按钮' />"); }) $("#btn4").click(function() { alert($("span").html()); }) $("#btn5").click(function() { $("span").html("我是MyBatis<b>数据库持久层框架</b>"); }) $("#btn6").click(function() { var arr = [11,22,33]; $.each(arr,function(index,element) { alert("循环变量：" + index + "===数组成员：" + element); }) }) $("#btn7").click(function() { var json={"name":"张起灵","age":20}; $.each(json,function(i,n) { alert("i===" + i + ",n===" + n); }) }) $("#btn8").click(function() { var domArray=$(":button"); $.each(domArray,function(i,n) { alert("i===" + i + ",n===" + n.value); }) }) }) </script> </head> <body> <select> <option value="老虎">老虎</option> <option value="狮子">狮子</option> <option value="豹子">豹子</option> </select> <br /><br /> <select> <option value="亚洲">亚洲</option> <option value="欧洲">欧洲</option> <option value="非洲">非洲</option> </select> <br /><br /> <div id="father">我是一个div</div> <br /><br /> <span>我是MySQL<b>数据库</b></span> <br /> <span>我是JDBC</span> <br /><br /> <input type="button" value="使用remove删除父和子对象" id="btn1" /> <br /><br /> <input type="button" value="使用empty删除子对象" id="btn2" /> <br /><br /> <input type="button" value="使用append增加子对象" id="btn3" /> <br /><br /> <input type="button" value="获取文本带有html标签内容" id="btn4" /> <br /><br /> <input type="button" value="设置值" id="btn5" /> <br /><br /> <input type="button" value="循环普通数组" id="btn6" /> <br /><br /> <input type="button" value="循环json" id="btn7" /> <br /><br /> <input type="button" value="循环dom数组" id="btn8" /> </body> </html>
代码有点长，是因为将第二组的5个函数都综合起来写了，运行结果就不一一展示了，大家可以自行编写查看。
2.on()绑定事件
on()方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法
语法： $(选择器).on(event,function) event：事件一个或者多个，多个之间空格分开 function:规定当事件发生时运行的函数。
$("#btn1").onclick(function() { }) 等同于 $("#btn1").on("click",function() { })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> $(function() { $("#btn1").on("click",function() { $("#mydiv").append("<input type='button' value='我是新加入的按钮' id='newBtn' />"); $("#newBtn").on("click",function() { alert("新添加的按钮被单击了！！！"); }) }) }) </script> </head> <body> <div id="mydiv"> 我是一个div，需要增加一个button。 </div> <br /> <input type="button" value="创建一个button,绑定一个click" id="btn1" /> </body> </html>
