前端——jQuery中的事件与动画

jQuery 事件

事件组成

在 jQuery 中，一个事件由事件主体、事件类型、事件处理函数三个部分组成。
// 实现事件
$("#button").click(function(){
//...

}）
// 调用事件
$("#button").click();

鼠标事件

常用的鼠标事件方法

方法                                                                           描述
click()                        鼠标单击时执行。
mouseover()             鼠标指针移入时执行。会产生事件冒泡，会从最具体的元素向上级元素触                                       发。
mouseout()               鼠标指针移出时执行。会产生事件冒泡，会从最具体的元素向上级元素触                                       发，
mouseenter(）         鼠标指针进入时执行。会产生事件捕获，会先在父元素上触发，然后向下传播

                                 到子元素。
mouseleave(）         鼠标指针离开时执行。会产生事件捕获，会先在父元素上触发，然后向下传播到子元素

键盘事件

常见的键盘事件方法
方法                             描述
keydown()        键盘按下按键时执行
keyup()             键盘按键释放时执行。
keypress()        产生可打印的字符(如字母、数字、符号等)时执行。

表单事件

常见的表单事件方法
方法                                描述
focus()                 元素获得焦点时执行
blur ()                   元素失去焦点时执行
change()              元素的值发生改变时执行
submit()               <form>表单提交时执行
 

绑定事件

on()方法用于为指定元素绑定一个或多个事件处理程序。bind()方法也可以用于绑定事件，但在 jQuery 3.x中已经被官方废除。

绑定事件的基本用法
$(选择器).on(绑定的事件名称，事件处理函数

移除事件

off()方法用于从指定元素上移除一个或多个事件处理程序unbind()方法也可以用于移除事件，但在 jQuery 3.x中已经被官方移除

移除事件的基本用法
$(选择器).off(移除的事件名称)

复合事件

hover ()是一个复合事件方法，用于模拟鼠标指针进入和离开事件，相当于 mouseenter 和mouseleave事件的组公体。

复合事件的基本用法
$(选择器).hover(鼠标进入时执行函数，鼠标移出时执行函数)

jQuery 动画

控制元素显示和隐藏

show()方法用于控制元素的显示，hide()方法用于控制元素的隐藏。

元素的显示和隐藏，实际上是操作元素的 display 样式属性。

控制元素显示和隐藏的基本用法
//显示
$(选择器).show([speed][，easing][，fn])
// 隐藏
$(选择器).hide([speed][，easing][，fn])
参数                                                                      描述
speed        可选参数，规定显示效果的速度数值:单位为毫秒。slow 慢速、normal正常、fast 快速:
easing       可选参数，规定在动画的不同点上元素的速度，swing:默认值，在开头/结尾慢，在中间

                  快。linear;匀速运动。
fn               可选参数，规定动画完成之后要执行的方法

改变元素透明度

fadeIn()方法和 fade0ut()方法可以通过改变元素的透明度实现淡入淡出效果。

改变元素透明度的基本用法
// 淡入
$("选择器").fadeIn([speed][，easing][，fn]);
D// 淡出
$("选择器").fadeout([speed][，easing][，fn]);

改变元素高度

slideDown()方法用于让元素的高度逐步延伸显示,

slideUp()方法用于让元素的高度逐步缩短直至隐藏。

改变元素高度的基本用法
// 展开
$("选择器").slideDown([speed][,easing][,fn]);
//收缩
$("选择器").slideup([speed][,easing][，fn]);

自定义动画

animate()方法用于创建自定义动画。
自定义动画的基本用法
$(选择器).animate({params}[,speed][,fn]);
animate()方法常见的参数
参数                              描述
params        定义形成动画的CSS属性对象
speed          可选参数，规定动画效果的时长
fn                 可选参数，动画完成后执行的函数。