我们学完了基本动画就来看看自定义动画吧,怎样自定义呢?我们可以使用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=">>" id="move-right">
<input type="button" value="<<" id="move-left">
<input type="button" value=">" id="select-right">
<input type="button" value="<" 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基础才行,那么这期就到这,快去试试吧!