绑定事件
bind(type, data, fuc)
one(type, data, fuc) //只执行一次
常见事件类型
名称含义blur失去焦点focus获得焦点load加载resize重置大小scroll滚动unload卸载click点击dblclick双击mousedown鼠标按下mouseup鼠标弹起mousemove鼠标移动mouseover鼠标悬停mouseout鼠标移走mouseenter鼠标移入mouseleave鼠标离开change内容改变select选中submit提交keydown有键按下keypress有键按下keyup有键弹起error有错误
判断是否显示
if($("#id").is(":visible")){ }else{ }
简化绑定事件
$(this).mouseover(function(){ //代码 })
Hover事件
hover(enter,leave)
光标移入,触发第一个事件,光标移走,触发第二个事件
$("#id").hover(function(){ //光标移入 },function(){ //光标移出 })
toggle事件
$("#id").toggle(function(){ //第一次点击 },function(){ //第二次点击 })
$(this).toggle(); //表示显示隐藏之间的切换 $(this).slideToggle(); //切换显示 $(this).fadeTo(1000,0.5); //1000ms淡化到0.5透明度
阻止事件的冒泡event.stopPropagation()
阻止默认事件的发生event.preventDefault()
补充:可以通过return false;阻止默认事件。
获取事件针对的对象event.target
获取光标所在页面的位置event.pageX() / event.pageY()
获取鼠标按键类型event.which() 1左键2中键3右键
移除所有的绑定事件
$("#id").unbind("click") 或 $("#id").unbind();
移除指定的事件
$("#id").unbind("click",funName);
模拟触发事件
$("#id").trigger("click"); 或 $("#id").click();
元素的显示隐藏
$("#id").show();
$("#id").hide();
$("#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(); //隐藏
自定义动画
animate(param,speed, callback);
$(this).animate({"left":"500px"},3000); //三秒内,位置改变到指定地方 $(this).animate({"left":"+=500px"},3000); //三秒内,位置改变500px $(this).animate({"left":"-=500px"},3000); //三秒内,位置改变500px