地狱的镰刀

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数。

$("a").bind("click",function(){alert("ok");});

live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的

$("a").live("click",function(){alert("ok");});

delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

$("#container").delegate("a","click",function(){alert("ok");})

on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

差别：

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。

.delegate()则是更精确的小范围使用事件代理，性能优于.live()

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

用三种方式写光棒效果

一：js批量注册this的说法

当通过循环的方式注册事件的时候，在匿名函数的方法体中，必须使用this代表当前对象，不能使用数组名[i](对象名)。

js设置样式的两种方案：

1.this.style.属性名=“属性值”；

如果属性名：

background-color--------->backgroundColor

font-size---------->fontSize

2.this.style.cssText="属性名：属性值；font-size:50px"

eg:

<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>

    <script type="text/javascript">

 //用js的光棒效果

        /*  $(function(){

             var hu=document.getElementsByTagName("li");

             for(var i=0;i<hu.length;i++){

                 hu[i].onmouseover=function(){

                     //js方式设计样式  方式一 this.style.属性名=属性值。

                     //this.style.background="red";

                    // this.style.fontSize="40px";

                     //方式二：this.style.cssText="属性名:属性值"

                     this.style.cssText="background:pink;font-size:50px;";

                 };

                 hu[i].onmouseout=function(){

                     //方式一：

                     this.style.background="";

                     this.style.fontSize="20px";

                     //方式二：

                    // this.style.cssText="background:;font-size:20px;";

                 };

             }

用jq的两种方法：

//用jq的光棒效果  1.锁定li元素

$(function(){

    var hu=$("li");

   hu.mouseover(function(){

          $(this).css({"background":"pink","font-size":"50px"});

       }).mouseout(function(){

           this.style.background="";

             this.style.fontSize="20px";

       });

     });
//hover的光棒效果

      ji.hover(

      function(){

          $(this).css({"background":"pink","font-size":"50px"});

      },function(){

          this.style.background="";

             this.style.fontSize="20px";

 });

复杂动画:

//复杂动画

           $(function(){

               $("img").animate({width:"90%"},5000)

               .animate({height:"90%"},{queue:false,duration:5000})

               .animate({borderWidth:5},{queue:false,duration:5000});

           });

    </script>

  </head>    

  <body>

     <img src="img/1.jpg" style="width:100px; height:100px;display:none;"></img>

  </body>

简单动画：

<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>

    <script type="text/javascript">

    //简单动画

      $(function(){

            //$("img").show(5000,playDog);

            //$("img").fadeIn(5000,playDog);

            $("img").slideDown(5000,playDog);

        });

        function playDog(){

            alert("will is power");

        }

</script>

  </head>    

  <body>

     <img src="img/1.jpg" style="width:100px; height:100px;display:none;"></img>

  </body>

jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画的更多相关文章

  1. JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert( ...

  2. jquery中bind,live,delegate,on的区别

    这几种方法都是绑定事件用到的,但是他们之间有些差别 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 例如: <ul> <a href=" ...

  3. 【转】jQuery中.bind() .live() .delegate() .on()的区别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...

  4. jQuery中.bind() .live() .delegate() .on()的区别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...

  5. jQuery中bind() live() delegate() on() 的区别

    实例 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){aler ...

  6. jQuery中.bind() .live() .delegate() .on()区别

    $(selector).bind(event,data,function) $(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1 ...

  7. jQuery中bind方法和live方法区别解析

    Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...

  8. 谈 jquery中.band() .live() .delegate() .on()的区别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...

  9. 监视EntityFramework中的sql流转你需要知道的三种方式Log,SqlServerProfile, EFProfile

    大家在学习entityframework的时候,都知道那linq写的叫一个爽,再也不用区分不同RDMS的sql版本差异了,但是呢,高效率带来了差灵活性,我们 无法控制sql的生成策略,所以必须不要让自 ...

随机推荐

  1. 数字规律：Pascal‘s triangle

    Given an integer n, return the number of trailing zeroes in n!. Note: Your solution should be in pol ...

  2. 绕过网站安全狗拦截，上传Webshell技巧总结（附免杀PHP一句话）

    这篇文章我介绍一下我所知道的绕过网站安全狗上传WebShell的方法. 思路是:修改HTTP请求,构成畸形HTTP请求,然后绕过网站安全狗的检测. 废话不多说,切入正题.... 1.实验环境: Win ...

  3. python callable 函数

    callable(object) 中文说明:检查对象object是否可调用.如果返回True,object仍然可能调用失败:但如果返回False,调用对象ojbect绝对不会成功. 注意:类是可调用的 ...

  4. pandas 按照列A分组，将同一组的列B求和,生成新的Dataframe

    对于pandas中的Dataframe,如果需要按照列A进行分组,将同一组的列B求和,可以通过下述操作完成: df = df.groupby(by=['column_A'])['column_B']. ...

  5. 2786: [JSOI]Word Query电子字典

    2786: [JSOI]Word Query电子字典 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 3  Solved: 3[Submit][Statu ...

  6. 【蓝牙数据采集模块】-01-Sensor Controller 功能介绍

    一. CC2650芯片内部的结构框图如图,内部包含: 一个Cortex-M3主控制器,用来做整个芯片的功能与任务实现 一个Cortex-M0射频控制器,用来驱动RF相关电路 一个Sensor Cont ...

  7. Linux服务器开发/测试环境搭建-流程

    1.MariaDB yum 安装/初始化/授远程权限 yum安装 在MariaDB官网根据Linux系统查找您所需要的db版本:https://downloads.mariadb.org/mariad ...

  8. Notification的功能与用法

    Notification是显示在手机状态的通知——手机状态栏位于手机屏幕的最上方,那里一般显示了手机当前的网络状态.时间等.Notification所代表的是一种具有全局效果的通知,程序一般通过Not ...

  9. document.form.command.value

    问题:在一个JSP页面中需要多个提交按钮,每个按钮点击后需要把同一个form提交到不同的页面进行处理 解决:用JS. <html><head><title>一个表单 ...

  10. Coding 代码管理快速入门

    当项目创建好了之后,我们该如何上传代码到 coding 上呢?Coding 网站使用“ Git 仓库”(类似 github )来管理代码.其操作原理在于:利用 git 服务,将本地的项目目录下的文件同 ...