<!-- 事件触发前后执行其他操作的三种方式：

 多适用于：公众号的订阅，有订阅的可以收到文章，没有订阅的收不到文章。

  -->

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>动画</title>

   <link rel="stylesheet" href="css/base.css">

   <style>

     .container {

       width: 400px;

       margin: 0 auto;

       background: #f0f;

     }

     button {

       width: 50%;

       height: 30px;

       text-align: center;

       float: left;

     }

     .box {

       width: 100%;

       height: 400px;

     }

   </style>

 </head>

 <body>

   <div class="container">

     <button class="show">显示</button>

     <button class="hide">隐藏</button>

     <div class="box"></div>

   </div>

   <script src="js/jquery.js"></script>

 <!-- 第一种方式：直接在JS事件触发前后 直接进行操作 -->

  <!--  <script>

    //静悄悄的显示

    var silent = {

      show:function($ele,showCallback,shownCallback){

        // $ele.html("<p>我在显示之前已经显示了</p>");

        if (typeof showCallback === 'function') showCallback();

        $ele.show();

        if (typeof shownCallback === 'function') shownCallback();

        // setTimeout(function(){

        //  $ele.html($ele.text() + "<p>我在box显示之后显示</p>")

        // },1000)

      },

      hide:function($ele){

        $ele.hide();

      }

    };

    var $box = $('.box');

    var $show = $('.show');

    var $hide = $('.hide');

    //单击显示$box

    $show.on('click',function(){

      silent.show($box,function(){

        $box.html("<p>我在显示之前已经显示了</p>");

      },function(){

        setTimeout(function(){

          $box.html($box.text() + "<p>我在box显示之后显示</p>")

        },1000)

      });

      // silent.show($box);

    })

    //单击显示$box

    $hide.on('click',function(){

      silent.hide($box);

    })

  </script> -->

 <!-- 第二种方式：事件触发前后的操作，封装成两个函数，分别放于事件触发前后 -->

  <!--  <script>

   //静悄悄的显示

   var silent = {

     show:function($ele){

       $ele.html("<p>我在显示之前已经显示了</p>");

       $ele.show();

       setTimeout(function(){

         $ele.html($ele.html() + "<p>我在box显示之后显示</p>");

       },1000);

     },

     hide:function($ele){

       $ele.hide();

     }

   };

   var $box = $('.box');

   var $show = $('.show');

   var $hide = $('.hide');

   //单击显示$box

   $show.on('click',function(){

     silent.show($box);

   })

   //单击显示$box

   $hide.on('click',function(){

     silent.hide($box);

   })

   </script> -->

 </body>

 </html>

 <!-- 第三种方式：事件触发前后的操作，使用trigger触发已经封装好的函数 -->

 ===================

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>动画</title>

   <!-- 一定要引入jQuery.js文件，否则无法运行 -->

   <link rel="stylesheet" href="css/base.css">

   <style>

     .container {

       width: 400px;

       margin: 0 auto;

       background: #f0f;

     }

     button {

       width: 50%;

       height: 30px;

       text-align: center;

       float: left;

     }

     .box {

       width: 100%;

       height: 400px;

     }

   </style>

 </head>

 <body>

   <div class="container">

     <button class="show">显示</button>

     <button class="hide">隐藏</button>

     <div class="box"></div>

   </div>

   <script src="js/jquery.js"></script>

   <script>

     //静悄悄的显示

     var silent = {

       show:function($ele){

         //$ele显示之前触发$ele的show事件，所以要在外面给对象$ele绑定show事件

         $ele.trigger('show');

         $ele.show();

         //$ele显示之后触发$ele的shown事件，所以要在外面给对象$ele绑定shown事件

         $ele.trigger('shown');

       },

       hide:function($ele){

         //$ele隐藏之后触发$ele的hide事件，所以要在外面给对象$ele绑定hide事件

         $ele.trigger('hide');

         $ele.hide();

         //$ele隐藏之后触发$ele的hiden事件，所以要在外面给对象$ele绑定hiden事件

         $ele.trigger('hiden');

       }

     };

     var $box = $('.box');

     var $show = $('.show');

     var $hide = $('.hide');

     //单击显示按钮 显示$box

     $show.on('click',function(){

       silent.show($box);

     })

     //单击隐藏按钮 隐藏$box

     $hide.on('click',function(){

       silent.hide($box);

     })

     //这里只是进行对象事件的绑定而已。绑定了四个事件，可以使用 e.type 进行判断具体执行哪个事件，从而执行相应的操作。

     //该函数可以定义多次，执行其他操作。这是第一次定义：改变对象的html内容

     //该函数定义多次，就执行多次，如console.log(e.type)就输出多次。

     $box.on('show shown hide hiden',function(e){

       //两个都是$box对象，这里只能使用$box，为什么不能使用$(this)呢？

       console.log( $(this));

       console.log( $box);

       //每次触发事件时，判断其类型，指定对应类型的代码

       if (e.type === 'show') {

         $box.html('我在显示之前已经显示了');

       }else if (e.type === 'shown') {

         setTimeout(function(){

           $box.html($box.html() + "<p>我在显示之后再显示</p>")

         },1000);

       }

     })

     //这里只是进行对象事件的绑定而已。绑定了四个事件，可以使用 e.type 进行判断具体执行哪个事件，从而执行相应的操作。

     //该函数可以定义多次，执行其他操作。这是第二次定义：改变对象的背景颜色

     //该函数定义多次，就执行多次，如console.log(e.type)就输出多次。

     $box.on('show shown hide hiden',function(e){

       console.log(e.type);

       //两个都是$box对象，这里只能使用$box，为什么不能使用$(this)呢？

       console.log( $(this));

       console.log( $box);

       //每次触发事件时，判断其类型，指定对应类型的代码

       if (e.type === 'show') {

         $box.css({background:'#f0f'});

       }else if (e.type === 'shown') {

         setTimeout(function(){

           $box.css({background:'#00f'});

         },2000);

       }else if (e.type === 'hide') {

         alert('在隐藏$box之前，跳出一个提示框');

       }else if (e.type === 'hiden') {

         setTimeout(function(){

           var p = document.createElement('div');

           var textNode = document.createTextNode('这是隐藏$box，1秒后显示的内容');

           p.appendChild(textNode);

           document.getElementsByTagName('body')[0].appendChild(p);

         },1000);

       }

     })

   </script>

 </body>

 </html>

