切图崽的自我修养－梳理Jquery API

前言

梳理一下Jquery中还不太熟悉的API

Jquery事件绑定统一用on(摒弃掉之前的click,bind),解绑事件统一用off

1. 语法糖，支持多个事件绑定同一个函数

        
        $("p").on("mouseover mouseout",function(){
          alert(1);
          });
          
   

2. 语法糖，支持多个事件绑定不同的函数

      
        
         $("p").on({
              mouseover:function(){alert(1)},  
              mouseout:function(){alert(2)}, 
           click:function(){alert(3)}  
            });
            
            

3. 语法糖，支持多个事件绑定不同的函数

          $(document).ready(function(){
            $("p").on("myOwnEvent", function(event, showName){
             $(this).text(showName + "! What a beautiful name!").show();
           });
           
            $("button").click(function(){
            $("p").trigger("myOwnEvent",["Anja"]);
            });
          });
          
   

4. 可以往callback里传参

          function callback(event){
            alert(event.data.msg);
          }
   
          $(document).ready(function(){
            $("p").on("click", {msg: "You just clicked me!"}, callback)
          });
   

5. 可以给未创建的DOM上绑定事件(只能采取事件委托的形式)

        $("button").click(function(){
             $("<p class="newP">This is a new paragraph.</p>").insertAfter("button");
        });
        
        $("div").on("click",".newP",function(){
          $(this).slideToggle();
        });
        
    所以写成这样是无法触发的
    
          $("button").click(function(){
                 $("<p class="newP">This is a new paragraph.</                p>").insertAfter("button");
        });
        
        $(".newP").on("click",function(){
          $(this).slideToggle();
        });
       

   针对是大量元素都绑定了同一事件的情况，建议采用事件委托的形式对事件进行处理.
   比如我们希望点击$('.btn')会弹出弹框alert("click me!");

      
          <div class="parent">
              <span class="btn">click me</span>
              <span class="btn">click me</span>
              <span class="btn">click me</span>
              <span>default</span> 
              <span>default</span> 
          </div>
      
      

   不建议 $('.btn').on('click',function(){alert('click me')})
   而是建议$('.parent').on('click','.btn',function(){alert('click me')})

   因为在大量子元素上绑事件，相当于是每一个$('.btn')都绑定了一个匿名回调函数，效率低，资源率占用高，性能很差.
   我们可以利用事件向上冒泡的特性，只要在父元素上绑定一次事件处理的回调函数即可. 因为每次子元素产生事件，冒泡到父元素时父元素会判定事件源对象e.target，如果e.target==$('.btn')[0], 则触发回调函数.

---

Trigger用来模拟事件触发

    $(".btn").trigger("click");
    

---

防止事件重复触发

比如一个btn点击之后会对某个元素开始一段动画. 并且动画过程期间，不再响应btn的点击，直到动画调用完毕之后.
思路很简单，对btn元素设定一个状态标签lock=0, 动画调用期间设置lock为1,动画完成的回调把lock设置成0. 每次点击都判断btn的状态是否为可用.

---

Css animation回调

Jquery有animation方法能够对元素设置动画，并且可以传入callback作为动画完成的回调
但是能否对写在CSS文件中的动画设置回调？
答案是肯定的

CSS 动画播放时，会发生以下三个事件：

1. animationstart - CSS 动画开始后触发

2. animationiteration - CSS 动画重复播放时触发

3. animationend - CSS 动画完成后触发

我们只要对动画元素监听这三个事件，就能对对应的状态设置回调函数,比如

.ani{
    width:30px;
    height:30px;
    background:red;
    animation:myani 5s}
    
@keyframes myani{
    100% {width:500px;}
   }
   
...

$('.ani').on('webkitAnimationEnd',function(){alert(111)})

  ...
  
<div class="ani"></div>

在动画完成后，会弹出弹框

---

Css transition回调

和Css animation 一样，播放完毕也会触发事件transitionEnd