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

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

  -->

 <!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. （1）Spirng Boot 入门（笔记）

    文章目录 简介 优点 Hello World 打包成可执行 jar 细节探究 主程序类,主入口类上面的注解 自动生成的项目结构分析 简介 Spring Boot 帮助我们简化 Spring 应用开发: ...

  2. UVALive-8201-BBP Formula

    8201-BBP Formula Time limit: 3.000 seconds In 1995, Simon Plouffe discovered a special summation sty ...

  3. Linux基础-02-目录文件管理

    1. Linux文件系统的层次结构 1) Linux文件系统的树状结构: 在Linux或UNIX操作系统中,所有的文件和目录都被组织成一个以根节点开始的倒置的树状结构. 2) 目录的定义: 目录相当于 ...

  4. 【flume】5.采集日志进入hbase

    设置我们的flume配置信息 # Licensed to the Apache Software Foundation (ASF) under one # or more contributor li ...

  5. Springboot模板（thymeleaf、freemarker模板）

    目的: 1.thymeleaf模板 2.Freemarker模板 thymeleaf模板 thymeleaf 的优点: 支持html5标准,页面无须部署到servlet开发到服务器上,直接通过浏览器就 ...

  6. Spring Boot配置文件的加载顺序

    配置文件的加载顺序, 后加载的会覆盖先加载的:也就是properties配置文件的内容会替换掉.yml及.yaml文件的内容

  7. 《一头扎进》系列之Python+Selenium框架设计篇5 - 价值好几K的框架，哎呦！这个框架还真有点料啊！！！

    1. 简介 其实,到前面这一篇文章,简单的Python+Selenium自动化测试框架就已经算实现了.接下来的主要是介绍,unittest管理脚本,如何如何加载执行脚本,再就是采用第三方插件,实现输出 ...

  8. thrift原理与架构

    是什么: 一个RPC框架.

  9. springboot2.0+mybatis多数据源集成

    最近在学springboot,把学的记录下来.主要有springboot2.0+mybatis多数据源集成,logback日志集成,springboot单元测试. 一.代码结构如下 二.pom.xml ...

  10. ABP 基于DDD的.NET开发框架 学习（三）创建模块：任务管理

    1.图标i获取:https://material.io/icons/查看2.js中创建如var _tenantService = abp.services.app.tenant;需清除页面的缓存,按c ...