一、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);
})
关键词：前端培训