目录
1.2 如果有数值参数,将变为动画,第一个参数为运动速度或时间
2. slideDown(),slideUp(),slideToggle()
3. fadeIn(),fadeOut(),fadeTo(),fadeToggle();
上篇JQuery学习笔记一(JQuery选择器.css样式操作,节点关系)
一. 节点操作
1. append()
在父元素后面添加子节点
语法:
父元素.append(子节点)
$('.box1').append(`<h2>我是二级标题</h2>`);
2. $()可以将一个普通字符串转成一个JQuery对象
let $span = $('<span>123</span>');
// console.log($span);
// 不能这么写 ,下面的写法是选择文档中的p标签了
$('span')
3. 创建节点
$('<p></p>')
$()不仅仅能选择节点也能创建节点
4. appendTo()
将一个jQuery元素添加到另外一个元素中,和append()方法是相反的,被动形式,追加于
$('<p>好的</p>').append($('.box1'))
5. prepend()
在父元素的最前面插入节点
$('.box1').prepend('<h1>h1标题</h1>')
6. prependTo()
prependTo()被动形式插入到父元素节点最前面
$('<p>没问题</p>').prependTo($('.box1'))
7. after()
在选中的元素后面插入一个兄弟元素节点
所有div标签后面插入一个span兄弟元素
$('div').after('<span>白日依山尽</span>')
8. before()
在选中的元素前面插入一个兄弟节点
$('div').before('<span>吃了没</span>')
9. insertBefore()
不同于原生的方法,在兄弟节点前插入新的节点
$('<p>马兰开花二十一</p>').insertBefore($('p')[2])
10. wrap()
给选中的元素外边添加一个包裹元素
$('p:first').wrap('<div class="wrap"></div>');
11. wrapAll()
给所有的元素添加一个包裹元素
$('div').wrapAll('<div class="wrap"></div>');
12. replaceWith()
将选中的元素替换掉,元素节点替换
$('p:first').replaceWith('<div class="wrap">123</div>');
13. empty()
清空元素中的内容
$('.box1').empty()
清空之后大盒子box1依旧存在
14. remove()
删除节点
清空box1中的所有节点(包括box1本身)
$('.box1').remove()
box1本身也被删除掉
15. clone()
节点克隆,参数为布尔值
- 如果不传参数,默认为false,表示不可克隆元素的事件
- 如果传true,表示克隆元素的事件
$('div').clone();
$('div').clone(true);
// true表示要克隆div元素身上的事件
原生JavaScript的克隆,使用cloneNode()
- 如果不传参数,默认为false,表示不克隆元素的后代节点
- 如果参数为true,表示不仅克隆当前的元素节点,还会将所有的后代节点克隆下来
- 元素的克隆方法只会克隆节点,不会克隆事件
二. 事件监听
1. 通过事件名绑定事件
在JQuery里面,所有事件均变成回调函数,事件一律不加on
$('.box1').click(function () {
alert('你好');
})
案例
$('p').mouseenter(function(){
$(this).css('background-color','#9CCC65');
})
// 鼠标离开
$('p').mouseleave(function(){
$(this).css('background-color','#4FC3F7');
})
2. 通过on绑定事件
//给box2绑定点击事件
$('.box2').on('click',() => {
alert('123');
})
3. 通过off取消事件绑定
//取消给box2的点击事件
$('.box2').off('click');
4. 值绑定一次事件one()
//点击div时只会打印一次1
$('div').one('click',()=>{
console.log(1);
})
5. 移入移出事件
$('.box1').hover(function(){
// 鼠标移入触发
console.log(1);
},function(){
// 鼠标移出触发
console.log(2);
})
6. 获取对象事件源
$('.box2').on('click',(ev) => {
alert('123');
//获取当前点击的原生DOM元素
console.log(ev.target)
})
二. animation方法
1.animate方法的基本使用
该方法接收两个参数:
第一个参数：终点JSON
第二个参数： 动画运行的时间，毫秒
第三个参数为动画运行完后的参数
$('p:eq(5)').animate({'margin-left':200,'margin-top':300},2000);
2. 动画运行完的回调函数
第三个参数为动画运行完后的参数
背景颜色是不能在动画里渐变的,只有在回调里完成,如果想让颜色慢慢渐变需要使用css3技术.
$('p:eq(5)').animate({'margin-left':200,'margin-top':300},2000,function() {
// console.log(1);
$(this).css('background-color','#8BC34A');
});
3.动画排队
3.1 同一个元素的不同动画会排队
$('p:first').animate({'width':500},1000,function() {
$(this).css('background-color','pink');
})
$('p:first').animate({'height':300},1000)
jQuery的动画和我们封装的不一样，不是斜着走的，而是先向右运动，结束后在向下移动
因为jQuery默认有一个处理机制，叫做 动画排队
动画排队：
当一个元素接收到了两个animate命令后，后面的animate会排队
所以上面的动画，先竖着跑在横着跑，总动画时长为3000毫秒
如果想同时变化就写在一个animate里面
$('p:first').animate({'width':500,'height':300},1000,function() {
$(this).css('background-color','pink');
})
3.1 不同元素的动画不会存在动画排队
这里的p选择的是多个元素，不排队同时运行动画
$('p').animate({'width':500,'height':60},2000,function() {
$(this).css('background-color','pink');
})
三. 动画的相关方法
1.内置的show(),hide(),toggle()方法
| 方法 | 功能 |
| show() | 显示 |
| hide() | 隐藏 |
| toogle() | 切换 |
基本使用方法:
show([time[,callback]])
参数都是可选的>_<
1.1 没有参数的情况
$('div').show(); // 让div元素显示
$('div').hide(); // 让div元素隐藏,添加display:none
$('div').toggle();// 切换显示状态,自行带有判断,如果显示,则隐藏,如果隐藏则显示
1.2 如果有数值参数,将变为动画,第一个参数为运动速度或时间
速度单词,fast normal, slow ,参数为字符串,通常不建议使用,因为是JQuery内置的,我们不能准确的把握时间
如果传入的为时间,则单位为毫秒数
让元素在显示与影藏之间动画运动1s,还有透明度变换
$('div').show(1000); // 从左上角徐徐展开
$('div').hide(1000); // 徐徐缩小到左上角,运动完成添加display:none
$('div').toggle(1000);// 切换显示状态,自行带有判断,如果显示,则隐藏,如果隐藏则显示
1.3 第二个参数为运动完成后的回调
$('input:eq(0)').click(function(){
$('div').show(1000,function(){
$(this).css('background','red'); // 动画运行完执行的回调函数
});
})
案例:
let is_click = true;
$('.display').on('click',function () {
if(is_click) {
$('.box3').hide(1000);
}else{
$('.box3').show(1000);
}
is_click = !is_click;
})
- 如果不传时间参数
表示瞬间显示或隐藏,不会有过渡效果
- 如果传时间参数
表示显示和隐藏之间会有时间过渡,在过渡的过程中,JQuery会有通过宽高以及透明度等让元素有过渡效果,当结束运动之后变为display:none或display:block;
不但可以传数值,还可以传速度有关的单词
fast normal, slow
2. slideDown(),slideUp(),slideToggle()
滑动,卷帘运动,这个动画改变的就只有元素的高度
使用方式:
slideDown([time[,callback]])
2.1 不传参数的情况
slideDown()方法的动画机理
一个display:none;的元素,瞬间显示,瞬间高度变为0,然后jQuery自己捕捉原有的height作为动画的重点.
最好不要用行内元素做动画
等价于:
$('div').show(); // 瞬间显示
let oldHeight = $('div').css('height'); // 记住原有高度
$('div').css('height':0); // 将高度设置为0
$('div').animate({'height':oldHeight},1000); // 执行高度从0到原有高度的动
$('div').slideDown(); // 下滑展开
$('div').slideUp(); // 上滑收回
$('div').slideToggle();// 滑动切换
2.2 第一个参数为运动速度或时间
速度单词,fast normal, slow ,参数为字符串
如果传入的为时间,则单位为毫秒
$('div').slideDown(1000);
2.3 传入的第二个参数为回调函数
$('div').slideDown(function(){
$(this).css('background','red')
});
2.4 结合上面两种方法自动执行
$('div').show(1000,function(){
$(this).slideUp(1000,function(){
$(this).slideDown(1000,function(){
$(this).hide(1000)
})
})
})
3. fadeIn(),fadeOut(),fadeTo(),fadeToggle();
淡入淡出的一系列方法
如果元素有opacity属性,一定要理解,你所设置的opacity值为,淡入的终点值,如果你设置为0,那么元素将永远淡入不了;
fadeIn()动画机理:
一个display:none的元素,瞬间可见,然后透明度瞬间变为opacity:0,然后自己的opacity开始变换,如果自己没有设置opacity,就变为1
3.1 不传参数淡入或淡出
$('div').fadeIn(); // 淡入
$('div').fadeOut(); // 淡出
$('div').fadeTo(); // 淡入到哪个数字,不传参数没效果,最好是时间和最终的opacity值一样设置.
// 这个比较特殊,如果起点至比较大,就是淡出,起点值小,就是淡入
$('div').fadeToggle(); // 淡入淡出切换
3.2 第一个参数为速度或时间
$('div').fadeIn(1000); // 淡入过程1000完成
$('div').fadeOut(1000); // 淡出
$('div').fadeTo(1000); // 第一参数为过渡时间,第二个但是才是淡入到哪个数字
$('div').fadeToggle(100); // 淡入淡出切换
3.3 第三个参数是回调函数
$('div').fadeIn(1000,function(){
});
fadeTo()方法比较特殊:
如果不传参数没有效果,最好是时间和透明度参数一起传入
第一个参数表示动画的运行时间
第二个参数表示的是透明度变化的终点值
$('div').fadeTo(2000,0.8)
在开发者工具中可以清楚的看见opacity值的变化....
4. stop()
关于动画停止一共有四种,不同的参数情况不同
stop();
stop(true);
stop(true,true);
stop(false,true);
4.1 不传入参数
stop ()停止动画如果没有参数,则表示停止当前的animate动画,但是不清除动画队列,立即执行后面的animate动画
$('div').stop();
4.2 stop(true)
停止当前animate动画,并且清除动画队列,盒子此时留在停止动画时的位置
$('div').stop(true);
4.3 stop(true,true)
停止当前animate动画,盒子瞬间停在当前animate动画的终点位置,并且清除动画队列,
可以理解为瞬间执行完当前动画,并且清除动画队列
$('div').stop(true,true);
4.4 stop(false,true)
瞬间完成当前的animate动画,但是不会清除动画队列,并且执行后面的动画
$('div').stop(false,true);
Emmmmmm......看完这几个方法,你有没有疑惑,这啥都有了,为啥就是没有过stop(true,false)呢???
其实stop(true),就是stop(true,false);后面的false可以省略,现在就明白了吧,stop()就是stop(false,false);
一点点小小的总结 :
stop() 对应 stop(fasle,false);
stop(true) 对应 stop(true,false);
stop(true,true) 对应 stop(true,true);
stop(false,ture) 对应 stop(false,ture) ;
以上的四种方法都会清除当前的动画,stop方法接收两个参数:
第一个参数:是否清除动画队列,true,清除动画队列,false,不清除动画队列
第二个参数:停止当前animate动画,停止后动画的位置,true为瞬间结束动画,动画停止后位置为当前动画的终点,false,停止动画值,元素停留在停止动画的位置
案例
<style>
* {
margin:0;
padding:0;
}
.box {
position: absolute;
left:50px;
top:80px;
width: 100px;
height: 100px;
/*display: none;*/
/*opacity: 0;*/
background-color: #FF5722;
}
button {
width: 200px;
height: 50px;
background-color: #80CBC4;
font-size:18px;
}
</style>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(true,true)</button>
<button>stop(false,true)</button>
<div class="box"></div>
<script>
$('div').animate({'left':700},1000);
$('div').animate({'top':500},1000);
$('div').animate({'left':50},1000);
$('div').animate({'top':80},1000);
$('button:eq(0)').click(function () {
$('.box').stop();
})
$('button:eq(1)').click(function () {
$('.box').stop(true);
})
$('button:eq(2)').click(function () {
$('.box').stop(true,true);
})
$('button:eq(3)').click(function () {
$('.box').stop(false,true);
})
</script>
下面分别展示了正常状态下的效果,stop()的效果,stop(true)的效果及stop(true,true)和stop(false,true)的效果.
一张动图可能不能完全的展示出所有效果,大家可以自己动手尝试一下,和前面的文字想结合还是很好理解的.
4.5 stop()可以防止动画积累
每次点击都会在动画队列里添加一个动画,动画会排队
$('button:eq(0)').click(function(){
$('div').animate({'left':700},1000);
})
$('button:eq(1)').click(function(){
$('div').animate({'left':100},1000);
})
连续触发之后再不触发,动画依旧会运行(之前点击的动画会在动画队列中,会一直运动完所有的已点击动画)
就像定时器,设表先关
用动画先关闭前面的动画
可以连续打点的调用,先清除动画队列,再行新的动画
5. finish()
瞬间完成所有动画
$('button:eq(2)').click(function(){
$('div').finish();
})
6. delay()
延迟,触发动画之后延迟多少时间再执行动画,必须放在运动语句之前
$('div').delay(1000).animate({'left':500},1000);
$('div').delay(1000).slideUp();
注意hide()不加参数,就不是动画,是瞬间完成的,加参数哪怕数字1也是动画
$('div').delay(1000).hide(3000);
7. is(":animted")
判断一个元素是否在运动中,可以防止动画积累
$('div').animate({'width':900},4000);
$('div').click(function(){
alert($(this).is(':animated'))
});