jQuery（2续）

3.1三组基本动画
显示show与隐藏hide
滑入slideDown与滑出slideUp和切换slideToggle
淡入fadeIn与淡出fadeOut与切换fadeToggle

show()不传参数没有动画效果（一般都不传参数，因为动画不好看）

show(speed)
speed：动画的持续时间，可以是毫秒值，还可以是固定字符串
"fast":200ms "normal":400ms "slow":600ms
show("hehe") -->默认是normal400ms

show还可以是回调函数
show([speed] , [callback])
例1：动画结束显示haha
$("div").show(1000,function(){
console.log("haha");
});

hide：
例1：
$("input").eq(1).click(function(){
$("div").hide();
})

做轮播图

3.2自定义动画

animate({} , , );参数只有第一个必填
/*第一个参数：对象里面可以传需要对象的样式*/
/*第二个参数：speed 动画的执行时间*/
/*第三个参数：动画的效果*/
/*第四个参数：回调函数*/
例1：默认是swing摇摆的
$("#box1").animate({left:800} , 1000);
/*swing :秋千摇摆*/
$("#box2").animate({left:800} , 1000 , "swing");
/*linear :线性，匀速*/
$("#box3").animate({left:800} , 1000 , "linear");

做手风琴案例

3.3动画队列与停止动画
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放入到动画队列中，等前面的动画执行完之后才会执行（联想：火车进站）
动画队列：
/*将这些动画存储到一个动画队列里面
好处：动画不会丢掉，肯定会执行
坏处：需要时间*/

停止动画：
stop：停止当前正在执行的动画
加stop的目的，就是停止前面执行的动画，然后立马执行stop后面的动画
两个参数
clearQueue：是否清除动画队列 true false
jumpToEnd：是否跳转到当前动画的最终效果 true false

例1：
$(this).stop().animate({width:800}).siblings().stop().animate({width:100});

做出手风琴案例的优化

例2：
$("input").eq(0).click(function(){
$("div").slideDown(4000).slideUp(4000);
})

$("input").eq(1).click(function(){
$("div").stop(true , false);
})

<audio src="" controls="controls"></audio>

做出音乐键导航栏

4.jQuery节点操作

4.1创建节点：
创建jquery对象：
append可以传进去一个jquery对象

例1：
var $li = $('<a href="#">小仙女</a>');
$("#box").append($li);

例2：两步：内部生成jquery对象,再插入div中
$("#box").append('<a href="#">小仙女</a>');

4.2添加节点

append：添加子元素最后面
prepend：添加到子元素最前面
appendTo：子元素添加到父元素最后面，和append实现效果差不多
prependTo：子元素添加到父元素最前面，和prepend实现效果差不多
after：添加在后面作为兄弟元素
before：添加在前面作为兄弟元素

例1：将p元素添加到div子元素最后面
<div id="box">内容</div>
<p>P元素</p>
$(function(){
$("div").append($("p"));
})
例2：将p元素添加到div子元素最前面
<div id="box">内容</div>
<p>P元素</p>
$(function(){
$("div").prepend($("p"));
})
例3：将p元素添加到div子元素最后面
<div id="box">内容</div>
<p>P元素</p>
$(function(){
$("p").appendTo($("div"));
})
例4：将p元素添加到div子元素最前面
<div id="box">内容</div>
<p>P元素</p>
$(function(){
$("p").prependTo($("div"));
})
例5：将p元素添加到div元素后面作为兄弟元素
<div id="box">内容</div>
<p>P元素</p>
$(function(){
$("div").after($("p"));
})
例6：将p元素添加到div元素前面作为兄弟元素
<div id="box">内容</div>
<p>P元素</p>
$(function(){
$("div").before($("p"));
})

做出城市选择案例

4.3清空节点与删除节点

清空节点（清理门户）：
$("div").empty();会将绑定的事件也清空
一般不会用$("div").html("");因为会发生内存泄露，因为要是div中有元素绑定了事件，那么不会清空那个事件，会占用内存

删除节点：
自杀：$("div").remove();

4.4克隆节点：clone()
false:不传参数也是深度复制,不会复制事件
true:也是深度复制,会复制事件
不传参数默认是false
例1：
<div>
<p>1111</p>
<p>2222</p>
</div>
<p class="des">我是外面的p元素 </p>
$(function(){
/*$("div").html("");*/
/*false:不传参数也是深度复制,不会复制事件*/
/*true:也是深度复制,会复制事件*/
$(".des").click(function(){
alert("hehe");
})
$(".des").clone(true).appendTo("div");
})
ture：克隆的也就是div中的p，点击也会有事件
false：克隆的也就是div中的p，点击不会有事件
默认：克隆的p，点击不会有事件

努力努力再努力LFY

发布了53 篇原创文章 · 获赞 12 · 访问量 9916

私信关注

猜你喜欢