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