1：在jQuery中使用bind方法进行事件的绑定，bind方法有两个参数，第一个参数是事件的类型例如click,change,keyup，keydown,blur,focus等。第二个参数是一个回调函数（callback function）,当事件被触发时会执行这个回调函数。

　　如果想清除绑定的事件可以使用unbind方法，此方法接收一个事件类型作为参数，$(element).unbind()。

　　以下是一些通过bind与unbing的方法：

　　

案例：对每个li元素绑定click事件，当点击li标签时，将其背景色变为红色。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.     ul{ background-color:#dcdcdc; list-style:none; width:300px; padding:0px;}
  8.     li{ cursor:pointer;margin:10px 0px 0px 0px;}
  9.     </style>
  10.     <script type="text/javascript" src="../js/jquery.js"></script>
  11.     <script type="text/javascript">
  12.     $(function(){
  13.         $('li').bind('click',function(){
  14.         $(this).css('background-color','red');
  15.         });
  16.     });
  17.     </script>
  18. </head>
  19. <body>
  20.    <ul>
  21.        <li>China</li>
  22.        <li>India</li>
  23.        <li>USA</li>
  24.    </ul>
  25. </body>
  26. </html>

效果图：

2：如何对通过js动态生成的html元素绑定事件？可以使用live(event type,callback function);如果想清除绑定的事件可以使用die方法：$(element).die(event type);

案例：点击按钮生成新的html元素节点，然后对其注册点击事件。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.     div{ border: 1px solid black; cursor: pointer; width: 200px; margin: 10px;}
  8.     </style>
  9.     <script type="text/javascript" src="../js/jquery.js"></script>
  10.     <script type="text/javascript">
  11.     $(function(){
  12.         $('#btn').click(function(){
  13.         $('body').append('<div class="future">I am a new div</div>');
  14.         });
  15.         $('div').live('click',function(){
  16.         $(this).css({'color':'red','font-weight':'bold'}).html('You clicked me!');
  17.         });
  18.     });
  19.     </script>
  20. </head>
  21. <body>
  22.     <input type="button" id="btn" value="Create A New Element"/>
  23.     <div class="future">Already on page</div>
  24. </body>
  25. </html>

效果图：

jQuery 中的事件绑定与取消绑定的更多相关文章

  1. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

  2. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  3. Jquery中的事件绑定$(&quot;#btn&quot;).bind(&quot;click&quot;,function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  4. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  5. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  6. jQuery中的事件机制深入浅出

    昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...

  7. 锋利的jQuery读书笔记---jQuery中的事件

    jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...

  8. jQuery（4）—— jQuery中的事件

    jQuery中的事件 [加载DOM] 在常规的JavaScript代码中,通常使用window.onload方法,在jQuery中,使用的是$(document).ready()方法.极大地提高了we ...

  9. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  10. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

随机推荐

  1. DatabaseMetaData的用法【转载】

    一 . 得到这个对象的实例Connection con ;con = DriverManager.getConnection(url,userName,password);DatabaseMetaDa ...

  2. [Design Pattern] Iterator Pattern 简单案例

    Iterator Pattern,即迭代时模式,按照顺序依次遍历集合内的每一个元素,而不用了解集合的底层实现,属于行为类的设计模式.为了方便理解记忆,我也会称其为遍历模式. 下面是一个迭代器模式的简单 ...

  3. Android Studio 遇见的第一个Error

    最近在国内多次尝试在Eclipse下更新SDK无果后,最后终于通过FQ后结束了Google服务器无法访问的噩梦. 顺着墙外的梯子,一并下载Google的Android Studio尝鲜,安装成功后,就 ...

  4. maven项目中找不到Maven Dependencies解决办法

    用eclipse创建maven项目后,在Deployment Assembly中通过Add...->Java Build Path Entries导入Maven Dependencies时,发现 ...

  5. windows 编程 之 问题解决笔记

    问题目录: 1.如何隐藏和显示窗口 2.InvalidateRect在连续使用鼠标或光标时暂时不起作用 3.在VC项目里自己添加头文件和cpp文件在编译阶段报错 4.在static 控件里添加子控件或 ...

  6. 【转】两种方法教你在Ubuntu下轻松关闭触摸板(TinkPad)

    Ubuntu是一个以桌面应用为主的Linux操作系统,所以在使用时我经常的触碰到触摸板,这样会造成我们一些的麻烦,所以要如何的关闭触摸板呢?我们一起来看看吧!   Ubuntu下如何关闭触摸板(Tin ...

  7. WIN8.1 PROBLEMS 01

    win8装好后右下角显示secureboot未正确配置桌面会显示“Windows 8.1 Secure Boot未正确配置”的水印问题: 安全启动(Secure Boot)可以阻止未授权软件的运行,提 ...

  8. struts2校验器规范错误解决

    今天struts2的校验器的配置文件文件头出现了错误,配置如下: <!DOCTYPE validators PUBLIC        "-//OpenSymphony Group// ...

  9. Robotium API -- click/clickLong操作

           click&clickLong方法(点击/长按事件)        ArrayList<android.widget.TextView> clickList(int ...

  10. Linux命令之查找

    在Linux中,有非常多方法能够做到这一点.国外站点LinuxHaxor总结了五条命令,你能够看看自己知道几条.大多数程序猿,可能常常使用当中的2到3条,对这5条命令都非常熟悉的人应该是不多的. 1. ...