dom 操作
2021/11/11 23:10:31
本文主要是介绍dom 操作,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
内部插入=>子节点 $(".append").click(function(){ //$("ul").append("<li>列表 append</li>") //追加后边 $("<li>列表 append</li>") .appendTo($("ul"));//效果相同 }) $(".prepend").click(function(){ $("ul").prepend("<li>列表 prepend</li>")//在所有子元素的前面 }) 外部插入=>兄弟节点 $(".before").click(function(){ $("ul").before("<li>列表 before</li>");//上面 }) $(".after").click(function(){ $("ul").after("<li>列表 after</li>");//下面 }) 包裹=>父节点 $(".wrap").click(function(){ $("ul").wrap("<div style='color:red'></div>");//包裹 }) //修改 $(".replaceWith").click(function(){ $("li:first").replaceWith("<li>列表 new</li>") }) //删除 $(".empty").click(function(){ $("li:first").empty()//清空子元素内容 }) $(".remove").click(function(){ $("li:first").remove()//删除子元素 }) $(".clone").click(function(){ $("li:first").clone().appendTo($("ul"))/克隆 }) // click单击 // dblclick 双击 中间空格隔开 $("ul").on("click dblclick","li",function(){ console.log($(this).text()); }) 所有都是点击事件用button按钮 ul li 显示列表内容一到五这篇关于dom 操作的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-24Java中定时任务实现方式及源码剖析
- 2024-11-24Java中定时任务实现方式及源码剖析
- 2024-11-24鸿蒙原生开发手记:03-元服务开发全流程(开发元服务,只需要看这一篇文章)
- 2024-11-24细说敏捷:敏捷四会之每日站会
- 2024-11-23Springboot应用的多环境打包入门
- 2024-11-23Springboot应用的生产发布入门教程
- 2024-11-23Python编程入门指南
- 2024-11-23Java创业入门:从零开始的编程之旅
- 2024-11-23Java创业入门:新手必读的Java编程与创业指南
- 2024-11-23Java对接阿里云智能语音服务入门详解