jQuery事件与特效

目录

jQuery中的事件

鼠标事件

键盘事件 

绑定事件与移除事件 

复合事件

jQuery动画效果

---

jQuery中的事件

jQuery事件是对JavaScript事件的封装，常用事件分类

        基础事件

        鼠标事件

        键盘事件

        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事件	产生可打印的字符时

绑定事件与移除事件 

绑定事件（由于jQuery版本的不同，函数也不一样，示例使用3.6.1版本）

        绑定单个事件

        同时绑定多个事件

移除事件（示例同上）

移除所绑定的事件

复合事件

hover()方法

hover()方法相当于mouseover与mouseout事件的组合

语法：

hover(enter,leave);

 

toggle()方法

toggle()方法用于模拟鼠标连续click事件

语法：

toggle(fn1,fn2,...,fnN);

 toggle()方法不带参数，与show( )和hide( )方法作用一样

语法：

toggle( );

 

toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件

toggle( )实现事件触发对象在显示和隐藏状态之间切换

toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换

 

	
		
		
		
	
	
		
我是段落标签
		显示和隐藏p元素
	
	

 

jQuery动画效果

控制元素的显示及隐藏

show() 控制元素的显示，hide( )控制元素的隐藏

语法：

$(selector).show([speed],[callback])
$(selector).hide([speed],[callback])

改变元素的透明度

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

语法：

$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])

 

改变元素的高度 

slideDown() 可以使元素逐步延伸显示

slideUp()则使元素逐步缩短直至隐藏

语法：

$(selector).slideUp ([speed],[callback])
$(selector).slideDown ([speed],[callback])

自定义动画

语法：

$(selector). animate({params},speed,callback)

	
		
		
		
		
	
	
	
		
		

		淡入
		淡出
		

		缩小
		变高
		

		动画