地狱的镰刀

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

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

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

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

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

  1. $("#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:

  1. <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
  2.     <script type="text/javascript">
  3.  //用js的光棒效果
  4.         /*  $(function(){
  5.              var hu=document.getElementsByTagName("li");
  6.              for(var i=0;i<hu.length;i++){
  7.                  hu[i].onmouseover=function(){
  8.                      //js方式设计样式  方式一 this.style.属性名=属性值。
  9.                      //this.style.background="red";
  10.                     // this.style.fontSize="40px";
  11.                      //方式二：this.style.cssText="属性名:属性值"
  12.                      this.style.cssText="background:pink;font-size:50px;";
  13.                  };
  14.  
  15.                  hu[i].onmouseout=function(){
  16.                      //方式一：
  17.                      this.style.background="";
  18.                      this.style.fontSize="20px";
  19.                      //方式二：
  20.                     // this.style.cssText="background:;font-size:20px;";
  21.                  };
  22.              }

用jq的两种方法：

  1. //用jq的光棒效果  1.锁定li元素
  2. $(function(){
  3.     var hu=$("li");
  4.    hu.mouseover(function(){
  5.           $(this).css({"background":"pink","font-size":"50px"});
  6.        }).mouseout(function(){
  7.            this.style.background="";
  8.              this.style.fontSize="20px";
  9.        });
  10.      });
  1. //hover的光棒效果
  2.       ji.hover(
  3.       function(){
  4.           $(this).css({"background":"pink","font-size":"50px"});
  5.       },function(){
  6.           this.style.background="";
  7.              this.style.fontSize="20px";
  8.  });

复杂动画:

  1. //复杂动画
  2.            $(function(){
  3.                $("img").animate({width:"90%"},5000)
  4.                .animate({height:"90%"},{queue:false,duration:5000})
  5.                .animate({borderWidth:5},{queue:false,duration:5000});
  6.            });
  7.  
  8.     </script>
  9.   </head>    
  10.  
  11.   <body>
  12.      <img src="img/1.jpg" style="width:100px; height:100px;display:none;"></img>
  13.   </body>

简单动画：

  1. <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
  2.     <script type="text/javascript">
  3.     //简单动画
  4.       $(function(){
  5.             //$("img").show(5000,playDog);
  6.             //$("img").fadeIn(5000,playDog);
  7.             $("img").slideDown(5000,playDog);
  8.         });
  9.         function playDog(){
  10.             alert("will is power");
  11.         }
  12. </script>
  13.   </head>    
  14.  
  15.   <body>
  16.      <img src="img/1.jpg" style="width:100px; height:100px;display:none;"></img>
  17.   </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. Insert Select

    有三种用法 1.insert  values 2.insert select 3.inser exec

  2. Swift迁入第三方库时的版本错误解决

    我的swift的项目用的是swift 2.3的版本,但是用CocoaPods迁入一个第三方:ObjectMapper后,编译会出现这样一个问题: Use Legacy Swift Language V ...

  3. 3）Java学习笔记：内部类

    什么是内部类 内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public和 ...

  4. datalog

    https://en.wikipedia.org/wiki/Datalog http://www.csd.uoc.gr/~hy562/1112_spring/instr_material/WhatYo ...

  5. 那些年我们一起改过的bug

    ORA-01861: 文字与格式字符串不匹配 ORA-00936: 缺失表达式 ORA-01810 格式代码出现两次 ORA-01722: 无效数字 无效的列索引

  6. 阿里CEO张勇：阿里蚂蚁20亿元扶持开发者

    https://bbs.taobao.com/catalog/thread/508895-318032179.htm?spm=a21bo.7724922.8439-0.2.tkjSOl 阿里CEO张勇 ...

  7. iOS 之 线程和进程

    进程是系统调度单位,拥有自己的资源 线程是CPU调度的基本单位 进程的同步机制: 原子操作.信号量机制.自旋锁.分布式系统

  8. delphi假死线程堵塞解决办法

    Delphi的高效不多说... 俗话说:真正的程序员用C语言,聪明的程序员用Delphi,一点都不假,和C++比它比C++更简单,更容易上手,功能丝毫不逊色C++,比起VB,毫无疑问比VB好多了,重要 ...

  9. KERNEL32相关函数

    CALL DWord Ptr [<&KERNEL32.WriteFile>] kernel32.WriteFile 将数据写入一个文件,也可将这个函数应用于对通信设备.管道.套接字 ...

  10. 封装 INI 文件读写函数

    delphi读写ini文件实例 //--两个过程,主要实现:窗体关闭的时候,文件保存界面信息:窗体创建的时候,程序读取文件文件保存的信息. //--首先要uses IniFiles(单元) //--窗 ...