一个超简单的jQuery回调函数例子(分享)

 更新时间:2016年08月08日 10:01:09   投稿:jingxian  
下面小编就为大家带来一篇一个超简单的jQuery回调函数例子(分享) 。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

jQuery回调函数简单使用

比如说,我们想要点击某个按钮后触发事件,

先把一些指定内容给隐藏掉,

然后跳出相关信息的对话框。

如果使用普通的方法,

不用回调函数的话,

会有怎么样的效果呢?

效果是先弹出对话框再隐藏内容,

然后再隐藏指定内容。

这显然不是我们想要的效果,

如果使用回调函数,就可以解决这个问题。

当然,回调函数功能远不只这么简单……

具体的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://"
      + request.getServerName() + ":" + request.getServerPort()
      + path + "/";
%>
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
  
    <title>My JSP 'MyJsp.jsp' starting page</title>
    <title>test</title>
    <script type="text/javascript" src="js/jQuery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#button1").click(function(){
          $("p").hide("slow");
           alert("不使用回调,先弹出对话框再隐藏!");
        })
        $("#button2").click(function(){
          $("p").hide("slow",function(){
            alert("使用回调函数,先隐藏再弹出对话框!");
          });    
        })
      })
    </script>
  </head>
  <body>
    <p>
      I love you,java.
      <br>
      I love you,java.
      <br>
      I love you,java.
      <br>
      I love you,java.
      <br>
      I love you,java.
      <br>
      I love you,java.
      <br>
      I love you,java.
      <br>
      I love you,java.
      <br>
      I love you,java.
      <br>
      I love you,java.
      <br>
      I love you,java.
      <br>
      I love you,java.
      <br>
      I love you,java.
    </p>
    <input id="button1" type="button" value="没使用回调函数!" />
    <input id="button2" type="button" value="使用回调函数!" />
  </body>
</html>

以上这篇一个超简单的jQuery回调函数例子(分享) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

相关文章

  • jQuery自动切换/点击切换选项卡效果的小例子

    jQuery自动切换/点击切换选项卡效果的小例子

    我们看到很多网站会有有错误404页面,当页面不存存时就会提示,然后过几秒就会自动跳到首页了,下面我来给大家举一个404错误页面跳到首页实例,有需要的朋友可以参考一下
    2013-08-08
  • 使用JQuery中的trim()方法去掉前后空格

    使用JQuery中的trim()方法去掉前后空格

    下面小编就为大家带来一篇使用JQuery中的trim()方法去掉前后空格。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • jquery 1.4.2发布!主要是性能与API

    jquery 1.4.2发布!主要是性能与API

    没想到jquery这次居然更新这么快,jquery1.4的教程我还没有发二周,jquery1.4.2就发布了。这次jquery1.4.2更新的内容主要是性能和新增了一些新的API。
    2010-02-02
  • jQuery轻松实现无缝轮播效果

    jQuery轻松实现无缝轮播效果

    这篇文章主要为大家详细介绍了jQuery轻松实现无缝轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 浅析jquery的js图表组件highcharts

    浅析jquery的js图表组件highcharts

    本篇文章主要是对jquery的js图表组件highcharts进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • jquery传参及获取方式(两种方式)

    jquery传参及获取方式(两种方式)

    这篇文章主要介绍了jquery传参及获取方式,本文给大家两种方式,通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • javascript原生和jquery库实现iframe自适应高度和宽度

    javascript原生和jquery库实现iframe自适应高度和宽度

    这篇文章主要介绍了javascript原生和jquery库实现iframe自适应内容高度和宽度,需要的朋友可以参考下
    2014-07-07
  • jQuery实现商品活动倒计时

    jQuery实现商品活动倒计时

    这篇文章主要介绍了jQuery实现商品活动倒计时,倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等,感兴趣的小伙伴们可以参考一下
    2015-10-10
  • 基于jQuery Ajax实现上传文件

    基于jQuery Ajax实现上传文件

    这篇文章主要为大家详细介绍了jQuery Ajax上传文件的相关代码,需要的朋友可以参考下
    2016-03-03
  • 使用jquery自定义鼠标样式满足个性需求

    使用jquery自定义鼠标样式满足个性需求

    浏览器是有自带的鼠标样式的,如果某些时候为了保持鼠标样式的统一,或者想指定特定的鼠标样式该怎么办呢?那就要使用自定义了,下面有个不错的示例,喜欢的朋友可以参考下
    2013-11-11

最新评论