绑定事件

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动态绑定事件的方法_Jquery绑定事件及动画效果相关推荐

  1. jQuery给动态添加的元素绑定事件的方法

    jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...

  2. ajax传向前台的html代码里又有事件的时候,绑定事件失败解决方法

    为动态添加的元素绑定事件有以下几种方式: 1.delegate():向匹配元素的当前或未来的子元素附加一个或多个事件处理器 $(selector).delegate(childSelector,eve ...

  3. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  4. html 未来元素绑定事件,jquery on如何给未来元素绑定事件?

    我们要想在一个元素上绑定一个事件,那么这个元素必须先存在,也就是绑定事件动作前就已有这个元素. 这是一个给元素绑定任何事件的前提. 如果按照这种思路走,那么"给未来元素绑定事件"将 ...

  5. jquery每次动态加载dom,绑定事件会多一次,

    jquery绑定事件,每次动态加载dom,绑定的事件会加1,比如动态加载dom5次,点那个点击事件会弹出5次 解决办法就是在每次绑定之前解绑定. $('.seek-footer .btn1').off ...

  6. jQuery动态生成的元素如何绑定事件

     这段时间在写代码的时候遇到一个问题,通过append()添加的节点,点击事件不起作用.当时我百思不得其解,各种找错都没找到错误的原因.后来才发现是动态生成节点的问题,还是自己没有经验啊.   下面来 ...

  7. jquery绑定点击事件形参_JQuery 绑定事件时传递参数的实现方法

    如题,比如我想在$(":text").bind("keyup",funcionName);将当前的文本框作为参数传递给 functionName所代表的函数,应 ...

  8. html的后绑定事件,HTML 控件绑定事件

    文章摘自  http://www.jb51.net/article/26552.htm 1. 第一种添加事件的方式,直接在html的属性中写JS代码 Div1 Element Div1 Element ...

  9. webp转换gif动图的方法-批量转换并保留动画效果

    前言 上次我们讲了如何批量把webp转jpg.png.bmp等静态图片格式.这次我们来讲讲如何将动态webp转换成其他的动态图片格式,比如gif动画格式.也许有同学要问了,问什么两个格式不一样呢?这是 ...

最新文章

  1. Linux之redhat7系统结构
  2. 攀枝花市大数据中心落户东区
  3. c程序设计语言第五单元,(C语言程序设计基础课件)第五单元循环结构程序设计.pptx...
  4. 使用lucene进行group操作
  5. ob_start()失效与phpunit的非正常结束
  6. 自动登录126邮箱的脚本
  7. 调查显示开发者最讨厌 PHP,最爱 Python
  8. SAP中外向交货单出具发票无法生成会计凭证
  9. Istio 1.1.1 发布,修复漏洞并改进鲁棒性
  10. 不降的数字(51Nod-2499)
  11. ionic3使用第三方图标
  12. 关于秩的等式与不等式总结
  13. mysql时间类型英文_英文日期格式及缩写
  14. Fastdb安装与使用
  15. K-means(tri)利用三角不等式性质加速k-means
  16. 什么时候应该在ECMAScript 6中使用Arrow函数?
  17. 直播已入下半场,秀场直播该何去何从?
  18. 中国联通将 900MHz 频段频谱资源重耕用于 5G 系统,更有利用把5G网络覆盖到边远地区的每一寸土地
  19. 在IOS设备上调试(真机调试)
  20. Firefox插件开发-入门篇

热门文章

  1. Java ArrayList与LinkedList数据结构和特点
  2. eclipse debug(程序调试)单步执行 简述
  3. c 插件读取有属性的html6,廖雪峰的JS教程6-jQuery
  4. java写一个99到0_Java中一个普通的循环为何从10开始到99连续相乘会得到0?
  5. lintcode最长回文子串(Manacher算法)
  6. php windows共享内存,给PHP开启shmop扩展实现共享内存
  7. vant部署_vant ui rem配置流程
  8. android签名忘记密码,修改Android签名证书keystore的密码、别名alias以及别名密码
  9. php创建表设置编码,教您在Zend Framework里如何设置数据库编码以及怎样给数据表设定前缀!...
  10. c语言字符串文库总结,C语言程序设计入门:字符串函数