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

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版本整合了之前的三种方式的新事件绑定机制

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

一.用三种方式写光棒效果

(1)：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;";
                  };
              }

(2)用jq的两种方法：

 <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;";
                  };
              }

二： 动画

1.

(1)show()将元素display样式设置为先前的显示状态(block,inline);hide()将display样式设置为none,导致隐藏。

可以加参数fast,slow,normal,时间整数(毫秒)。

(2)fadeOut()改到透明度到消失，fadeIn()相反。

(3)slideDown()向下显示，slideUp()向上隐藏。

(4)animate(params,speed,callback)自定义动画，params为样式如{property1:"value1",property2:"value2"}

speed速度，可选；callback动画执行完执行的函数，可选。

eg：

$('input').bind('click', function () {      if ($(this).is(':visible')) {//如果内容为显示       $(this).hide();      } else {       $(this).show();      }     })

2.切换元素可见状态（toggle()）

 #panel
 {
     position:relative;
     width:100px;
     height:300px;
     border:1px solid #0050D0;
     background:#96e555;
     cursor:pointer;
 }
 html代码：
 <div id="panel"></div>
 jQuery代码：
 $("#panel").click(function () {
     $(this).animate({ left: "+=500px" }, 3000) //累计从左移动，先执行
     .animate({ height: "-=100px" }, 2000) //累计减少高度，后执行
     .animate({ opacity: "0.5" }, 3000)//透明度降低到0.5
     .fadeOut("slow", function () { //动画都可以带有回调函数
         $(this).css("display", "block");   //显示,css方法不加入到动画队列，因此在callback中
         $(this).animate({ opacity: "1" }, 3000); //改变透明度
     });
 });

 

(1)+=和-=可以累计改变属性的值，如果直接写数字则改变一次。

(2)animate中的left是从左，top是从上；

(3)css()方法不会加入到动画队列，而是立即执行。

(4)将多个属性放到animate中会同时执行这些动画。

3,停止动画和判断是否正在动画

(1)stop[clearQueue][gotoEnd]);可选参数,true或false;clearQueue是否要清空未执行的动画队列；gotoEnd代表

是否直接跳转到 当前动画 的末状态。 如果直接使用stop()就停止当前正在进行的动画，后面的动画继续。

(2)hover(enter,leave)是鼠标悬停事件,进入执行enter，出来执行leave;下面的例子防止动画效果与鼠标不一致：

如果有多个动画，想在enter时停止，可以将参数clearQueue设为true ,像这样stop(true)

stop(false,true)让当前动画直接到末状态。

stop(true,true)让当前动画直接到末状态，并清空动画队列。

(3)判断是否处于动画状态

(4)延迟动画  delay(1000)  延迟1秒。

简单动画：

 

<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>