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

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

  -->

 <!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. Quartz.Net—Calendar

    动态的排除一些触发器的时间. DailyCalendar-天日历 定义: This implementation of the Calendar excludes (or includes - see ...

  2. Redis搭建Windows平台

    安装程序下载 从官网下载安装程序. https://redis.io/download https://github.com/MicrosoftArchive/redis/releases 新地址:h ...

  3. Python-19-元类

    一.定义 元类就是类的类 type是python的一个内建元类 类的两种定义方式 # 定义类的两种方式 class Foo(object): def __init__(self, name, age) ...

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

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

  5. AJAX一些注释掉的语句

    var sysdept=JSON.parse(localStorage.getItem("loginSysUser")); for(var o in sysdept){ alert ...

  6. 1. Spark基础解析

    1.1 Spark概述 1.1.1 什么是Spark 官网:http://spark.apache.org Spark是一种快速.通用.可扩展的大数据分析引擎,2009年诞生于加州大学伯克利分校AMP ...

  7. 匹配script标签及内容js代码的正则表达式

    <script>[\s\S]+?</script>

  8. git合并原则

    目前实验结果为: 假设有master和branch1,用master合并branch1时(在master分支中执行git merge branch1): 1.在同一个地方,master做了修改,bra ...

  9. centos可选的安装类型

    Desktop :基本的桌面系统,包括常用的桌面软件,如文档查看工具. Minimal Desktop :基本的桌面系统,包含的软件更少. Minimal :基本的系统,不含有任何可选的软件包. Ba ...

  10. jacascript Ajax 学习之 JQuery-Ajax

    jQuery 对 ajax 操作进行了封装,在 jQuery 中 $.ajax() 属性最底层的方法,第2层是 load().$.get() 和 $.post() 方法,第3层是 $.getScrip ...