day81-jQuery-文档操作
1. 文档操作:因为方法是jQuery的方法,所以先写 jQuery对象 内容简要: 1.1 追加标签 (不同级) 1.2 前追加标签 (不同级) 1.3 后置标签 (同级) 1.4 前置标签 (同级) 1.1 标签内部的后面追加子标签,不同级 1.1.1 jQuery对象.append(DOM对象):jQuery对象追加DOM对象 示例: <ul> <li>1</li> <li>2</li> <li>3</li> </ul> var liEle4 = document.createElement('li'); //增加li标签,jQuery没有这方法。 liEle4.innerText = '4'; //设置内容 $('ul').append(liEle4); //追加li标签 浏览器显示: 1 2 3 4 1.1.2 jQuery对象.appendTo(DOM对象):jQuery对象追加到DOM对象 var liEle0 = document.createElement('li'); liEle0.innerText = '0'; $(liEle0).appendTo($('ul')[0]); 浏览器显示: 1 2 3 0 1.2 标签内部的前面追加子标签,不同级 1.2.1 jQuery对象.prepend(DOM对象):jQuery对象前追加DOM对象 var liEle0 = document.createElement('li'); liEle0.innerText = '0'; $('ul').prepend(liEle0); 浏览器显示: 0 1 2 3 1.2.2 jQuery对象.prependTo(DOM对象):jQuery对象前追加到DOM对象 var liEle4 = document.createElement('li'); liEle4.innerText = '4'; $(liEle4).prependTo($('ul')[0]); 浏览器显示: 4 1 2 3 1.3 后置标签,同级 jQuery对象.after(DOM对象):jQuery对象后面放置(DOM对象) jQuery对象.insertAfter(DOM对象):jQuery插入到(DOM对象)的后面 1.4 前置标签,同级 jQuery对象.before(DOM对象):jQuery对象前面放置(DOM对象) jQuery对象.insertBefore(DOM对象):jQuery插入到(DOM对象)的前面 1.5 移除和清空元素 remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。 示例:表格按行删除,remove();添加一行,append() <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表格按行删除</title> </head> <body> <table border="5"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>marry</td> <td>18</td> <td><input type="button" value="删除"></td> </tr> <tr> <td>2</td> <td>tom</td> <td>18</td> <td><input type="button" value="删除"></td> </tr> <tr> <td>3</td> <td>aj</td> <td>18</td> <td><input type="button" value="删除"></td> </tr> </tbody> </table> <input type="button" value="添加一行" id="d1"> <script src="jquery-3.4.1.min.js"></script> <script> //添加一行 $('body').on('click','#d1',function () { var trEle = document.createElement('tr'); $(trEle).html('<td></td><td></td><td></td><td><input type="button" value="删除"></td>'); $('tbody').append(trEle); }); //删除,找到tbody点击里面的input标签触发当前点击的标签this找到tr删除 //tboby里面input有3个,而this是当前点击的DOM对象,也就是当前点击的具体标签
//如果使用.click无法删除新添加的一行,但使用.on('click')就可以,只要需要删除的tr标签在tbody里面就行。
$('tbody').on('click','input',function () { $(this).parent().parent().remove(); }); </script> </body> </html> 1.6 替换 replaceWith() replaceAll() 1.7 克隆 clone(); //克隆标签,但是不克隆标签绑定的事件,也就是说克隆出来的新标签,点击它无法继续克隆新的标签。 clone(true); //克隆标签,并且克隆标签绑定的事件 示例:点击克隆按钮 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>点击复制按钮-clone</title> </head> <body> <button>点我送迈腾</button> <script src="jquery-3.4.1.min.js"></script> <script> //this是当前点击的DOM对象,也是具体的标签 $('button').click(function () { $(this).clone(true).insertAfter(this);//克隆出来的新标签插入到this的后面 }); // $('button').click(function () { // $(this).clone().insertAfter(this); // }); </script> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步