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

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的光棒效果  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({"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="100px; height:100px;display:none;"></img>
  </body>