龙空技术网

Jquery绑定事件及动画效果

争渡渡鸟 151

前言:

此刻看官们对“jquery多个事件绑定事件绑定”大约比较着重,朋友们都需要分析一些“jquery多个事件绑定事件绑定”的相关文章。那么小编也在网摘上网罗了一些有关“jquery多个事件绑定事件绑定””的相关文章,希望小伙伴们能喜欢,咱们快快来了解一下吧!

绑定事件

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

标签: #jquery多个事件绑定事件绑定