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

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

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

　　

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    ul{ background-color:#dcdcdc; list-style:none; width:300px; padding:0px;}

    li{ cursor:pointer;margin:10px 0px 0px 0px;}

    </style>

    <script type="text/javascript" src="../js/jquery.js"></script>

    <script type="text/javascript">

    $(function(){

        $('li').bind('click',function(){

        $(this).css('background-color','red');

        });

    });

    </script>

</head>

<body>

   <ul>

       <li>China</li>

       <li>India</li>

       <li>USA</li>

   </ul>

</body>

</html>

效果图：

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    div{ border: 1px solid black; cursor: pointer; width: 200px; margin: 10px;}

    </style>

    <script type="text/javascript" src="../js/jquery.js"></script>

    <script type="text/javascript">

    $(function(){

        $('#btn').click(function(){

        $('body').append('<div class="future">I am a new div</div>');

        });

        $('div').live('click',function(){

        $(this).css({'color':'red','font-weight':'bold'}).html('You clicked me!');

        });

    });

    </script>

</head>

<body>

    <input type="button" id="btn" value="Create A New Element"/>

    <div class="future">Already on page</div>

</body>

</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. vs 2013调试的时候重启的解决方案

    今天在用vs 2013 调试程序的时候,vs 总是莫名其妙的关闭,停止运行,泪蹦了..... 是什么原因呢? 以前的时候可是好好的啊,经过认真的思索,最近装过和vs 2013 相关的程序也只有 ref ...

  2. Semaphore — Windows API

    Semaphore是旗语的意思,在Windows中,Semaphore对象用来控制对资源的并发访问数.Semaphore对象具有一个计数值,当值大于0时,Semaphore被置信号,当计数值等于0时, ...

  3. HBase技术介绍

    HBase简介 HBase - Hadoop Database,是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBase技术可在廉价PC Server上搭建起大规模结构化存储集群. HB ...

  4. 什么是IP地址、子网掩码、路由和网关

    什么是IP地址.子网掩码.路由和网关?经常有朋友问我,的确这些术语常常被我们看到,今天就给大伙说说这几个术语的意思: 1.IP地址: IP地址有一个32位的连接地址,由4个8位字段组成,8位字段称为8 ...

  5. 零基础学习IOS开发（二）- 使用cocos2d-x3.0 执行Hello world

    关于开发框架,依据网上检索来的信息,感觉cocos2d-x的ios游戏开发框架非常不错,并且有非常强的可移植性,因此打算尝试一下. 截止写下此文章,最新的cocos2d-x的版本号为v3.0稳定版(几 ...

  6. [置顶] 【SQL】查询重复人名的次数并列出

    select count(姓名) as 重复次数,姓名from 某表 group by 姓名order by 重复次数 asc 首先,group by 姓名,可以将所有相同姓名的项集合在一起.然后,c ...

  7. WinSock IO模型 -- WSAEventSelect模型事件触发条件说明

    FD_READ事件 l  调用WSAEventSelect函数时,如果当前有数据可读 l  有数据到达时,并且没有发送过FD_READ事件 l  调用recv/recvfrom函数后,仍然有数据可读时 ...

  8. Android应用程序安装与Launcher启动机制

      以下资料摘录整理自老罗的Android之旅博客,是对老罗的博客关于Android底层原理的一个抽象的知识概括总结(如有错误欢迎指出)(侵删):http://blog.csdn.net/luoshe ...

  9. NYOJ-104最大和

    我看了好多博客,都是拿一维的做基础,一维的比较简单,所以要把二维的化成一维的,一维的题目大意:给了一个序列,求那个子序列的和最大,这时候就可以用dp来做,首先dp[i]表示第i个数能构成的最大子序列和 ...

  10. 关于ImageView加载出现OOM问题

    略感蛋疼,一直以为应该不是这个问题的,所以调试了一下午,后来测试了下如果在XML里面改变ImageView的src话会出现什么问题 结果如我预料,仍然是只能显示部分图片,因为之前有运行成功了,我也不清 ...