切圖崽的自我修養(yǎng)－梳理Jquery API

JerryZou 發(fā)布于2019-08-19 18:44 / 2498人閱讀

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

前言

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

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

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

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

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

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

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

       $(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)
       });

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

     $("button").click(function(){
          $("This is a new paragraph.").insertAfter("button");
     });
     
     $("div").on("click",".newP",function(){
       $(this).slideToggle();
     });
     
 所以寫成這樣是無法觸發(fā)的
 
       $("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")都綁定了一個匿名回調(diào)函數(shù)，效率低，資源率占用高，性能很差.
我們可以利用事件向上冒泡的特性，只要在父元素上綁定一次事件處理的回調(diào)函數(shù)即可. 因為每次子元素產(chǎn)生事件，冒泡到父元素時父元素會判定事件源對象e.target，如果e.target==$(".btn")[0], 則觸發(fā)回調(diào)函數(shù).

Trigger用來模擬事件觸發(fā)

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

防止事件重復(fù)觸發(fā)

比如一個btn點擊之后會對某個元素開始一段動畫. 并且動畫過程期間，不再響應(yīng)btn的點擊，直到動畫調(diào)用完畢之后.
思路很簡單，對btn元素設(shè)定一個狀態(tài)標簽lock=0, 動畫調(diào)用期間設(shè)置lock為1,動畫完成的回調(diào)把lock設(shè)置成0. 每次點擊都判斷btn的狀態(tài)是否為可用.

Css animation回調(diào)

Jquery有animation方法能夠?qū)υ卦O(shè)置動畫，并且可以傳入callback作為動畫完成的回調(diào)
但是能否對寫在CSS文件中的動畫設(shè)置回調(diào)？
答案是肯定的

CSS 動畫播放時，會發(fā)生以下三個事件：

animationstart - CSS 動畫開始后觸發(fā)

animationiteration - CSS 動畫重復(fù)播放時觸發(fā)

animationend - CSS 動畫完成后觸發(fā)

我們只要對動畫元素監(jiān)聽這三個事件，就能對對應(yīng)的狀態(tài)設(shè)置回調(diào)函數(shù),比如

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

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

  ...

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

Css transition回調(diào)

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

GPU云服務(wù)器云服務(wù)器切圖崽 jquery api 圖像識別數(shù)學(xué)修養(yǎng) 梳理

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79942.html

發(fā)表評論

登陸后可評論

0條評論

JerryZou

男|高級講師

我要關(guān)注我要私信

TA的文章

LeetCode 423 從英文中重建數(shù)字[數(shù)組] HERODING的LeetCode之路

閱讀 1239·2021-11-25 09:43
21_09_25 C語言雜談

閱讀 1348·2021-09-26 09:55
搬瓦工VPS：高端線路，助力企業(yè)運營，10Gbps美國 cn2 gia，1Gbps香港cn2 gia

閱讀 2409·2021-09-10 11:20
前端基礎(chǔ)_CSS

閱讀 3377·2019-08-30 15:55
簡解Css3 - linear-gradient

閱讀 1453·2019-08-29 13:58
H5屏幕適配小總結(jié)

閱讀 1179·2019-08-29 12:36
《CSS揭秘》：切角效果

閱讀 2353·2019-08-29 11:18
ES6入門到進階（二）：循環(huán)、數(shù)組、對象

閱讀 3417·2019-08-26 11:47

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

切圖崽的自我修養(yǎng)－梳理Jquery API

相關(guān)文章