阻止事件冒泡 阻止默认行为
原生js:
阻止事件冒泡:ev.stopPropagation?ev.stopPropagation():ev.cancelBubble=true
阻止默认行为:return false ev.preventDefault?ev.preventDefault():ev.returnValue=false
jquery:
阻止事件冒泡:ev.stopPropagation()
阻止默认行为:return false ev.preventDefault()
事件绑定
事件绑定:
//on off
$(选择器).on(事件类型,事件处理函数)
特点:
可以给同一个标签的同一个事件添加不同的处理函数
$("div").on('click',fun);
$("div").on('click',fun1);
可以给同一个标签的不同事件,添加同一个处理函数
$("div").on('click mouseover',fun);
可以给一个标签同时添加多个事件
$("div").on({
"click":fun,
"mouseover":fun1
})
事件取消:
$(选择器).off("事件类型","事件处理函数");
//取消事件,所有的事件,都可以通过off取消
//$("button").off(); // 全部取消
//$("button").off("click"); // 取消固定类型
事件委托
事件委托:
$(父元素).on(事件类型,子元素,事件处理函数)
*/
$("ul").on('click',"li",function(){
console.log(this); //触发事件的子元素
$(this).css("background","red").siblings().css("background","");
});
$("ul").append("<li>5</li>")
one
//只触发一次
$("button").one("click",function(){
console.log("谢谢惠顾");
});
hover
//$("div").hover(funOver,funOut)
$("div").hover(function(){
//移入
$(this).css("background","red")
},function(){
//移出
$(this).css("background","pink")
显示 隐藏
/*运动宽高,透明度 hide() show() toggle()
hide(speed[运动时间],easing[运动方式],callback[回调函数])
speed: number fast
easing:linear swing[慢快慢]
callback:运动做完以后执行的函数
*/
$("#hide").click(function(){
$("div:eq(0)").hide(2000,"linear",function(){
console.log("饿吗");
});
// $("div:eq(1)").hide(2000,"swing");
});
$("#show").click(function(){
$("div").show(2000);
});
$("#toggle").click(function(){
$("div").toggle(1000);
});
淡入淡出
淡入淡出(透明度)
fadeIn,fadeOut,fadeToggle,fadeTo
/*
$(选择器).slideDown(speed[运动时间],easing[运动方式],callback)
speed:number 400
easing:linear swing
callback:回调函数,运动完成后调用
fadeTo(speed,to,easing,callback)
*/
$("#fadeOut").click(function(){
$("div").fadeOut(2000);
})
$("#fadeIn").click(function(){
$("div").fadeIn(2000);
})
$("#fadeToggle").click(function(){
$("div").fadeToggle(2000);
})
$("#fadeTo").click(function(){
$("div").fadeTo(1000,0.3);
})
滑入滑出
/*
滑入滑出(高度)slideUp() slideDown() slidetoggle()
$(选择器).slideDown(speed[运动时间],easing[运动方式],callback)
speed:number 400
easing:linear swing
callback:回调函数,运动完成后调用
*/
$("#slideUp").click(function(){
$("div").slideUp(1000);
})
$("#slideDown").click(function(){
$("div").slideDown(1000);
})
$("#slidetoggle").click(function(){
$("div").slideToggle(1000);
})
自定义动画
/*
自定义动画:
第一种:$(选择器).animate({运动参数},speed[400],easing,callback)
第二种:$(选择器).animate({运动参数},{options})
duration - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数
*/
//1.动画队列,每一个animate都会主动加入动画队列,然后按顺序进行动画
/* $("div").animate({"width":500});
$("div").animate({"height":500}); */
//2.同时运动
//$("div").animate({"width":500,"height":500});
//3.累加
/* $("div").click(function(){
$("div").animate({
"left":"+=50"
})
}) */
//5.动画连缀,css不是动画,不会加入动画队列,会跟队列中的第一个动画一起执行
$("div").animate({"width":500})
.animate({"height":500})
.queue(function(next){ //
$("div").css("background","green");
//$("div").dequeue(); //出队 不建议使用
next();
})
.animate({"opacity":0.3});
stop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<button>开始动画</button>
<button>结束动画</button>
<div></div>
<script src="jquery-1.11.3.min.js"></script>
<script>
/*
$().stop(clearQueue,gotoEnd)
clearQueue:是否清除动画队列中的所有动画,
默认是false:停止当前正在运动的动画,其他动画继续运行
true:停止所有动画
gotoEnd:停止动画的时候,当前正在运动的动画是否立刻到达目标点
默认是false:立刻停止
true:立刻到达目标点
*/
$("button:eq(0)").click(function(){
$("div").animate({"width":500},1000);
$("div").animate({"height":500},1000);
})
$("button:eq(1)").click(function(){
$("div").stop(false,true);
})
</script>
</body>
</html>
图片漂浮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 100px;
border: 1px solid;
float: left;
position: relative;
overflow: hidden;
}
.box img{
position: absolute;
left:0px;
}
</style>
</head>
<body>
<div class="box">
<img src="imgs/img1.png" alt="">
</div>
<div class="box">
<img src="imgs/img1.png" alt="">
</div>
<div class="box">
<img src="imgs/img1.png" alt="">
</div>
<div class="box">
<img src="imgs/img1.png" alt="">
</div>
<div class="box">
<img src="imgs/img1.png" alt="">
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
$("div").hover(function(){
$(this).children("img").stop().animate({"left":-40});
},function(){
$(this).children("img").stop().animate({"left":0});
})
</script>
</body>
</html>
递归
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 700px;
background: pink;
float: left;
margin-right: 4px;
display: none;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script src="jquery-1.11.3.min.js"></script>
<script>
$("div:eq(0)").slideDown(500,function next(){
//下一个div显示
$(this).next().slideDown(500,next);
});
//递归:函数内部调用函数本身,一定要有结束递归的条件
function jiec(n){
if(n<=1) return 1;
return n*jiec(n-1);
}
console.log(jiec(6));
/*
return 6*jiec(5) 6*5*4*3*2*1
return 5*jiec(4) 5* 4*3*2*1
return 4*jiec(3) 4*3*2*1
return 3*jiec(2) 3*2*1
return 2*jiec(1) 2*1
return 1
*/
</script>
</body>
</html>