04 Dom操作.html

2024-01-14 12:19:22

内部插入 => 字节点: append：

prepend：

append和prepend代码：

$(function(){ // 内部插入 => 字节点 $(".append").click(function(){ // 后面追加 $("ul").append("<li>列表 append</li>"); // $("<li>列表 append</li>").appendTo($("ul"));另一种方式 }) $(".prepend").click(function(){ // 前面追加 $("ul").prepend("<li>列表 prepend</li>"); }) 外部插入 => 兄弟节点： before： after：

before和after代码：

//外部插入 => 兄弟节点 $(".before").click(function(){ //上面 $("ul").before("<li>列表 before</li>"); }) $(".after").click(function(){ // 下面 $("ul").after("<li>列表 after</li>"); }) 包裹 => 父节点： wrap概述：

把所有匹配的元素用其他元素的结构化标记包裹起来。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。

这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包裹元素。

当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加。

wrap代码：

$(".wrap").click(function(){ $("ul").wrap("<div style='color:red'></div>"); }) 替换： replaceWidth：

replaceWidth代码：

$(".replaceWidth").click(function(){ $("li:first").replaceWidth("<li>列表 new</li>"); }) 删除、清空： empty清空内容：

remove删除标签以及内容： 概述： 从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。

但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

empty和remove代码：

$(".empty").click(function(){

$("li:first").empty();//清空内容 })
$(".remove").click(function(){ $("li:first").remove();//删除标签以及内容 }) 复制第一个标签： clone： clone代码： $(".clone").click(function(){ $("li:first").clone().appendTo($("ul")); })
// $("li").click(function(){ // console.log($(this).text()) // })
// $("ul").on("click",function(){ // console.log($(this).text()) // }) // $("ul").on("click","li",function(){ // console.log($(this).text()) // }) $("ul").on("click dblclidk","li",function(){ console.log($(this).text()) }) body部分： <body> <button class="append">append</button> <button class="prepend">prepend</button> <br> <button class="before">before</button> <button class="after">after</button> <br> <button class="wrap">wrap</button> <br> <button class="replaceWidth">replaceWidth</button> <br> <button class="empty">empty</button> <button class="remove">remove</button> <br> <button class="clone">clone</button> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> </ul> </body> 筛选： first():

last():