Jquery中的事件和动画

目录

1、jQuery中的事件

①鼠标事件

②键盘事件

③表单事件

——绑定事件

——绑定多个事件

——移除事件

④鼠标光标悬停事件

⑤鼠标连续click事件

2、jQuery动画效果

①显示及隐藏元素

②切换元素可见状态

③淡入淡出效果

④改变元素的高度

---

网页中的事件

和winform一样，在网页中的事件也是实现和用户交互的基础

1、jQuery中的事件

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

基础事件

• window事件
• 鼠标事件
• 键盘事件
• 表单事件

复合事件是多个事件的组合

• 鼠标光标悬停
• 鼠标连续点击

①鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouse over事件	鼠标移过时
mouseout( )	触发或将函数绑定到指定元素的mouse out事件	鼠标移出时

②键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

③表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：

方法	描述	执行时机
focus( )	触发或将函数绑定到指定元素的focus事件	获得焦点
blur( )	触发或将函数绑定到指定元素的blur事件	失去焦点

——绑定事件

除了使用事件名绑定事件外，还可以使用bind()方法

——绑定多个事件

bind()方法还可以同时为多个事件绑定方法

——移除事件

移除事件使用unbind()方法，其语法如下：

unbind([type],[fn])

参数	含义	描述
[type]	事件类型	主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
[fn]	处理函数	用来绑定的处理函数

当unbind()不带参数时，表示移除所绑定的全部事件

④鼠标光标悬停事件

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

⑤鼠标连续click事件

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

2、jQuery动画效果

jQuery提供了很多动画效果，如：

• 控制元素显示与隐藏
• 控制元素淡入淡出
• 改变元素高度

①显示及隐藏元素

show() 在显示元素时，能定义显示元素时的效果，如显示速度

显示速度可以取如下值：毫秒（如1000）、slow、normal、fast

②切换元素可见状态

toggle()除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态

$("li:gt(5):not(:last)").toggle();

③淡入淡出效果

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

④改变元素的高度

slideDown() 可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏

$("h2").click(function(){
        $(".txt").slideUp("slow");
        $(".txt").slideDown("slow");
});