切图崽的自我修养－梳理Jquery API

warnerwu 发布于2019-08-29 11:00 / 1744人阅读

摘要：前言梳理一下中还不太熟悉的事件绑定统一用摒弃掉之前的解绑事件统一用语法糖，支持多个事件绑定同一个函数语法糖，支持多个事件绑定不同的函数语法糖，支持多个事件绑定不同的函数可以往里传参可以给未创建的上绑定事件只能采取事件委托的形式所以写成这样是

前言

梳理一下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 图像识别数学修养梳理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111354.html

切图崽的自我修养－梳理Jquery API

摘要：前言梳理一下中还不太熟悉的事件绑定统一用摒弃掉之前的解绑事件统一用语法糖，支持多个事件绑定同一个函数语法糖，支持多个事件绑定不同的函数语法糖，支持多个事件绑定不同的函数可以往里传参可以给未创建的上绑定事件只能采取事件委托的形式所以写成这样是前言梳理一下Jquery中还不太熟悉的API Jquery事件绑定统一用on(摒弃掉之前的click,bind),解绑事件统一用off 语法...

JerryZou 2019-08-19 18:44 评论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