前端-jQuery-操作标签-文档操作
2023-09-14 08:59:02 时间
jQuery文档操作
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文档操作示例</title> </head> <body> <ul id="u1"> <li id="l1">1</li> <li>2</li> <li>3</li> </ul> <script src="jquery-3.2.1.min.js"></script> <script> //添加标签到指定标签的后面 //使用原生的dom var liEle = document.createElement("li");//创建 liEle.innerText = 0;//设置值 $("#u1").append("liEle");//在最末尾添加 $(liEle).appendTo("#u1");//这是另外一种写法,效果和上面一样 $("#u1").prepend("liEle");//在最前面添加 $(liEle).prependTo("#u1");//这是另外一种写法,效果和上面一样 /* 添加到指定元素外部的后面 $(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面 添加到指定元素外部的前面 $(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面 * */ // $("#u1").remove();// 直接把ul标签,和内部的子标签都删除了, // $("#u1").empty();// 清空内部的子节点 </script> </body> </html>
############### jQuery文档操作-添加一行记录 ################
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>点击在表格最后添加一条记录</title> </head> <body> <table border="1" id="t1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> <tbody> </thead> <tr> <td>1</td> <td>小强</td> <td>吃冰激凌</td> <td> <button class="delete">删除</button> </td> </tr> <tr> <td>2</td> <td>二哥</td> <td>Girl</td> <td> <button class="delete">删除</button> </td> </tr> </tbody> </table> <button id="b1">添加一行数据</button> <script src="jquery-3.2.1.min.js"></script> <script> // 绑定事件 $("#b1").click(function () { // 生成要添加的tr标签及数据 var trEle = document.createElement("tr"); $(trEle).html("<td>3</td>" + "<td>小东北</td>" + "<td>社会摇</td>" + "<td><button class='delete'>删除</button></td>"); // 把生成的tr插入到表格中 $("#t1").find("tbody").append(trEle); }); // 每一行的=删除按钮绑定事件 $(".delete").click(function () { $(this).parent().parent().remove(); }); </script> </body> </html>
############### jQuery-文档操作-替换操作 ################
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>替换操作示例</title> </head> <body> <p><a href="http://www.sogo.com">aaa</a></p> <p><a href="">bbb</a></p> <p><a href="">ccc</a></p> <button id="b1">点我!</button> <script src="jquery-3.2.1.min.js"></script> <script> $("#b1").click(function () { // 创建一个img标签 var imgEle = document.createElement("img"); $(imgEle).attr("src", "http://img4.imgtn.bdimg.com/it/u=1316130882,2083273552&fm=26&gp=0.jpg"); $("a").replaceWith(imgEle); // $(imgEle).replaceAll("a"); }); </script> </body> </html>
############### jQuery文档操作-克隆操作 ################
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>克隆示例</title> </head> <body> <button id="b1">屠龙宝刀,点我就送!</button> <script src="jquery-3.2.1.min.js"></script> <script> $("#b1").click(function () { $(this).clone().insertAfter(this); }); </script> </body> </html>
###
###
相关文章
- jQuery实现返回顶部功能[通俗易懂]
- 如何锁定表头和表行同时锁定_jquery表头固定列
- jQuery中的筛选&文档处理——案例
- jquery选择器用法_jQuery属性选择器
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- WordPress 技巧:让 WordPress 真正支持 jQuery Lazyload
- jQuery图片切换插件jquery.cycle.js详解编程语言
- jQuery的ajax巧妙利用详解编程语言
- jQuery prev() prevAll()和prevUntil()方法
- jQuery的一些注意
- 优秀js开源框架-jQuery使用手册(1)
- Jquery实战_读书笔记1—选择jQuery
- jQuery温习篇强大的JQuery选择器
- jQuery学习基础知识小结
- jQuery源码中的chunker正则过滤符分析
- jQuery学习笔记操作jQuery对象文档处理
- jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
- 基于jQuery实现图片的前进与后退功能
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- jquery滚动条事件简单实例
- jquery的相对父元素和相对文档定位示例代码
- jQuery获取当前对象标签名称的方法
- jquery获取对象的方法足以应付常见的各种类型的对象
- jQuery窗口、文档、网页各种高度的精确理解
- jquery文档操作wrap()方法实例简述