首页 > 代码库 > jQuery中的事件与动画
jQuery中的事件与动画
一 基础事件
1 jQuery中典型的事件方法
单击事件 click(fn)
按下键盘触发事件 kendown(fn)
失去焦点事件 blur(fn)
2 常用的鼠标事件方法
click(fn) 单击鼠标
mouseover(fn) 鼠标指针移过时
mouseout(fn) 鼠标指针移出时
3 键盘事件
keydown(fn) 按下键盘时
keyup(fn) 释放键盘时
keypress() 产生可打印的字符时
4 表单事件
focus() 获得焦点
blur() 失去焦点
5 绑定事件与移除事件
语法 : bind(type,[data],fn)
绑定一个事件
$("button").bind("click",function(){ $("p").slideToggle(); });
绑定多个事件
$(selector).bind({event:function, event:function, ...})
移除事件
语法 :unbind([type],[fn]);
$("button").click(function(){ $("p").unbind(); });
复合事件
hover()方法
语法:hover(enter,leave);
当鼠标指针悬停在上面时,改变 <p> 元素的背景颜色:
$("p").hover(function(){ $("p").css("background-color","yellow"); },function(){ $("p").css("background-color","pink"); });
toggle()方法
语法: toggle(f1,f2);
二 jQuery中的动画
1 控制元素显示与隐藏
显示语法 : $(selector).show([speed],[callback]);
$(".btn2").click(function(){
$("p").show();
});
隐藏语法 : $(selector).hide([speed],[callback]);
$(".btn2").click(function(){ $("p").hide(); });
2 改变元素的透明度
淡入语法: $(selector).fadeIn([speed],[callback]);
$(".btn2").click(function(){ $("p").fadeIn(); });
淡出语法 :$(selector).fadeOut([speed],[callback]);
$(".btn2").click(function(){ $("p").fadeOut(); });
jQuery中的事件与动画