本章目标
使用常用简单事件制作网页特效
使用鼠标事件制作主导航特效
使用hover( )方法制作下拉菜单特效
使用鼠标事件及动画制作页面特效
网页中的事件
和WinForm一样，在网页中的交互也是需要事件来实现的，例如tab切换效果，可以通过鼠标单击事件来实现
jQuery中的事件
基础事件
鼠标事件
键盘事件
window事件
表单事件
复合事件
鼠标光标悬停
鼠标连续点击
鼠标事件
| 条件 | 描述 | 执行时机 |
| click( ) | 触发或将函数绑定到指定元素的click事件 | |
| mouseover( ) | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
| mouseout( ) | 触发或将函数绑定到指定元素的mouseout事件 | 鼠标指针移出时 |
| mouseenter( ) | 触发或将函数绑定到指定元素的mouseenter事件 | 鼠标指针进入 |
| mouseleave( ) | 触发或将函数绑定到指定元素的mouseleave事件 | 鼠标指针离开时 |
//使用mouseover事件给导航项目改变背景颜色
$(".nav-ul a").mouseover(function() {
$(this).css("background-color","#f01e28");
})
//使用mouseout事件给导航项目还原背景颜色
$(".nav-ul a").mouseout(function(){
$(this).css("background-color","#ff2832");
})
鼠标事件方法的区别
| 方法 | 相同点 | 不同点 |
| mouseover( ) mouseenter( ) |
鼠标进入被选元素时会触发 | 鼠标在其被选元素的子元素上来回进入时： 触发mouseover( ) 不触发mouseenter |
| mouseout( ) mouseleave( ) |
鼠标离开被选元素时会触发 | 鼠标在其被选元素的子元素上来回离开时： 触发mouseout 不触发mouseleave |
键盘事件
| 方法 | 描述 | 执行时机 |
| keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
| keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
| keypress( ) | 触发或将函数绑定到指定元素的keypress事件 | 产生可打印的字符时 |
示例：
$(document).ready(function () { $("[type=password]").keydown(function(){ //append方法是在被选元素内部插入指定内容 $("#events").append("keydown") }).keyup(function() { $("#events").append("keyup") }).keypress(function(){ $("#events").append("keypress") }) $(document).keydown(function(event) { console.log(event); if(event.keyCode == 13) { alert ("确认要提交吗？") } }) });浏览器事件
语法：$(selector).resize( );
调整窗口大小时，完成页面特效
绑定事件与移除事件
绑定事件
移除事件
绑定事件
bind(type,[data],fn);
type：事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件
[data]：可选函数
fn：处理函数
绑定单个事件
同时绑定多个事件
绑定单个事件
示例：
$(document).ready(function(){
$(".on").bind("mouseover",function(){
$(".topDown").show();
});
});
绑定多个事件
示例：
$(".top-m .on").bind({
mouseover:function(){
$(".topDown").show();
},
mouseout:function(){
$(".topDown").hide();
}
});
移除事件
语法：unbind([type],[fn])
[type]:事件类型，主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
[fn]:处理函数
提示：当unbind()不带参数时，表示移除所绑定的全部事件
复合事件
hover( )方法
toggle( )方法
hover( )方法
hover()方法相当于mouseover与mouseout事件的组合
语法：hover(enter,leave);
示例：.top-m .on").hover(function(){
$(".topDown").show();
},
function(){
$(".topDown").hide();
}
toggle()方法
语法：toggle(fn1,fn2,...,fnN);
示例：
$("input").toggle(
function(){$("body").css("background","#ff0000");},
function(){$("body").css("background","#00ff00");},
function(){$("body").css("background","#0000ff");}
)
toggle()方法2-2
oggle()方法不带参数，与show( )和hide( )方法作用一样
toggleClass( )可以对样式进行切换
语法：toggleClass(className);
示例：$("input").click(function(){$("p").toggleClass("red");})
小结：
toggle( )和toggleClass( )总结
toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件
toggle( )实现事件触发对象在显示和隐藏状态之间切换
toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换
jQuery动画效果
jQuery提供了很多动画效果
控制元素显示与隐藏
改变元素的透明度
改变元素高度
自定义动画
控制元素的显示及隐藏
语法：$(selector).show([speed],[callback])
$(selector).hide([speed],[callback])、
speed：可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
callback：可选.fadeIn函数执行完之后，要执行的函数。除非设置了speed参数，否则不能设置该参数
改变元素的透明度
语法：$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
speed：可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
callback：可选。show函数执行完之后，要执行的函数
改变元素的高度
slideDown() 可以使元素逐步延伸显示
slideUp()则使元素逐步缩短直至隐藏
语法:$(selector).slideUp ([speed],[callback])
` $(selector).slideDown ([speed],[callback])
示例：
$(document).ready(function() {
$("h2").click(function(){
$(".txt").slideUp("slow");
$(".txt").slideDown("slow");
});
});
自定义动画
语法:$(selector). animate({params},speed,callback)
params:必须，定义形成动画的css属性
speed:可选,规定效果时长，取值：毫秒、fast、slow
callback:可选，滑动完成后执行的函数名称
总结：