添加节点

内部插入

外部插入

删除节点

remove([expr])

empty()

detach([expr])

替换节点

replaceWith(content|fn)

replaceAll(selector)

复制节点

clone([Even[,deepEven]])

浅复制

深复制

浅复制和深复制的区别

添加节点


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<button>添加节点</button>
<ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li>
</ul>
<div>我是div</div>
</body>
</html>

内部插入

append(content|fn)
appendTo(content)
会将元素添加到指定元素内部的最后

$("button").click(function () {var $li = $("<li>新增的li</li>");$("ul").append($li);//$li.appendTo("ul");
});

prepend(content|fn)
prependTo(content)
会将元素添加到指定元素内部的最前面

$("button").click(function () {var $li = $("<li>新增的li</li>");$("ul").prepend($li);$li.prependTo("ul");
});

外部插入

after(content|fn)
会将元素添加到指定元素外部的后面

$("button").click(function () {var $li = $("<li>新增的li</li>");$("ul").after($li);
});

before(content|fn)
会将元素添加到指定元素外部的前面

$("button").click(function () {var $li = $("<li>新增的li</li>");$("ul").before($li);});

insertAfter(content)
insertBefore(content)

$li.insertAfter("ul");
$li.insertBefore("ul");

运行结果与上面的 after() before() 方法一致不做展示

删除节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<button>删除节点</button>
<ul><li class="item">我是第1个li</li><li>我是第2个li</li><li class="item">我是第3个li</li><li>我是第4个li</li><li class="item">我是第5个li</li>
</ul>
<div>我是div<p>我是段落</p>
</div>
</body>
</html>

remove([expr])

删除

$("button").click(function () {$("div").remove();
});

$("button").click(function () {$("li").remove(".item");
});

empty()

删除指定元素

$("button").click(function () {$("p").empty();
});

detach([expr])

删除指定元素的内容和子元素, 指定元素自身不会被删除

$("button").click(function () {
var $div = $("div").remove();console.log($div);$("body").append($div);
});
$("div").click(function () {alert("div被点击了");
});

利用remove删除之后再重新添加,原有的事件无法响应

利用detach删除之后再重新添加,原有事件可以响应

$("button").click(function () {var $div = $("div").detach();console.log($div);$("body").append($div);
});
$("div").click(function () {alert("div被点击了");
});

替换节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="../jQuery基础/js/jquery-1.12.4.js"></script>
</head>
<body>
<button>替换节点</button>
<h1>我是标题1</h1>
<h1>我是标题1</h1>
<p>我是段落</p>
</body>
</html>

replaceWith(content|fn)

替换

$("button").click(function () {var $h6 = $("<h6>我是标题6</h6>");$("h1").replaceWith($h6);
});

replaceAll(selector)

替换所有匹配的元素为指定的元素

$("button").click(function () {var $h6 = $("<h6>我是标题6</h6>");$h6.replaceAll("h1");
});

复制节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<button>浅复制节点</button>
<button>深复制节点</button>
<ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li><li>我是第4个li</li><li>我是第5个li</li>
</ul>
</body>
</html>

clone([Even[,deepEven]])

如果传入false就是浅复制, 如果传入true就是深复制
浅复制只会复制元素, 不会复制元素的事件
深复制会复制元素, 而且还会复制元素的事件

浅复制

$("button").eq(0).click(function () {// 1.浅复制一个元素var $li = $("li:first").clone(false);// 2.将复制的元素添加到ul中$("ul").append($li);
});$("li").click(function () {alert($(this).html());
});

、

深复制

$("button").eq(1).click(function () {// 1.深复制一个元素var $li = $("li:first").clone(true);// 2.将复制的元素添加到ul中$("ul").append($li);
});$("li").click(function () {alert($(this).html());
});

浅复制和深复制的区别

对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会改变，而深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

详细可看文章：JavaScript中浅拷贝和深拷贝的区别和实现

Mr.J-- jQuery学习笔记(二十)--节点操作方法相关推荐

Mr.J-- jQuery学习笔记(二十八)--DOM操作方法(添加方法总结)
Table of Contents appendTo appendTo(source, target) 源代码 append prependTo prependTo源码 prepend ...
Mr.J-- jQuery学习笔记(二十七)--DOM操作方法(删除获取文本)
清除 <body> <button>调用remove</button> <div>我是div<p>我是段落</p> </d ...
嵌入式系统设计师学习笔记二十八：嵌入式程序设计③——高级程序设计语言
嵌入式系统设计师学习笔记二十八:嵌入式程序设计③--高级程序设计语言解释程序和编译程序编译器的工作阶段示意图语法错误:非法字符,关键字或标识符拼写错误语法错误:语法结构出错,if--endif ...
uniapp 学习笔记二十二购物车页面结构搭建
uniapp 学习笔记二十二购物车页面结构搭建 cart.vue <template><view><view class="flex padding" ...
Polyworks脚本开发学习笔记(二十)-补充几个常见操作指令的使用
Polyworks脚本开发学习笔记(二十)-补充几个常见操作指令的使用大概要写到结尾了,最后几篇就将手册的各常用命令再看一遍,组合一下,并列举出常见的一些有用的操作. DATA_COLOR_MAP数 ...
JVM 学习笔记二十六、JVM监控及诊断工具-GUI篇
二十六.JVM监控及诊断工具-GUI篇 1.工具概述使用上一张命令行工具或组合能帮您获取目标Java应用性能相关的基础信息,但他们存在下列局限: (1)无法获取方法级别的分析数据,如方法间的调用关系 ...
JVM 学习笔记二十五、JVM监控及诊断工具-命令行篇
二十五.JVM监控及诊断工具-命令行篇 1.概述性能诊断是软件工程师在日常工作中经常面对和解决的问题,在用户体验至上的今天,解决好应用软件的性能问题能带来非常大的收益. Java作为最流行的编程语言 ...
立创eda学习笔记二十八：在嘉立创购买pcb板并贴片（smt）
完整的写一下,分为两部分: 1.下pcb订单这个可以看之前写的一个博客: 立创eda学习笔记三:pcb购买_Gutie_bartholomew的博客-CSDN博客补充一下,买pcb可以直接有几个途 ...
Mr.J-- jQuery学习笔记(二十四)--剖析jQuery源码--extend
定义和用法 jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象. 注意:1. 如果只为$.extend()指定了一个参数,则意味着参数target被省略.此时,target就 ...

Mr.J-- jQuery学习笔记(二十)--节点操作方法

Table of Contents

添加节点

内部插入

外部插入

删除节点

remove([expr])

empty()

detach([expr])

替换节点

replaceWith(content|fn)

replaceAll(selector)

复制节点

clone([Even[,deepEven]])

浅复制

深复制

浅复制和深复制的区别

Mr.J-- jQuery学习笔记(二十)--节点操作方法相关推荐

最新文章

热门文章