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

資訊專欄INFORMATION COLUMN

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

loonggg / 731人閱讀

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

前言 
梳理一下Jquery中還不太熟悉的API
Jquery事件綁定統(tǒng)一用on(摒棄掉之前的click,bind),解綁事件統(tǒng)一用off

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

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

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

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

語(yǔ)法糖，支持多個(gè)事件綁定不同的函數(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();
     });
     
 所以寫成這樣是無(wú)法觸發(fā)的
 
       $("button").click(function(){
              $("
This is a new paragraph.").insertAfter("button");
     });
     
     $(".newP").on("click",function(){
       $(this).slideToggle();
     });

針對(duì)是大量元素都綁定了同一事件的情況，建議采用事件委托的形式對(duì)事件進(jìn)行處理.
比如我們希望點(diǎn)擊$(".btn")會(huì)彈出彈框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")})

因?yàn)樵诖罅孔釉厣辖壥录?，相?dāng)于是每一個(gè)$(".btn")都綁定了一個(gè)匿名回調(diào)函數(shù)，效率低，資源率占用高，性能很差.
我們可以利用事件向上冒泡的特性，只要在父元素上綁定一次事件處理的回調(diào)函數(shù)即可. 因?yàn)槊看巫釉禺a(chǎn)生事件，冒泡到父元素時(shí)父元素會(huì)判定事件源對(duì)象e.target，如果e.target==$(".btn")[0], 則觸發(fā)回調(diào)函數(shù).

Trigger用來(lái)模擬事件觸發(fā) 
    $(".btn").trigger("click");
防止事件重復(fù)觸發(fā)

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

Css animation回調(diào)

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

CSS 動(dòng)畫播放時(shí)，會(huì)發(fā)生以下三個(gè)事件：

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

animationiteration - CSS 動(dòng)畫重復(fù)播放時(shí)觸發(fā)

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

我們只要對(duì)動(dòng)畫元素監(jiān)聽這三個(gè)事件，就能對(duì)對(duì)應(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)})

  ...

在動(dòng)畫完成后，會(huì)彈出彈框

Css transition回調(diào)

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

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

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

相關(guān)文章

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

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

    warnerwu 評(píng)論0 收藏0

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

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

    JerryZou 評(píng)論0 收藏0

  • 切圖崽的自我修養(yǎng)－－[BUILD]構(gòu)建工具思路梳理

    摘要：前言之前也是從過(guò)來(lái)的，到現(xiàn)在的中間有些問(wèn)題沒(méi)怎么細(xì)想，比如明明是構(gòu)建工具為什么調(diào)試總是要開啟一個(gè)服務(wù)之類的，現(xiàn)在就來(lái)簡(jiǎn)單梳理下思路最原始的構(gòu)建工具無(wú)非是這樣改動(dòng)了某個(gè)資源文件，要手動(dòng)運(yùn)行構(gòu)建命令才能重新構(gòu)建，重新構(gòu)建的時(shí)候構(gòu)建工具將所有資源 前言 之前也是從grunt/gulp/fis/過(guò)來(lái)的，到現(xiàn)在的webpack,中間有些問(wèn)題沒(méi)怎么細(xì)想，比如明明是構(gòu)建工具為什么調(diào)試總是要開啟一個(gè)h...

    wfc_666 評(píng)論0 收藏0

  • 切圖崽的自我修養(yǎng)－－[BUILD]構(gòu)建工具思路梳理

    摘要：前言之前也是從過(guò)來(lái)的，到現(xiàn)在的中間有些問(wèn)題沒(méi)怎么細(xì)想，比如明明是構(gòu)建工具為什么調(diào)試總是要開啟一個(gè)服務(wù)之類的，現(xiàn)在就來(lái)簡(jiǎn)單梳理下思路最原始的構(gòu)建工具無(wú)非是這樣改動(dòng)了某個(gè)資源文件，要手動(dòng)運(yùn)行構(gòu)建命令才能重新構(gòu)建，重新構(gòu)建的時(shí)候構(gòu)建工具將所有資源 前言 之前也是從grunt/gulp/fis/過(guò)來(lái)的，到現(xiàn)在的webpack,中間有些問(wèn)題沒(méi)怎么細(xì)想，比如明明是構(gòu)建工具為什么調(diào)試總是要開啟一個(gè)h...

    elina 評(píng)論0 收藏0

  • 切圖崽的自我修養(yǎng)－[HTTP] 部署WEB服務(wù)流程梳理

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

    Barry_Ng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<