• jQuery事件触发前后进行其他的操作


      1 <!-- 事件触发前后执行其他操作的三种方式:
      2 多适用于:公众号的订阅,有订阅的可以收到文章,没有订阅的收不到文章。
      3  -->
      4 <!DOCTYPE html>
      5 <html lang="en">
      6 <head>
      7   <meta charset="UTF-8">
      8   <title>动画</title>
      9   <link rel="stylesheet" href="css/base.css">
     10   <style>
     11     .container {
     12       width: 400px;
     13       margin: 0 auto;
     14       background: #f0f;
     15     }
     16     button {
     17       width: 50%;
     18       height: 30px;
     19       text-align: center;
     20       float: left;
     21     }
     22     .box {
     23       width: 100%;
     24       height: 400px;
     25     }
     26   </style>
     27 </head>
     28 <body>
     29   <div class="container">
     30     <button class="show">显示</button>
     31     <button class="hide">隐藏</button>
     32     <div class="box"></div>
     33   </div>
     34   <script src="js/jquery.js"></script>
     35 
     36 <!-- 第一种方式:直接在JS事件触发前后 直接进行操作 -->
     37  <!--  <script>
     38    //静悄悄的显示
     39    var silent = {
     40      show:function($ele,showCallback,shownCallback){
     41        // $ele.html("<p>我在显示之前已经显示了</p>");
     42        if (typeof showCallback === 'function') showCallback();
     43        $ele.show();
     44        if (typeof shownCallback === 'function') shownCallback();
     45        // setTimeout(function(){
     46        //  $ele.html($ele.text() + "<p>我在box显示之后显示</p>")
     47        // },1000)
     48      },
     49      hide:function($ele){
     50        $ele.hide();
     51      }
     52    };
     53  
     54    var $box = $('.box');
     55    var $show = $('.show');
     56    var $hide = $('.hide');
     57    //单击显示$box
     58    $show.on('click',function(){
     59      silent.show($box,function(){
     60        $box.html("<p>我在显示之前已经显示了</p>");
     61      },function(){
     62        setTimeout(function(){
     63          $box.html($box.text() + "<p>我在box显示之后显示</p>")
     64        },1000)
     65      });
     66  
     67      // silent.show($box);
     68    })
     69    //单击显示$box
     70    $hide.on('click',function(){
     71      silent.hide($box);
     72    })
     73  </script> -->
     74 
     75 <!-- 第二种方式:事件触发前后的操作,封装成两个函数,分别放于事件触发前后 -->
     76  <!--  <script>
     77   //静悄悄的显示
     78   var silent = {
     79     show:function($ele){
     80       $ele.html("<p>我在显示之前已经显示了</p>");
     81       $ele.show();
     82       setTimeout(function(){
     83         $ele.html($ele.html() + "<p>我在box显示之后显示</p>");
     84       },1000);
     85       
     86     },
     87     hide:function($ele){
     88       $ele.hide();
     89     }
     90   };
     91   
     92   var $box = $('.box');
     93   var $show = $('.show');
     94   var $hide = $('.hide');
     95   //单击显示$box
     96   $show.on('click',function(){
     97     silent.show($box);
     98   })
     99   //单击显示$box
    100   $hide.on('click',function(){
    101     silent.hide($box);
    102   })
    103   </script> -->
    104 </body>
    105 </html>
    106 <!-- 第三种方式:事件触发前后的操作,使用trigger触发已经封装好的函数 -->
    107 ===================
    108 <!DOCTYPE html>
    109 <html lang="en">
    110 <head>
    111   <meta charset="UTF-8">
    112   <title>动画</title>
    113   <!-- 一定要引入jQuery.js文件,否则无法运行 -->
    114   <link rel="stylesheet" href="css/base.css">
    115   <style>
    116     .container {
    117       width: 400px;
    118       margin: 0 auto;
    119       background: #f0f;
    120     }
    121     button {
    122       width: 50%;
    123       height: 30px;
    124       text-align: center;
    125       float: left;
    126     }
    127     .box {
    128       width: 100%;
    129       height: 400px;
    130     }
    131   </style>
    132 </head>
    133 <body>
    134   <div class="container">
    135     <button class="show">显示</button>
    136     <button class="hide">隐藏</button>
    137     <div class="box"></div>
    138   </div>
    139   <script src="js/jquery.js"></script>
    140   <script>
    141     //静悄悄的显示
    142     var silent = {
    143       show:function($ele){
    144         //$ele显示之前触发$ele的show事件,所以要在外面给对象$ele绑定show事件
    145         $ele.trigger('show');
    146         $ele.show();
    147         //$ele显示之后触发$ele的shown事件,所以要在外面给对象$ele绑定shown事件
    148         $ele.trigger('shown');
    149       },
    150       hide:function($ele){
    151         //$ele隐藏之后触发$ele的hide事件,所以要在外面给对象$ele绑定hide事件
    152         $ele.trigger('hide');
    153         $ele.hide();
    154         //$ele隐藏之后触发$ele的hiden事件,所以要在外面给对象$ele绑定hiden事件
    155         $ele.trigger('hiden');
    156       }
    157     };
    158     var $box = $('.box');
    159     var $show = $('.show');
    160     var $hide = $('.hide');
    161     //单击显示按钮 显示$box
    162     $show.on('click',function(){
    163       silent.show($box);
    164     })
    165     //单击隐藏按钮 隐藏$box
    166     $hide.on('click',function(){
    167       silent.hide($box);
    168     })
    169 
    170     //这里只是进行对象事件的绑定而已。绑定了四个事件,可以使用 e.type 进行判断具体执行哪个事件,从而执行相应的操作。
    171     //该函数可以定义多次,执行其他操作。这是第一次定义:改变对象的html内容
    172     //该函数定义多次,就执行多次,如console.log(e.type)就输出多次。
    173     $box.on('show shown hide hiden',function(e){
    174       //两个都是$box对象,这里只能使用$box,为什么不能使用$(this)呢?
    175       console.log( $(this));
    176       console.log( $box);
    177 
    178       //每次触发事件时,判断其类型,指定对应类型的代码
    179       if (e.type === 'show') {
    180         $box.html('我在显示之前已经显示了');
    181       }else if (e.type === 'shown') {
    182         setTimeout(function(){
    183           $box.html($box.html() + "<p>我在显示之后再显示</p>")
    184         },1000);
    185       }
    186     })
    187 
    188     //这里只是进行对象事件的绑定而已。绑定了四个事件,可以使用 e.type 进行判断具体执行哪个事件,从而执行相应的操作。
    189     //该函数可以定义多次,执行其他操作。这是第二次定义:改变对象的背景颜色
    190     //该函数定义多次,就执行多次,如console.log(e.type)就输出多次。
    191     $box.on('show shown hide hiden',function(e){
    192       console.log(e.type);
    193       //两个都是$box对象,这里只能使用$box,为什么不能使用$(this)呢?
    194       console.log( $(this));
    195       console.log( $box);
    196 
    197       //每次触发事件时,判断其类型,指定对应类型的代码
    198       if (e.type === 'show') {
    199         $box.css({background:'#f0f'});
    200       }else if (e.type === 'shown') {
    201         setTimeout(function(){
    202           $box.css({background:'#00f'});
    203         },2000);
    204       }else if (e.type === 'hide') {
    205         alert('在隐藏$box之前,跳出一个提示框');
    206       }else if (e.type === 'hiden') {
    207         setTimeout(function(){
    208           var p = document.createElement('div');
    209           var textNode = document.createTextNode('这是隐藏$box,1秒后显示的内容');
    210           p.appendChild(textNode);
    211           document.getElementsByTagName('body')[0].appendChild(p);
    212         },1000);
    213       }
    214     })
    215   </script>
    216 </body>
    217 </html>
  • 相关阅读:
    Java学习---Java代码编写规范
    移动端与Web端疫情数据展示
    Java实现邮箱验证码
    Java实现短信验证码
    利用Jsoup爬取新冠疫情数据并存至数据库
    echarts全国疫情统计可视化地图(第一阶段)
    构建之法阅读笔记04
    HDU 4628 Pieces(状压DP)题解
    ZOJ 2563 Long Dominoes(状压DP)题解
    POJ 2288 Islands and Bridges(状压DP)题解
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/11341983.html
Copyright © 2020-2023  润新知