1.jQuery事件是对JavaScript事件的封装
jQuery的基础事件 : 鼠标事件 , 键盘事件 , window事件 , 表单事件
复合事件 : 鼠标光标悬停 , 鼠标连续点击
2.鼠标事件:
当用户下文档上移动或单击鼠标时而产生的事件
| 方法 | 描述 | 执行时机 |
| click() | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
| mouseover() | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
| mouseout() | 触发或将函数绑定到指定元素的mouseout事件 | 鼠标指针移出时 |
| mouseenter() | 触发或将函数绑定到指定元素的mouseenter事件 | 鼠标指针进入时 |
| mouseleave() | 触发或将函数绑定到指定元素的mouseleave事件 | 鼠标指针离开时 |
鼠标事件方法的区别
| 方法 | 相同点 | 不同点 |
|
mouseover() mouseenter() |
鼠标进入被选元素是会触发 |
鼠标在其被选元素的子元素上来回进入时: 触发 mouseover() 不触发mouseenter() |
|
mouseout() mouseleave() |
鼠标离开被选元素是会触发 |
鼠标在其被选元素的子元素上来回离开时: 触发mouseout() 不触发mouseleave() |
3.键盘事件
用户每次按下或者释放键盘上的键时都会产生事件
常用键盘事件
| 方法 | 描述 | 执行时机 |
| keydown() | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
| keyup() | 触发或将函数绑定到指定元素的keyup事件 | 释放键盘时 |
| keypress() | 触发或将函数绑定到指定元素的keypress事件 | 产生可打印的字符时 |
4.绑定事件
绑定事件使用bind()方法
语法: bind(type , [date] , fn) [date] : 为可选函数 fn : 为处理函数
事件类型 , 主要包括click , mouseover , mouseout等基础事件 , 此外 , 还可以是自定义事件
绑定单个事件
示例:
$(document).ready(function(){
$(".on").bind("mouseover",function(){
$(".topDown").show();
});
});
同时绑定多个事件
示例:
$(".top-m .on").bind({
mouseover:function(){
$(".topDown").show();
},
mouseout:function(){
$(".topDown").hide();
}
});
5.移除事件
移除事件使用unbind()方法
语法: unbind([type] , [fn]);
事件类型，主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
注: 当unbind()不带参数时, 表示移除所绑定的全部事件
示例:
$("#del").click(function(){
$("#nav li:first").unbind("click", content1)
});
6.复合事件:
1.hover( ) : 可以理解为mouseover 与mouseout事件的组合
语法: hover(enter , leave);
示例:
$(".top-m .on").hover(function(){
$(".topDown").show();
},
function(){
$(".topDown").hide();
}
);
2.toggle( ) : 不带参数时 , 相当于show() 和hide( ) 方法的作用
1.用于模拟鼠标连续click事件
语法 : toggle(fn1, fn2 , .... , fnN);
示例:
$("input").toggle(
function(){$("body").css("background","#ff0000");},
function(){$("body").css("background","#00ff00");},
function(){$("body").css("background","#0000ff");}
)
2. 不带参数时 , 相当于show() 和hide( ) 方法的作用
语法:toggle();
示例: $("input").click(function(){$("p").toggle();})
toggleClass()可以对样式进行切换
语法: toggleClass(className);
示例: $("input").click(function(){$("p").toggleClass("red");})
3.toggle( )和toggleClass( )总结
toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件
toggle( )实现对象在显示和隐藏状态之间切换
toggleClass( )实现对象在添加样式和移除样式之间切换
7.jQuery动画效果
jQuery提供了很多动画效果 :
1. 控制元素显示与隐藏
show( )控制元素的显示，hide( )控制元素的隐藏
语法: $(selector).show([speed],[callback]);
$(selector).hide([speed],[callback]);
注: speed: 可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
callback: 可选。show函数执行完之后，要执行的函数
2. 改变元素的透明度
fadeIn( )和fadeOut( )可以通过改变元素的透明度实现淡入淡出效果
语法 : $(selector).fadeIn([speed],[callback]);
$(selector).fadeOut([speed],[callback]);
注 : callback : 可选。fadeIn函数执行完之后，要执行的函数
3. 改变元素高度
slideDown( )可以使元素逐步延伸显示
slideUp( )则使元素逐步缩短直至隐藏
语法 : $(selector).slideUp ([speed],[callback]);
$(selector).slideDown ([speed],[callback]);
示例 : $(selector).slideUp ([speed],[callback]);
$(selector).slideDown ([speed],[callback]);
4. 自定义动画
语法 : $(selector). animate({params},speed,callback);
示例:
$(this).animate({left: "400px", height:"200px" ,opacity: "1"},
3000).animate({top: "200px" , width :"200px"},
3000 ).fadeOut("slow");