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

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

  -->

 <!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. 从零开始学Flask框架-008

    数据库 安装Flask-SQLAlchemy扩展库 pip install flask-sqlalchemy 引入SQLAlchemy类 from flask_sqlalchemy import SQ ...

  2. 20191125：Python中的上下文管理机制with

    20191125:with上下文管理 with是一个上下文管理器,用于执行代码块所需要的运行的时候的上下文入口和出口.上下文管理器的典型用法包括保存和还原各种全局状态,锁定和解锁资源,关闭打开的文件等 ...

  3. 20191031：Python取反运算详解

    20191031:Python取反运算详解 取反运算:~3 == 4 1.对于数字 3 =======>转换为二进制表示为011 2.对011取反为100 3.为什么表示-4 a.计算机用补码表 ...

  4. Linux下实现web服务器

    说明:暂时只是实现了静态网页的响应 #include <stdio.h> #include <sys/types.h> /* See NOTES */ #include < ...

  5. Linux中request_irq()中断申请与处理说明

    1.  中断的理解 中断你可以理解为就是一种电信号,是由硬件设备产生的然后发送给处理器,处理器接收到中断后,就会马上向操作系统反映此信号,之后就是系统的工作了. 这里有两个注意的地方,第一中断是随时都 ...

  6. git彻底删除或变更子模块

    今天遇到一个很怪的问题,我想把我的一个子模块切换到另一个上游,我按照网上的方法删除子模块然后新建后,这个子模块依旧跟踪着我先前的上游.自己摸索了一下,可能方法比较傻,不过是可行的,希望能给大家一些帮助 ...

  7. 去除echarts饼状图的引导线

    series: { name: "流量占比分布", type: "pie", radius: ["40%", "60%" ...

  8. Vue基础语法(样式绑定,事件处理,表单,Vue组件)

    样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  9. flutter从入门到精通五

    在flutter的世界里,一切都是Widget,图像,文本,布局模型等等,一切都是Widget flutter中,尽量将Widget放在MaterialApp.其封装了所需要的一些Widget,Mat ...

  10. 天梯赛 L2-024. 部落

    题解:并查集,这里要用路径压缩来优化 代码:// 这里范围理错了, 浪费20分钟debug #include <set> #include <iostream> #includ ...