jQuery中的事件与动画
一、基础事件(1)鼠标事件(2)键盘事件(3)window事件(4)表单事件
复合事件(1)鼠标光标悬停(2)鼠标连续点击
二、鼠标事件
1.click() 点击鼠标时执行
2.mouseover() 鼠标指针移入时执行,注意无论是被选中元素,还是其子元素被移入都会触发事件。
3.mouseout() 鼠标指针移出时执行,注意无论是被选中元素,还是其子元素上鼠标移出都会触发事件。
4.mouseenter() 鼠标指针移入时执行,只有移动至被选中元素才能执行,子元素无效
5.mouseleave() 鼠标指针移出时执行,只有移动出被选元素才执行,子元素无效。
三、键盘事件
1.keydown(), 按下键盘时执行,例$("input").keydown(function(event){}),event.key可以获取按下的键值,event.keyCode可以获取键码
2.keyup(),释放按键时执行,例:$("input").keyup(function(event)
3. keypress,产生可打印的字符时执行, $("iinput").keypress(function(event){})
注意event都是可选参数,根据需要判断是否加上
四、浏览器事件
1.resize() 调整窗口大小时执行,例: $(window).resize()
五、绑定事件
bind(type,[data],fn);
type:事件类型例如 click、mouseover、mouseout、
[data]:可选函数
fn: 处理函数
绑定单个事件:$(".on").bind("mouseover",function(){ $(".ss").show() })
绑定多个事件: $(".on").bind({ mouseover:function(){},mouseout:function(){} })
六、移除事件
unbind(type,fn) 注意当unbind() 不带参数时默认移除所有绑定事件,注意只能解除行外事件
例:unbind() 解除所有事件 unbind("click") 解除点击事件
七、复合事件
hover: 相当于mouseover 和 mouseout的组合体
$(".top-m .on").hover(function(){
$(".topDown").show(); //光标移入触发
},
function(){$(".topDown").hide();//光标移出触发
}
);
第一个事件为光标移入触发,第二个光标移出触发
toggle鼠标连续点击事件:$("input").toggle(
function(){$("body").css("background","#ff0000");},
function(){$("body").css("background","#00ff00");},
function(){$("body").css("background","#0000ff");}
)
八、jQuery动画效果
1.show([speed],[callback]) hide([speed],[callback])
speed:表示速度,值:毫秒、slow,normal、fast 这几个也是指速度
2. fadeIn([speed],[callback]) fadeOut([speed],[callback]),通过改变元素透明度实现淡入淡出
2.slideDown([speed],[callback]) 使元素逐步延伸显示出来
slideUp([speed],[callback]) 使元素逐步缩短至隐藏
2.animate({params},speed,callback)
params 指的是实现的效果例如 animate({wdith:"200px"}) 使宽度变为200px的动画效果