1.jQuery事件是对JavaScript事件的封装
jQuery事件分为基础事件（鼠标事件、键盘事件、window事件、表单事件）和复合事件（鼠标光标悬停、鼠标连续点击）
鼠标事件：当用户在文档上移动或单击鼠标时而产生的事件
|
方法 |
描述 |
执行时机 |
|
click |
触发或将函数绑定到指定元素的click事件 |
单击鼠标时 |
|
mouseover |
触发或将函数绑定到指定元素的mouseover事件 |
鼠标指针移过时 |
|
mouseout |
触发或将函数绑定到指定元素的mouseout事件 |
鼠标指针移出时 |
|
mouseenter |
触发或将函数绑定到指定元素的mouseenter事件 |
鼠标指针进入时 |
|
mouseleave |
触发或将函数绑定到指定元素的mouseleave事件 |
鼠标指针离开时 |
鼠标事件方法的区别：
|
方法 |
相同 |
不同 |
|
mouseover( ) |
鼠标进入被选元素时会触发 |
鼠标在其被选元素的子元素上来回进入时： 触发mouseover( ) 不触发mouseenter( ) |
|
mouseenter( ) |
||
|
mouseout( ) |
鼠标离开被选元素时会触发 |
鼠标在其被选元素的子元素上来回离开时： 触发mouseout( ) 不触发mouseleave( ) |
|
mouseleave( ) |
键盘事件：用户每次按下或者释放键盘上的键时都会产生事件
常用键盘事件：
|
方法 |
描述 |
执行时机 |
|
keydown( ) |
触发或将函数绑定到指定元素的keydown事件 |
按下键盘时 |
|
keyup( ) |
触发或将函数绑定到指定元素的keyup事件 |
释放按键时 |
|
keypress( ) |
触发或将函数绑定到指定元素的keypress事件 |
产生可打印的字符时 |
绑定事件：绑定事件使用bind()方法
bind(type,[data],fn){type:事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件
data:可选函数
fn:处理函数}
绑定单个事件
同时绑定多个事件
移除事件：移除事件使用unbind()方法unbind([type],[fn]);{type:事件类型，主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
fn:处理函数}
当unbind()不带参数时，表示移除所绑定的全部事件
复合事件：
1.hover( )
可以理解为mouseover与mouseout事件的组合
[hover( )方法相当于mouseover与mouseout事件的组合]
hover(enter,leave);
2.toggle( )
不带参数时，相当于show( )和hide( )方法的作用
[toggle( )方法用于模拟鼠标连续click事件]
toggle(fn1,fn2,...,fnN);
toggle( )方法不带参数，与show( )和hide( )方法作用一样[toggle( );]
toggleClass( )可以对样式进行切换[toggleClass(className);]
3.toggle( )和toggleClass( )总结：
toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件
toggle( )实现对象在显示和隐藏状态之间切换
toggleClass( )实现对象在添加样式和移除样式之间切换
2.jQuery动画效果
- 控制元素显示与隐藏
- 改变元素的透明度
- 改变元素高度
- 自定义动画
控制元素的显示 show() $(selector).show();
控制元素的隐藏 hide() $(selector).hide();
改变元素透明度(淡出淡入效果)
fadeIn() $(selector).fadeIn();
fadeOut() $(selector).fadeOut();
改变元素高度
延伸显示元素 slideDown() $(selector).slideDown();
缩短隐藏元素 slideUp() $(selector).slideUp();
自定义动画
$(selector).animate({定义形成动画的css属性}, );
Show()、hide()与fadeIn()、fadeOut()和slideDown、slideUp()区别
1.show()、hide() 长度、宽度、透明度三个属性一起变化
2.fadeIn()、fadeOut 设置好盒子，变化透明度
3.slideDown()、slideUp()仅改变元素的高度