2. 事件补充
2.1 事件取消
-
添加
-
$(selector).事件名()
-
$(selector).on(事件类型,事件处理函数)
-
-
取消
-
$().off()
//3.取消事件 $().off(); $("div").off(); //取消这个标签上的所有事件 $("div").off("click"); //取消这个标签上的对应类型的事件 $("div").off("click",fun2); //取消其中一个点击事件
-
2.2 一次性事件
-
语法:$().one(事件类型,事件处理函数)
-
作用:事件触发一次会自动销毁
//1.一次性事件,发生一次以后会自动取消这个事件 var arr = ["5块钱","再来一箱","一箱玉米","200块","10000块"]; $("button").one("click",function(){ console.log(arr[Math.floor(Math.random()*arr.length)]); })
2.3 组合事件
-
语法:$(selector).hover(overFun,outerFun)
$("div").hover(function(){ //鼠标移入时触发 $("div").css("background","teal"); },function(){ //鼠标移出时触发 $("div").css("background","red"); })
3.预置动画
3.1 显示隐藏
-
显示隐藏 方法 (宽高透明度) : show():显示 hide():隐藏 toggle():开关
-
语法:$(selector).show(speed,easing,callback)
-
参数:
-
speed:动画过渡的所需的时间 , 可能的值:num(ms), 关键字:"fast":200, "normal":400 , "slow":600
-
easing:运动方式 可能的值:linear:匀速 swing:慢-快-慢
-
callback:回调函数
//1.点击显示 $(".show").click(function(){ $("div:eq(0)").show(500,"linear"); // $("div:eq(1)").show(500,"swing",function(){ // alert("回调执行"); // }); }) //2.点击隐藏 $(".hide").click(function(){ $("div").hide(1000); }) //3.开关 $(".toggle").click(function(){ $("div").toggle(400); })
-
3.2 滑入滑出
-
滑入滑出方法 (高): slideUp():滑出 slideDown():滑入 slideToggle():开关
-
语法:$(selector).slideDown(speed,easing,callback)
-
参数:
-
speed:动画过渡的所需的时间 , 可能的值:num(ms), 关键字:"fast":200, "normal":400 , "slow":600
-
easing:运动方式 可能的值:linear:匀速 swing:慢-快-慢
-
callback:回调函数
//1.点击滑入 $(".slideDown").click(function(){ $("div").slideDown(1000); }) //2.点击滑出 $(".slideUp").click(function(){ $("div").slideUp(1000); }) //3.开关 $(".slideToggle").click(function(){ $("div").slideToggle(1000); })
-
3.3 淡入淡出
-
淡入淡出 方法 (透明度) : fadeIn():淡入 fadeOut():淡出 fadeToggle():开关 fadeTo():透明度
-
语法:$(selector).slideDown(speed,easing,callback)
-
参数:
-
speed:动画过渡的所需的时间 , 可能的值:num(ms), 关键字:"fast":200, "normal":400 , "slow":600
-
easing:运动方式 可能的值:linear:匀速 swing:慢-快-慢
-
callback:回调函数
-
-
语法:$(selector).fadeTo(speed,to,easing,callback)
-
to:指定透明的数值 范围0-1
//1.点击淡入 $(".fadeIn").click(function(){ $("div").fadeIn(1000); }) //2.点击开关 $(".fadeToggle").click(function(){ $("div").fadeToggle(1000); }) //3.透明到 $(".fadeTo").click(function(){ $("div").fadeTo(1000,0.3); })
-
4.自定义动画
4.1 第一种用法
-
语法: $(标签).animate({attr},speed,easing,callback)
//1.queue动画队列,每一个animate都会自动加入到动画队列,排队执行 $("div").animate({"width":500}); $("div").animate({"height":500}); //2.同时运动多个属性 $("div").animate({"width":500,"height":500}); //3.自带累加效果 $("div").click(function(){ $("div").animate({"left":"+=50"}); }) //4. show hide toggle关键字可以直接作为目标值使用 $("div").animate({"width":"hide"}); //0 $("div").animate({"width":"show"}); //100 //5.链式操作(运动:数值型的属性) //queue动画队列,每一个animate都会自动加入到动画队列,排队执行,css不是动画,不排队直接跟动画队列中的一个动画一起执行 $("div").animate({"width":500}) .animate({"height":500}) .queue(function(next){ $("div").css("background","teal"); // $("div").dequeue(); 出队 next(); //让后面的动画继续排队执行 }) .animate({"opacity":0.3});
4.2 第二种用法
-
语法:$(标签).animate({attr},{props})
-
参数props:
duration - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始。
//$("div").animate({"width":500},600); 紧跟在后面的动画会一起执行 $("div").animate({ "width": 500 }, { "duration": 1000, "queue": false }); $("div").animate({ "height": 500 }, { "duration": 1000, "queue": false }); $("div").animate({ "opacity": 0.5 }, { "duration": 1000 });
4.3 动画方法
-
stop(clearQueue,gotoEnd):停止动画
-
参数:
clearQueue:是否停止动画队列中的所有动画,默认是false:停止当前正在运动的动画, true:停止所有的动画
gotoEnd:停止动画时当前运动的属性是否立刻到达目标值,默认是false:点那停那 true:停止时立刻到达目标点
$(".start").click(function(){ $("div").animate({"width":500},1000); //3.delay():延迟执行 $("div").delay(1000); $("div").animate({"height":500},1000); }); $(".stop").click(function(){ $("div").stop(false,true); });
-
-
finish() : 停止动画,所有动画全部停止,并且都到达目标点
$("div").animate({"width":500},1000); //3.delay():延迟执行 $("div").delay(1000); $("div").animate({"height":500},1000);
-
delay():延迟执行
//2.finish() : 停止动画,所有动画全部停止,并且都到达目标点 $("div").finish();
-
is(":animated"):判断当前元素上是否有动画,有--true 没有---false
$(".is").click(function(){ //如果元素上有动画,不加,没有再加 if($("div").is(":animated") == false){ $("div").animate({"width":"toggle"}); } })
4.4 运动scrollTop
//2.点击top回到顶部 $("p").click(function(){ $("html,body").animate({"scrollTop":0}) })
5.$.extend()
5.1 深浅拷贝
5.1.1 浅拷贝
//数据类型:六大类: number string boolean undefined null Object(function,array,object) //基本数据类型:变量中直接存值, 引用数据类型:存储的是地址 //赋值:给的是地址,一改全改 var arr1 = [1, 2, 3]; var arr2 = arr1; arr1.push(4); // [1, 2, 3, 4] console.log(arr2);
-
数组的浅拷贝
//浅拷贝:一个对象中内容改变,会影响到另一个(共用一个地址) var arr3 = ["a", "b", "C", [1, 2]]; var arr4 = []; //循环将arr3中数据一个一个复制到arr4 for (var i = 0; i < arr3.length; i++) { arr4[i] = arr3[i]; } arr3[3].push(3); console.log(arr3); // ["a", "b", "C", [1,2,3]] console.log(arr4); //["a", "b", "C", [1,2,3]]
-
对象的浅拷贝
var obj1 = { "name": "曾庆文", "detail": { "height":180, "yz":9 } } var obj2 = {}; //循环将obj1中的属性,放到obj2中 for(var key in obj1){ obj2[key] = obj1[key]; } console.log(obj2); obj2.name = "曾帅"; console.log(obj2); //{name: "曾帅", detail: {…}} console.log(obj1); //{name: "曾庆文", detail: {…}} //拷贝内容中依然有引用数据类型,改这部分数据会一改全改 obj2.detail.yz = 8; console.log(obj1); //8
5.1.2 深拷贝
//$.extend(): 拷贝对象的属性,返回复制好的对象 //语法:$.extend(deep,目标对象,被拷贝属性的对象) //deep:false默认,浅拷贝 var obj1 = { "name": "曾庆文", "detail": { "height": 180, "yz": 9 } } //浅拷贝:一改全改 // var obj2 = $.extend(false,{},obj1); // obj2.detail.yz = 8; // console.log(obj1); //深拷贝:相互之间没有任何影响 var obj2 = $.extend(true, {}, obj1); obj2.detail.yz = 8; console.log(obj1)