jQuery作为js的一种类库，不仅继承了DOM的一些操作，更加发扬了DOM操作，使其对DOM操作更加的灵活。
1. 查找节点
主要是通过jQuery选择器来完成。
2. 创建节点
很多时候，我们不仅仅是要查找节点，还需要创建节点，创建元素节点并不只是单单创建元素节点，还需要将其挂到DOM树上。例如我们创建一个<li>节点然后将其挂在<ul>上，具体代码如下：
var li_new=$("<li></li>"); //创建一个<li>元素
$("ul").append(li_new); //将其添加到<ul>下2.1 创建文本节点
刚才只是创建了一个节点，并没有向该节点中添加任何文本内容，如果我们要创建文本节点，只需要向刚才的元素节点中添加文本内容就行。具体代码如下：
var li_new=$("<li>乒乓球</li>"); //创建一个文本节点，文本内容为乒乓球
$("ul")。append(li_new); //将其挂在<ul>上2.2 创建属性节点
与创建文本节点相似，也是在创建元素节点时候一起创建。如下行代码。
var li_new1=$("<li title="羽毛球">羽毛球</li>"); //创建属性节点
$("ul").append(li_new1); //将该属性节点挂在<ul>上title属性在随着<li>节点创建的时候也一起创建了。
3. 插入节点
从上面的例子可以看出一种插入节点的方法是通过jQuery中的append()方法，下面将插入节点的各种方法进行总结。
* append()： 向每个匹配元素内部追加节点或是内容
HTML代码：<p>你好吗?</p>
jQuery代码：$("p").append(“<b>还不错哦.</b>”);
结果：<p>你好吗？<b>还不错哦.</b></p>
* appendTo()： $(A).append(B):是将B追加到A上,$(A).appendTo(B):是将A追加到B上
HTML代码：<p>你好吗?</p>
jQuery代码：$("<b>还不错哦.</b>").appendTo(“p”);
结果：<p>你好吗？<b>还不错哦.</b></p>
* prepend()： 向每个匹配的元素内部追加内容
HTML代码：<p>你好吗?</p>
jQuery代码：$("p").prepend(“<b>还不错哦.</b>”);
结果：<p><b>还不错哦.</b>你好吗？</p>
* prependTo()： $(A).prepend(B):是将B追加到A上，$(A).prependTo(B):是将A追加到B上
HTML代码：<p>你好吗?</p>
jQuery代码：$("<b>还不错哦.</b>").aprependTo(“p”);
结果：<p><b>还不错哦.</b>你好吗？</p>
* after()： 在每个匹配的元素之后添加内容
HTML代码：<p>你好吗?</p>
jQuery代码：$("p").after(“<b>还不错哦.</b>”);
结果：<p>你好吗？</p><b>还不错哦.</b>
* insertAfter()： $(A).after(B):将B插入到A后，$(A).insertAfter(B):将A插入到B后
HTML代码：<p>你好吗?</p>
jQuery代码：$(“<b>还不错哦.</b>”).insertAfter(“p”);
结果：<p>你好吗？</p><b>还不错哦.</b>
* before()： 在每个匹配元素之前插入内容
HTML代码：<p>你好吗?</p>
jQuery代码：$(“p”).before(“<b>还不错哦.</b>”);
结果：<b>还不错哦.</b><p>你好吗？</p>
* insertBefore()： $(A).before(B):将B插入到A前，$(A).insertBefore(B):A插入到B前
HTML代码：<p>你好吗?</p>
jQuery代码：$(“<b>还不错哦.</b>”).insertBefore(“p”);
结果：<b>还不错哦.</b><p>你好吗？</p>
4. 删除节点
jQuery中提供了删除节点的方法。分别是remove())、empty()。
4.1 remove()方法
$("ul li:eq(0)").remove(); //获取ul下的第一个<li>节点后，删除该节点remove()可以带参数，例如一下这行代码
$("ul li").remove(“li[title=篮球]”); //在<ul>下，删除属性title为篮球的li的节点4.2 empty()方法
准确的说，empty()方法并不是删除节点，而是清空节点，清空元素中的所有后代节点。最后只剩一个空节点（该元素的属性依然存在）。
$("ul li:nth-of-type(2)").empty(); //清空该节点5. 替换节点
两个方法: replaceWith()与replaceAll()
$(A).replaceWith(B)：用B替换A $(A).replaceAll(B)：用A替换B
6. 属性操作
6.1 获取属性和设置属性,通过attr()方法。
6.2 删除属性,通过removeAttr();如下例代码。
$("p").removeAttr("title"); //删除<p>的title属性7. 遍历节点
next()方法: 获得匹配元素后面紧邻的同辈元素。
prev()方法: 获得匹配元素前面紧邻的同辈元素。
实战案例：动态相册管理器
利用jQuery的DOM操作实现的相册管理器，实现添加、删除相片，相片位置移动等功能。
<script type="text/javascript" src="../static/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function() {
$("button.add").on("click",function() {
let f_imgUrl = $("#imgUrl").val();
if (f_imgUrl.length === 0) {
alert ("请选择要添加的图片~~");
$("#imgUrl").focus();
console.log(!(f_imgUrl.length === 0));
return !(f_imgUrl.length === 0);
}
let f_borderType = $("input[type='radio']:checked").val();
let f_shadow = "none";
if ($(":selected").val() === "1") {
f_shadow = "2px 2px 2px #888";
}
let f_realImgUrl = f_imgUrl.split("\\")[f_imgUrl.split("\\").length-1];
f_imgUrl = "http://html.io/0521/images/"+f_realImgUrl;
let f_img = $("<img>");
f_img.attr({src:f_imgUrl, width:150, height:150, alt:"明星相册"});
f_img.css({"border-radius":f_borderType, "box-shadow":f_shadow});
let imgContaier = $("<li></li>");
let btnForward = $("<button></button>").text("前移");
let btnBackward = $("<button></button>").text("后移");
let btnRemove = $("<button></button>").text("删除");
imgContaier.append(f_img, btnForward, btnBackward, btnRemove);
imgContaier.appendTo("ul");
btnForward.on("click",function(){
let currentImg = $(this).parent();
let prevImg = currentImg.prev();
prevImg.before(currentImg);
});
btnBackward.on("click", function(){
let currentImg = $(this).parent();
let nextImg = currentImg.next(); // 后一个元素
nextImg.after(currentImg);// 在后一个元素之后将当前元素插入
});
btnRemove.on("click",function(){
if (confirm("确认删除?")){
let currentImg = $(this).parent();
currentImg.remove();
}
});
});
});
</script>