jQuery中的DOM操作与实战(相册管理实例，实现增加、删除、移动）--2019年5月21日

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>