jQuery绑定事件及动画效果
绑定事件
on(events,[selector],[data],fn):在选择元素上绑定一个或多个事件的事件处理函数。
bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数。
one(type,[data],fn):为每一个匹配元素的特定事件绑定一个一次性的事件处理函数。
常见事件类型
- blur 失去焦点
focus 获得焦点
resize 调整浏览器窗口的大小
scroll 滚动指定的元素时
unload 离开页面时
click 点击
dblclick 双击
mousedown 鼠标按下
mouseup 鼠标弹起
mousemove 鼠标移动
mouseover 鼠标悬停
mouseout 鼠标移走
mouseenter 鼠标移入
mouseleave 鼠标离开
change 内容改变
select 选中
submit 提交
keydown 键盘按下
keypress 键盘按下
keyup 键盘弹起
error 有错误
Hover事件
hover([over,]out)
光标移入,触发第一个事件,光标移走,触发第二个事件
$("#id").hover(function(){
//光标移入
},function(){
//光标移出
})
获取事件针对的对象event.target
获取光标所在页面的位置event.pageX()/event.pageY()
阻止事件的冒泡event.stopPropagation()
阻止默认事件的发生event.preventDefault()
元素的显示隐藏
show([speed,[easing],[fn]]):显示隐藏的匹配元素。
hide([speed,[easing],[fn]]):隐藏显示的元素
$("#id").show("slow"); //600ms
$("#id").show("normal"); //400ms
$("#id").show("fast"); //200ms
$("#id").hide("slow"); //600ms
$("#id").hide("normal"); //400ms
$("#id").hide("fast");//200ms
$("#id").show(1000);//1000ms
元素的淡入淡出
$("#id").fadeIn();
$("#id").fadeOut();
元素滑动出现或隐藏
$("#id").slideDown(); //显示
$("#id").slideUp(); //隐藏
$("#id").slideToggle(); //显示/隐藏
自定义动画
animate(params,[speed],[easing],[fn])
$(this).animate({"left":"500px"},3000); //三秒内,位置改变到指定地方
$(this).animate({"left":"+=500px"},3000); //三秒内,位置改变500px
$(this).animate({"left":"-=500px"},3000); //三秒内,位置改变500px