媒介

梳理一下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