切圖崽的自我修養－梳理Jquery API

JerryZou 發布于2019-08-19 18:44 / 2491人閱讀

摘要：前言梳理一下中還不太熟悉的事件綁定統一用摒棄掉之前的解綁事件統一用語法糖，支持多個事件綁定同一個函數語法糖，支持多個事件綁定不同的函數語法糖，支持多個事件綁定不同的函數可以往里傳參可以給未創建的上綁定事件只能采取事件委托的形式所以寫成這樣是

前言

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

Jquery事件綁定統一用on(摒棄掉之前的click,bind),解綁事件統一用off

語法糖，支持多個事件綁定同一個函數

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

語法糖，支持多個事件綁定不同的函數

   
     
      $("p").on({
           mouseover:function(){alert(1)},  
           mouseout:function(){alert(2)}, 
        click:function(){alert(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"]);
         });
       });

可以往callback里傳參

       function callback(event){
         alert(event.data.msg);
       }

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

可以給未創建的DOM上綁定事件(只能采取事件委托的形式)

     $("button").click(function(){
          $("This is a new paragraph.").insertAfter("button");
     });
     
     $("div").on("click",".newP",function(){
       $(this).slideToggle();
     });
     
 所以寫成這樣是無法觸發的
 
       $("button").click(function(){
              $("This is a new paragraph.").insertAfter("button");
     });
     
     $(".newP").on("click",function(){
       $(this).slideToggle();
     });

針對是大量元素都綁定了同一事件的情況，建議采用事件委托的形式對事件進行處理.
比如我們希望點擊$(".btn")會彈出彈框alert("click me!");

   
       
           click me
           click me
           click me
           default 
           default

不建議 ~~$(".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 動畫播放時，會發生以下三個事件：

animationstart - CSS 動畫開始后觸發

animationiteration - CSS 動畫重復播放時觸發

animationend - CSS 動畫完成后觸發

我們只要對動畫元素監聽這三個事件，就能對對應的狀態設置回調函數,比如

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

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

  ...

在動畫完成后，會彈出彈框

Css transition回調

和Css animation 一樣，播放完畢也會觸發事件transitionEnd

云服務器 GPU云服務器切圖崽 jquery api 圖像識別數學修養梳理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79942.html

切圖崽的自我修養－梳理Jquery API

摘要：前言梳理一下中還不太熟悉的事件綁定統一用摒棄掉之前的解綁事件統一用語法糖，支持多個事件綁定同一個函數語法糖，支持多個事件綁定不同的函數語法糖，支持多個事件綁定不同的函數可以往里傳參可以給未創建的上綁定事件只能采取事件委托的形式所以寫成這樣是前言梳理一下Jquery中還不太熟悉的API Jquery事件綁定統一用on(摒棄掉之前的click,bind),解綁事件統一用off 語法...

warnerwu 2019-08-29 11:00 評論0 收藏0
切圖崽的自我修養－梳理Jquery API

摘要：前言梳理一下中還不太熟悉的事件綁定統一用摒棄掉之前的解綁事件統一用語法糖，支持多個事件綁定同一個函數語法糖，支持多個事件綁定不同的函數語法糖，支持多個事件綁定不同的函數可以往里傳參可以給未創建的上綁定事件只能采取事件委托的形式所以寫成這樣是前言梳理一下Jquery中還不太熟悉的API Jquery事件綁定統一用on(摒棄掉之前的click,bind),解綁事件統一用off 語法...

loonggg 2019-08-01 15:26 評論0 收藏0
切圖崽的自我修養－－[BUILD]構建工具思路梳理

摘要：前言之前也是從過來的，到現在的中間有些問題沒怎么細想，比如明明是構建工具為什么調試總是要開啟一個服務之類的，現在就來簡單梳理下思路最原始的構建工具無非是這樣改動了某個資源文件，要手動運行構建命令才能重新構建，重新構建的時候構建工具將所有資源前言之前也是從grunt/gulp/fis/過來的，到現在的webpack,中間有些問題沒怎么細想，比如明明是構建工具為什么調試總是要開啟一個h...

wfc_666 2019-08-20 12:14 評論0 收藏0
切圖崽的自我修養－－[BUILD]構建工具思路梳理

摘要：前言之前也是從過來的，到現在的中間有些問題沒怎么細想，比如明明是構建工具為什么調試總是要開啟一個服務之類的，現在就來簡單梳理下思路最原始的構建工具無非是這樣改動了某個資源文件，要手動運行構建命令才能重新構建，重新構建的時候構建工具將所有資源前言之前也是從grunt/gulp/fis/過來的，到現在的webpack,中間有些問題沒怎么細想，比如明明是構建工具為什么調試總是要開啟一個h...

elina 2019-08-01 15:55 評論0 收藏0
切圖崽的自我修養－[HTTP] 部署WEB服務流程梳理

摘要：前言關鍵字域名，備案服務器解析記錄配置流程你想在云端部署兩個服務，一個新聞站點，一個游戲門戶站點域名也已經想好了，是和用戶通過訪問能訪問到新聞站點，通過訪問能訪問游戲門戶站點首先，你需要上阿里云上買一個一級域名按照中國的相關法律規定，域名如前言: 關鍵字: 域名，備案, ip, 服務器, dns解析記錄配置流程: 你想在云端部署兩個web服務，一個新聞站點，一個游戲門戶站點. 域名...

Barry_Ng 2019-08-29 11:23 評論0 收藏0