jQuery:＜3＞动画序列和添加节点、删除节点

我们学完了基本动画就来看看自定义动画吧，怎样自定义呢？我们可以使用animate()方法，该方法含有四个参数，第一个参数是一个对象，我们可以编写要添加动画的属性变化值，第二个参数是动画时长，第三个是设置为缓动还是匀速，第四个就是回调函数了：

//1.2 为box1制作动画
            $('.box').animate({
                width:200,
                left:400,
                'background-color':'yellow',
                opacity:0.5
            },2000,'swing',function(){
                //1.3 继续延续动画
                $('.box').animate({
                    width:100,
                    height:200,
                    'background-color':'blue',
                    opacity:1,
                    top:200
                },2000,function(){
                    alert('动画执行完毕')
                })

看这段代码，我制作了两个动画，就是在回调函数里面有制作了一个动画，当然你们可以一直制作下去；这里设置背景色这一项是无效的大家记住，我设置的时长是2s，模式为swing也就是缓动，还有一种是匀速linear，回调函数里面又是一个动画，最后在附上动画执行完毕的提示；

至于第一个参数里面的样式键值对，你们想怎么设置都行，我这里就简陋的设置了一下宽度和左边上边的距离，因为如果你想要盒子移动的话是不是可以添加一个定位，绝对定位大家都会加吧；

1、关于动画有一个毛病，当你设置好一个动画之后，疯狂的点击它，然后它可能一致在运作这个动画，点了多少遍就执行多少遍，想听都停不了，这样是不是降低了体验感？

这种现象叫做动画序列，也就是动画排队执行的结果，那么有时候我们不想要怎么办呢？

简单，直接在动画前添加一个方法stop(true,false),这就是用来结束动画的方法。第一个为动画序列是否结束，第二个是是否达到最终效果；

        //3.1 清除box2的动画序列
        $('#btn2').click(function(){
            $('.box2').stop(true,false).slideDown(2000).slideUp(2000)
        });

 可以看到，我多次点击这个动画，第一次点击的时候正常运行，第二次点击的时候会卡一下，如果一直点击就会一直卡在那，这就是删除了序列的现象，这样就能保证每次都只有一个动画执行，就不会出现动画一直执行的现象；如果你对stop（）方法的两个参数还感兴趣的话就可以自己去试一试，不同的true false组合出来的效果是不一样的；

2、现在来讲一讲如何添加一个节点，也就是添加标签，在原生js中，我们是怎么添加节点的？

可以使用ducument.write() 也可以使用：innerHtml(),还可以用：ducument.createElement();

单词都挺长的，但是在jQuery中就很简洁：

创建节点：a.html（）、$();  前者是写一段标签内容，然后覆盖a标签内容，后者是创建一个节点，要和追加节点的方法一起使用：

五种添加节点的方式：

父元素点出来，元素作为最后一个子元素添加：append（）、

子元素点出来，元素作为最后一个子元素添加：appendTo()、

父元素点出来，元素作为第一个子元素添加：prepend()； 这三种用在父子元素之间

兄弟元素点出来，元素放在前面：before()、

兄弟元素点出来，元素放在后面：after(); 这两种用在兄弟元素之间

要注意一点，前者添加元素的时候最好一起添加，不然的话会覆盖原有的内容，后者则不用，所以我们在添加表格内容的时候后者的优越性就很好的体现出来：

  //html
           /*  var list = [];
            for(var i = 0;i<data.length;i++){
                //因为是html设置内容，所以需要我们将所有内容拼接好在加入
                list.push('<tr>')
                for (const key in data[i]) {
                    list.push('<td>')
                    //因为key是遍历对象的三个属性名，所以我们可以使用一下方法填数据
                    list.push(data[i][key])  
                    list.push('</td>')
                }
                list.push('</tr>')
            }

            $('.databody').html(list.join('')) */
            //$()
            for (var i = 0;i<data.length;i++) {
                $('.databody').append('<tr><td>'+data[i]['name']+'</td><td>'+data[i]['link']+'</td><td>'+data[i]['introduce']+'</td></tr>')
            }

被注释的部分是html（）方法添加的，使用了一个数列，还用了一个数列转字符串的方法join（）；两层for循环嵌套加上数列，明显要比后面一层循环麻烦得多，但效果都差不多：

 可以看到当我们点击按钮的时候会出现三条记录，其实也有一点点缺点，就是如果一直点击的话就会一直填加，不过算法不错的可以试试如何做到去重操作；

3、再来讲讲这几种追加节点的方式，其实上面说的比较清楚了，只需要分清楚一个点就可以了，

before()、after(); 这两种用在兄弟元素之间，prepend()，append(),appendTo() 这三种用在父子元素之间:

//5.1 城市选择器，先做全选控件
        $('#move-right').click(function(){
            $('.left-city>option').appendTo('.right-city')
        });
        $('#move-left').click(function(){
            $('.right-city>option').appendTo('.left-city')
        });
        //5.2 制作选中之后的响应函数
        $('#select-right').click(function(){
            $('.left-city>option:selected').appendTo('.right-city')
        });
        $('#select-left').click(function(){
            $('.right-city>option:selected').appendTo('.left-city')
        });

这里之制作了一个城市选择器的小案例，用到的就只有一些追加的操作，如果我们追加的元素已经存在的话，追加就会变成加剪切。

下面是布局：

<h1>城市选择：</h1>
    <div class="city">
        <select class="left-city" multiple>
            <option>上海</option>
            <option>广州</option>
            <option>杭州</option>
            <option>浙江</option>
            <option>北京</option>
        </select>
        <div class="box4">
            <input type="button" value="&gt&gt" id="move-right">
            <input type="button" value="&lt&lt" id="move-left">
            <input type="button" value="&gt" id="select-right">
            <input type="button" value="&lt" id="select-left">
        </div>
        <select class="right-city" multiple></select>
    </div>

下面是css：

.city select{
            height:200px;
            width:100px;
            background-color: aqua;
        }
        .box4{
            width:50px;
            height:100px;
            vertical-align: top;
            display: inline-block;
        }
        .box4 input{
            width:50px;
        }

当然，样式的话随你们设计，好看就行；

不过，我们平时使用的下拉菜单可不是这个样子，试着加上 multiple属性试试；

4、我们知道的追加节点也应该知道删除节点吧，不然的话只有加没有删就让人头皮发麻，好了，我们删除节点也简单：

清除节点的方式

1.html("") 意思就是将内容设置为空，不推荐使用，因为会导致内存泄露，比如响应事件没有事件源

2.empty() 清空父元素的内容，这个就不会造成内存泄漏，因为在删除内容的同时还会删除对应的事件源

3.remove() 自杀式移除，这个是移除自身的的操作，与empty()最大的不同就是empty()不是移除自身

同样，我们也通过一个小程序来看看empty（）和remove（）的使用和区别：

//6.1 对表格进行删除操作
        $('.box5>#btn4').click(function(){
            //6.2 对表格内容进行清空
            $('.box5 .tb_body').empty();
        });
        //6.2 对每一行数据进行删除，a标签点击事件
        $('.box5 .get').click(function(){
            //6.3 删除父元素的父元素
            $(this).parent().parent().remove();
        });

逻辑：我们点击按钮清空内容，点击表格后面的超链接删除单条数据：

html部分：

<div class="box5">
        <input type="button" value="清空内容" id="btn4">
        <table >
            <tr class="title">
                <td>标题</td>
                <td>简介</td>
                <td>操作</td>
            </tr>
            <tbody class="tb_body">
                <tr>
                    <td>黑猫警长</td>
                    <td>国漫</td>
                    <td><a href="#" class="get">delete</a></td>
                </tr>
                <tr>
                    <td>海贼王</td>
                    <td>日漫</td>
                    <td><a href="#" class="get">delete</a></td>
                </tr>
                <tr>
                    <td>电击小子</td>
                    <td>国漫</td>
                    <td><a href="#" class="get">delete</a></td>
                </tr>
                <tr>
                    <td>流浪地球</td>
                    <td>国产电影</td>
                    <td><a href="#" class="get">delete</a></td>
                </tr>
            </tbody>
        </table>
    </div>

css:

.box5{
            width:200px;
            background-color: pink;
        }
        .box5 .get{
            text-decoration: none;
        }

现象：

 好了，在学习jQuery的过程当中会大量用到html和css的内容，可以看到我们的jQuery语句就那么几条，但是html和css代码就一大堆，所以我们必须要有一点html和css基础才行，那么这期就到这，快去试试吧！