一、jquery事件
1、事件对象
$(document).click(function (ev) {
//不用考虑兼容，就通过事件处理函数的参数传入
//jq事件对象
console.log(ev);
//原生对象
console.log(ev.originalEvent);
// 鼠标相对于文档的距离
console.log(ev.pageX, ev.pageY);
// 鼠标相对于屏幕可视区的距离
console.log(ev.clientX, ev.clientY);
// 鼠标相对于触发事件的元素的左上角的距离
console.log(ev.offsetX, ev.offsetY);
// 鼠标相对于屏幕的距离
console.log(ev.screenX, ev.screenY);
// 相当于keyCode，比keyCode强大，还可以记录鼠标的键值，123(左中右);
console.log(ev.which);
console.log(ev.target); // 事件源
console.log(ev.delegateTarget); // 事件绑定的对象
console.log(ev.type); // 事件类型
console.log(ev.ctrlKey); // 相应的功能键是否按下
console.log(ev.shiftKey);
console.log(ev.altKey);
/*
阻止冒泡：
ev.stopPropagation()
ev.cancelBubble = true
阻止事件默认行为：
return false
ev.preventDefault();
ev.returnValue = false
*/
ev.preventDefault(); // 阻止默认事件
ev.stopPropagation(); // 阻止冒泡的操作
return false; // 阻止默认事件 + 阻止冒泡的操作
})
2.事件绑定
语法：$().on(事件类型，事件处理函数)
特点：可以给同一个元素的同一个事件添加不同的处理函数
可以同一个元素的不同事件添加同一个事件处理函数
可以同时添加多个事件
function fun1() {
alert(this);
}
function fun2() {
alert("22");
}
//1.可以给同一个元素的同一个事件添加不同的处理函数
/*$("div").on("click",fun1);
$("div").on("click",fun2);*/
//2.可以同一个元素的不同事件添加同一个事件处理函数
//$("div").on("click mouseover",fun1); //多个事件之间用空格隔开
//3.可以同时添加多个事件
/* $("div").on({
"click":fun1,
"mouseover":fun2,
"mouseout":fun1,
});*/
//4.添加自定义事件
$("div").on("abc",function () {
alert("abc");
});
$("div").on("click",function () {
$("div").trigger("abc"); //触发自定义事件
})
3.事件委托
//1.事件委托 $(selector).on(事件类型，子元素，事件处理函数)
$("ul").on("click","li",function () {
console.log(this); //this触发事件的对象 （子元素）
$(this).css("background","green").siblings().css("background","");
});
4.事件取消
//$("p").off("click") //取消所有的点击事件
//$("p").off("click",fun2) //取消所有的点击事件
//命名空间
$("p").on("click.a",fun1);
$("p").on("click.b",fun2);
$("p").off("click.a")
5.one 添加的事件只会触发一次
$("p").one("click",function () {
alert("fd");
})
})
二、动画函数
1、hover
//hover(function(){},function（）{})
$("div").hover(function () {
//移入时调用的函数
$("div").css("background","green");
},function () {
//移出时调用的函数
$("div").css("background","red");
})
2.show（显示） hide（隐藏） toggle（和开关相同来回切换）
语法：show(speed,easing,callback)
Speed:动画时间
Easing：运动方式 linear swing
Callback：回调函数
3.fadeIn、fadeOut、fadeToggle、fadeTo
4.slideDown，slideUp，slideToggle
5.动画递归
递归：函数里面调用函数，递归函数中需要有一个结束递归的条件
eg：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery.js"></script>
<style>
div{
width: 101px;
height: 300px;
background: pink;
float: left;
margin-right: 10px;
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>
<script>
$("div:eq(0)").slideDown(400,function () {
//回调函数，动作做完以后执行的函数
$(this).next().slideDown(400,function () {
$(this).next().slideDown(400);
});
});
$("div:eq(0)").slideDown(400,function next() {
//回调函数，动作做完以后执行的函数
$(this).next().slideDown(400,next);
});</script>
</body>
</html>
三、自定义动画animate
$().animate({动画参数},speed(默认400),easing,callback)
$().animate({动画参数},{options})
speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始。
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
1、动画队列
//1.动画可以连缀，所有的动画都会加入到动画队列，按顺序执行
/*$("div").animate({"width":500})
.animate({"height":500});*/
//2.可以直接使用show hide toggle
// $("div").animate({"width":"hide"});
//3.css不是动画，不会加入到动画队列，会跟第一个动画一起执行
/*$("div").animate({"width":500})
.animate({"height":500})
.css("background","pink")*/
//4.手动加入动画队列
/*$("div").animate({"width":500})
.animate({"height":500})
.queue(function () { //手动加入动画队列
$(this).css("background","pink");
})
.animate({"opacity":0.2});//手动加入到动画队列中以后，
后面的队列就不会再执行了
*/
$("div").animate({"width":500})
.animate({"height":500})
.queue(function (next) { //手动加入动画队列
$(this).css("background","pink");
//$("div").dequeue(); 不建议使用
next();
})
.animate({"opacity":0.2}); //手动加入到动画队列中以后，后面的队列就不会再执行了
2、stop
/*
stop(clearQueue,gotoEnd)
clearQueue:是否清除动画队列中所有动画，默认false
gotoEnd：动画停止的时当前动画是否到达目标点 ，默认是false
finish():所有的动画都到完成状态
*/
$("button:eq(0)").click(function () {
$("div").animate({"width":500},1000)
.animate({"height":500},1000);
})
$("button:eq(1)").click(function () {
//$("div").stop(false,false);
$('.box').finish(); //所有的动画都到完成状态 ，旧版本jquery没有这个而方法
})
3.延迟动画
$("button:eq(0)").click(function () {
$("div").animate({"width":500},1000)
.delay(5000) //动画延迟
.animate({"height":500},1000);
})
关键词：前端培训