本文主要是介绍03- jQuery事件处理和动画效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1. jQuery的事件处理
1.1 绑定事件处理函数
on()
将一个或多个事件的处理方法绑定到被选择的元素上。on()方法适用于当前或未来的元素，如用脚本创建的新元素。
$(selector).on(event,childSelector,data,function)| 参数 | 描述 |
|---|---|
| event | 必需。规定要从被选元素添加的一个或多个事件或命名空间。 由空格分隔多个事件值，也可以是数组。必须是有效的事件。 |
| childSelector | 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身）。 |
| data | 可选。规定传递到函数的额外数据。 |
| function | 可选。规定当事件发生时运行的函数。 |
one()
给元素注册只监听一次的事件处理函数。一旦事件处理函数执行后，就会自动删除。
回忆事件绑定
| 鼠标事件 | 键盘事件 | 表单事件 | 页面事件 |
|---|---|---|---|
| click | keydown | blur | load |
| dblclick | keypress | focus | unload(页面关闭) |
| mousedown | keyup | submit | resize |
| mouseup | change | scroll | |
| mousemove | input | ||
| mouseover | |||
| mouseout | |||
| mouseenter(不支持冒泡) | |||
| mouseleave(不支持冒泡) |
1.2 解绑事件处理函数
off()
移除事件处理函数。
1.3 触发事件
trigger( type)
type： 一个事件对象或者要触发的事件类型。
$("#btn").click(function(){alert("xxx");
}).trigger("click");
1.4 鼠标事件
| 支持鼠标事件 | 事件语法 |
|---|---|
| click | $(selector).click(function) |
| dblclick | $(selector).dblclick(function) |
| mousedown | $(selector).mousedown(function) |
| mouseup | $(selector).mouseup(function) |
| mousemove | $(selector).mousemove(function) |
| mouseover | $(selector).mouseover(function) |
| mouseout | $(selector).mouseout(function) |
| mouseenter(不支持冒泡) | $(selector).mouseenter(function) |
| mouseleave(不支持冒泡) | $(selector).mouseleave(function) |
| hover | $(selector).hover(inFunction, outFunction) |
hover(inFunction, outFunction)
功能描述：该事件是mouseenter()和mouseleave()方法的简写形式。
参数说明：
-
inFunction: 表示鼠标刚进入元素边界时要执行的函数。
-
outFunction: 表示鼠标刚离开元素边界时要执行的函数。
$("#box1").hover(function (event) {console.log(event.type+"我进了边界！");},function (event) {console.log(event.type+"我出了边界！");
});1.5 键盘事件
| 支持鼠标事件 | 事件语法 |
|---|---|
| keydown | $(selector).keydown(function) |
| keypress | $(selector).keypress(function) |
| keyup | $(selector).keyup(function) |
1.6 表单事件
| 支持表单事件 | 事件语法 |
|---|---|
| focus | $(selector).focus(function) |
| blur | $(selector).blur(function) |
| change | $(selector).change(function) |
| submit | $(selector).submit(function) |
注意:不支持input事件等
1.7 窗口事件
| 支持窗口事件 | 事件语法 |
|---|---|
| load | $(selector).load(function) |
| unload | $(selector).unload(function) |
| resize | $(selector).resize(function) |
| scroll | $(selector).scroll(function) |
2. jQuery的动画效果
2.1 显示与隐藏效果
show(speed, easing, callback)
功能描述：显示隐藏的匹配元素
参数说明：
-
speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”(600)、“fast(200)”。
-
easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。
-
callback: 可选。表示动画执行完毕后的回调函数
$("div").show(3000);
hide(speed, easing, callback)
功能描述：隐藏显示的元素
参数说明：
-
speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。
-
easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。
-
callback: 可选。表示动画执行完毕后的回调函数
$("div").hide(3000, function(){alert("xxx");
});toggle(speed, easing, callback)
功能描述：在被选元素上进行 hide() 和 show() 之间的切换。
参数说明：
-
speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。
-
easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。
-
callback: 可选。表示动画执行完毕后的回调函数
$("div").toggle("slow", function() {console.log("切换完成");
});2.2 淡入淡出效果
fadeIn(speed, easing, callback)
淡入
-
speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。
-
easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。
-
callback: 可选。表示动画执行完毕后的回调函数
$("div").fadeIn(3000);fadeOut(speed, easing, callback)
淡出
-
speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。
-
easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。
-
callback: 可选。表示动画执行完毕后的回调函数
$("div").fadeOut(3000);fadeTo(speed, opacity, easing, callback)
将被选元素的透明度逐渐地改变为指定的值
-
speed: 必需。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。
-
opacity: 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字
-
easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。
-
callback: 可选。表示动画执行完毕后的回调函数
$("div").fadeTo('slow', 0.5);fadeToggle(speed, easing, callback)
功能描述：在fadeIn()和fadeOut()两个方法之间切换。 参数说明：
-
speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。
-
easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。
-
callback: 可选。表示动画执行完毕后的回调函数
2.3 滑动效果
slideDown(speed, easing, callback)
向下展开动态显示元素。
参数说明：
-
speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。
-
easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。
-
callback: 可选。表示动画执行完毕后的回调函数
slideUp(speed, easing, callback)
向上关闭隐藏元素。
参数说明：
-
speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。
-
easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。
-
callback: 可选。表示动画执行完毕后的回调函数
slideToggle(speed, easing, callback)
功能描述：在关闭和展开之间切换。
参数说明：
-
speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。
-
easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。
-
callback: 可选。表示动画执行完毕后的回调函数
2.4 自定义动画效果
animate(properties,speed, easing, callback)
-
properties: 必须。设置相关动画需要的CSS的属性内容。
-
speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、 ("slow","normal", or "fast"。
-
easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。
-
callback: 可选。表示动画执行完毕后的回调函数
$("div").animate({width : 100,height : 100,top : 500,left : 500},3000,function(){alert("xxx");
});注意：有些CSS的属性不能使用
-
backgroundColor
-
borderColor
-
color
-
outlineColor
2.5 停止动画排队
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。 停止动画排队的方法为：stop() ;
-
stop() 方法用于停止动画或效果。
-
stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。
总结: 每次使用动画之前，先调用 stop() ,再调用动画。
这篇关于03- jQuery事件处理和动画效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
