切圖崽的自我修養－梳理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