目录
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版本）
绑定单个事件
同时绑定多个事件
移除事件（示例同上）
移除所绑定的事件
div {
width: 300px;
height: 200px;
border: 1px solid #f00;
}
$(function(){
//使用on()绑定一个事件
// $('div').on('mouseover',function(){
// $(this).css('background-color','#ccc');
// });
//使用on()绑定一个事件
$('div').on({
'mouseover':function(){
$(this).css('background-color','#ccc');
},
'mouseout':function(){
$(this).css('background-color','#f00');
}
});
//使用off()移除div元素上的所有事件
// $('div').off();
//使用off()移除div元素上的鼠标移出事件
$('div').off('mouseout','');
});
hover()方法
hover()方法相当于mouseover与mouseout事件的组合
语法：
hover(enter,leave);
div {
width: 300px;
height: 200px;
border: 1px solid #f00;
}
$(function(){
$('div').hover(function(){
$('div').css('background-color','#ccc');
},function(){
$('div').css('background-color','#00f');
});
});
toggle()方法
toggle()方法用于模拟鼠标连续click事件
语法：
toggle(fn1,fn2,...,fnN);
toggle()方法不带参数，与show( )和hide( )方法作用一样
语法：
toggle( );
toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件
toggle( )实现事件触发对象在显示和隐藏状态之间切换
toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换
div {
width: 300px;
height: 200px;
border: 1px solid #f00;
}
$(function(){
$('div').toggle(function(){
$(this).css('background-color','#ccc');
},function(){
$(this).css('background-color','#f00');
},function(){
$(this).css('background-color','#00f');
});
});
我是段落标签
显示和隐藏p元素
$(function(){
//获取button元素并添加点击事件
$('button').click(function(){
//获取p元素
$('p').toggle();
});
})
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)
div {
width: 200px;
height: 100px;
background-color: aqua;
}
.div1{
position: fixed;
left: 0px;
top: 0px;
}
.div2{
position: fixed;
left: 0px;
top: 185px;
}
.div3{
position: fixed;
left: 0px;
top: 345px;
}
.btn01{
position: fixed;
left: 10px;
top: 112px;
}
.btn02{
position: fixed;
left: 54px;
top: 112px;
}
.btn03{
position: fixed;
left: 10px;
top: 288px;
}
.btn04{
position: fixed;
left: 54px;
top: 288px;
}
.btn05{
position: fixed;
left: 54px;
top: 320px;
}
淡入
淡出
缩小
变高
动画
$(function() {
// $('button').click(function() {
// $('div').hide(5000, function() {
// alert('div隐藏完毕');
// });
// });
$('.btn02').click(function(){
$('.div1').fadeIn(3000,'');
});
$('.btn01').click(function(){
$('.div1').fadeOut(3000,'');
});
$('.btn03').click(function(){
$('.div2').slideUp(3000,'');
});
$('.btn04').click(function(){
$('.div2').slideDown(3000,'');
});
$('.btn05').click(function(){
$('.div3').animate({'width': '400px',
'height': '200px'},3000,'');
});
});
