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

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

  -->

 <!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. tp5 关键字模糊查询 日期查询 小于大于某范围等查询的优点

    挺不错,用熟了这tp5封装的很方便. 类似上边一个查询多个操作,基本在model 一个方法搞定代码也不用很多, 首先要学会用scope  网上搜tp scope 有几个例子可以借鉴 model 内添加 ...

  2. Spring MVC <mvc:annotation-driven/>的作用

    一.mvc:annotation-driven的作用 Spring 3.0.x中使用了mvc:annotation-driven后,默认会帮我们注册默认处理请求,参数和返回值的类,其中最主要的两个类: ...

  3. golang之格式化fmt.Printf

    当使用fmt包打印一个数值时,我们可以用%d.%o或%x参数控制输出的进制格式,就像下面的例子: o := 0666 fmt.Printf("%d %[1]o %#[1]o\n", ...

  4. Linux 基础 目录介绍

    /bin           存放二进制可执行文件(ls  cat   clear)等等 ,常用基础命令在这个目录下 /etc           存放系统管理和配置文件   如 passwd   用 ...

  5. web开发工具flask中文英文书籍-持续更新

    web开发工具flask中文英文书籍-持续更新 python测试开发_AI命理关注 0.9222018.11.10 07:48:43字数 625阅读 885 python测试开发项目实战-目录 pyt ...

  6. DG环境恢复同步遇到报错ORA-00353ORA-00334以及ORA-00600[2619], [47745]

    问题说明 客户环境主库4节点RAC11.2.0.4,单实例DG环境,DG由于空间不足,导致同步中断,由于DG备库未应用的归档主库都再,本次恢复的方式,是开启dg mrp进程,自动同步追上主库. 以下遇 ...

  7. oracle_job进程相关学习测试

    Oracle cjq0进程测试 测试流程: .CJQ进程不存在 .模拟问题处理 .问题总结 一.问题现象 CJQ0进程不存在 [root@adg1 ~]# ps -ef|grep cjq root : ...

  8. github新建远程仓库初始化记录

    …or create a new repository on the command line echo "# 输出内容" >> README.md git init ...

  9. java开发中常用语(词汇)含义

    DAO:Data Access Objects(数据存取对象): DTO:Data Transfer Object: AR:active record:

  10. 什么是Familywise Error Rate

    1.什么是Familywise Error Rate(FWE or FWER) 定义:在一系列假设检验中,至少得出一次错误结论的概率. 换句话说,是造成至少一次Type I Error的概率.术语FW ...