zoukankan      html  css  js  c++  java
  • Jquery回调函数应用实例解析

      jQuery代码中对回调函数有着广泛的应用,对其有精准的理解是非常有必要的,下面就通过实例对此方法进行简单的介绍。

    代码实例如下:

    利用回调函数,当div全部隐藏之后弹出一个提示框。

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset=" utf-8">
    
    <meta name="author" content="http://www.jb51.net/" />
    
    <title>回调函数</title>
    
    <style type="text/css">
    
    div{
    
      height:150px;
    
      150px;
    
      background-color:green;
    
      margin-top:10px;
    
    }
    
    </style>
    
    <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
    
    <script type="text/javascript"> 
    
    $(document).ready(function(){ 
    
      $("button").click(function(){ 
    
        $("div").slideUp(2000,function(){alert("隐藏完毕")}); 
    
      }) 
    
    }) 
    
    </script>
    
    </head>
    
    <body>
    
    <div></div>
    
    <button>点击查看效果</button>
    
    </body>
    
    </html>

      上面的代码运行非常良好,很有次序。在很多实际应用中往往希望让代码完成某个动作以后再去做另一个动作。
    代码貌似应执行的效果应该和上面代码是一样的,但是运行结果且并非我们所预料,而是先弹出提示框,然后再隐藏div元素。这并不是说slideUp()没有开始执行。

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset=" utf-8">
    
    <meta name="author" content="http://www.jb51.net/" />
    
    <title>回调函数</title>
    
    <style type="text/css">
    
    div{
    
      height:150px;
    
      150px;
    
      background-color:green;
    
      margin-top:10px;
    
    }
    
    </style>
    
    <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
    
    <script type="text/javascript"> 
    
    $(document).ready(function(){ 
    
      $("button").click(function(){ 
    
        $("div").slideUp(2000); 
    
        alert("隐藏完毕"); 
    
      }) 
    
    }) 
    
    </script>
    
    </head>
    
    <body>
    
    <div></div>
    
    <button>点击查看效果</button>
    
    </body>
    
    </html>
    

      下面简单通俗的总结一下什么是回调函数。看下面这段代码:

    function a(){alert("我是一个函数")}
    
    a();
    

      以上是最常用的调用函数的方式,用函数的实现直接调用,而回调函数却不是这样的,它是将自己的地址作为参数传递给另一个函数,当发生特定的事件的时候就会使用作为参数传递过来的回调函数地址来调用回调函数。就拿上面使用回调函数的那个代码来说,它是把function函数的地址作为参数传递给slideUp()方法,当slideUp()动作完成之后,就会通过传过来的地址参数调用function函数。

    --------------------------------------------------------------------------------------------------------------------------------------------------------------

    本文转载自:http://www.jb51.net/article/58862.htm

  • 相关阅读:
    净化心灵的诗歌--《当你老了》
    慎在信号的handler中嵌入复杂的逻辑
    windows远程ssh与scp操作linux
    Java Annotation(Java 注解)
    HTML5实现的类似百度文库,豆丁在线文档阅读
    FreeMarker VS Velocity(freemarker模板引擎和velocity模板引擎比较)
    J2EE牛人或者老的JAVA程序员进来帮忙指点一二,小弟很迷茫_Baidu知道
    模仿Hibernate的逆向工程_java版_源码下载
    Adobe Photoshop CS6_下载_补丁
    lucene in action_index and search
  • 原文地址:https://www.cnblogs.com/yt4561761/p/6986886.html
Copyright © 2011-2022 走看看