jQuery事件触发前后进行其他的操作的更多相关文章

  1. jQuery事件触发和参数传递

    jQuery事件触发和参数传递: 参考:http://www.jb51.net/article/36249.htm <%@ page language="java" impo ...

  2. 解决jQuery中dbclick事件触发两次click事件

    首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...

  3. 第77天：jQuery事件绑定触发

    一.元素操作 1. 高度和宽度 $(“div”).height(); // 高度 $(“div”).width(); // 宽度 .height()方法和.css(“height”)的区别: 返回值不 ...

  4. 2016/2/26 jQuery的技术 1，安装 2，语法选择器$ 事件触发 3，常用jQuery函数

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  5. js进阶 12-14 jquery的事件触发函数是哪两个

    js进阶 12-14 jquery的事件触发函数是哪两个 一.总结 一句话总结:trigger和triggerHandler 1.trigger传额外参数时候的注意事项是什么? 注意样例中是三个参数 ...

  6. jquery事件和动画操作集锦

    一,事件 1,加载事件 1 2 3 4 5 6 $(document).ready(function(){   //todo }); //dom准备就绪后执行ready里面的函数,此时dom对应的相关 ...

  7. JQuery操作样式以及JQuery事件机制

    1.操作样式     1.1 css的操作     功能:设置或者修改样式,操作的是style属性 操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...

  8. 19 01 16 jquery 的 属性操作 循环 jquery 事件 和事件的绑定 解绑

    jquery属性操作 1.html() 取出或设置html内容 // 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').htm ...

  9. jQuery 事件操作

    入口函数 使用$(document).ready(()=>{})作为jQuery入口函数,与window.onload(()=>{})类似,但它不会等待图片等外部资源的加载完毕,而是在HT ...

随机推荐

  1. AVR单片机教程——序言

    我一直觉得现在的网络环境对电子技术的学习有一点问题,但始终无法确切地指出,更何况网络上相关资源已经那么丰富. 但我觉得是问题的,无论它到底是不是问题,对我来说总归是一个问题.我学习也不算深入,很多东西 ...

  2. spring 条件化配置

    步骤一: 实现接口:org.springframework.context.annotation.Condition import org.springframework.context.annota ...

  3. window服务器查看管理员列表

    快捷键win+R 输入cmd并进入 输入指令net localgroup administrators

  4. CF858F Wizard's Tour

    也许更好的阅读体验 \(\mathcal{Description}\) 给定一张 \(n\) 个点 \(m\) 条边的无向图,每条边连接两个顶点,保证无重边自环,不保证连通. 你想在这张图上进行若干次 ...

  5. Java版Kafka使用及配置解释

    Java版Kafka使用及配置解释 一.Java示例 kafka是吞吐量巨大的一个消息系统,它是用scala写的,和普通的消息的生产消费还有所不同,写了个demo程序供大家参考.kafka的安装请参考 ...

  6. hdu 6185 递推+矩阵快速幂

    思路:考虑全部铺满时,前2列的放法.有如下5种情况:(转自http://blog.csdn.net/elbadaernu/article/details/77825979 写的很详细 膜一下)  假设 ...

  7. Asp.Net进阶/管家模式+发布订阅模式：练习

    现在需要实现一个需求:我需要在一个窗体中发送一个信息,其余几个窗体都能同时接收到发送的消息. 1.界面:一个管家窗体,1个主窗体,2个订阅者窗体.其中管家窗体为启动窗体. 2.订阅:2个订阅窗体订阅主 ...

  8. nodejs中使用mongodb

    /** * 使用mongodb存储数据 * 1 首先安装mongodb nodejs插件 npm install mongodb --save-dev * 2 安装express (非必须) * * ...

  9. jQuery的显示和隐藏

    在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法. 隐藏例子: <! ...

  10. Pandas-数据处理-基础部分

    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/11014882.html  jupyter 代码 ...