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

Posted 2020-09-01 会飞的豆子

 

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:

 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              }

 

(2)用jq的两种方法：

 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              }

 

 

 

  二： 动画

  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()）

 

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

 

 

 

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