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

jQuery回调函数简单使用

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

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

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

如果使用普通的方法，

不用回调函数的话，

会有怎么样的效果呢？

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

然后再隐藏指定内容。

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

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

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

具体的代码如下：

<%@ 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回调函数例子(分享) 就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery的load()方法及其回调函数用法实例

    本文实例讲述了jQuery的load()方法及其回调函数用法.分享给大家供大家参考.具体如下: 下面的js代码演示了jQuery的load()方法的使用,并演示了带回调函数(callback)的load方法的使用 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(fun

  • js的回调函数详解

    现在做native App  和Web App是主流,也就是说现在各种基于浏览器的web app框架也会越来越火爆了,做js的也越来越有前途.我也决定从后端开发渐渐向前端开发和手机端开发靠拢,废话不说了,我们来切入正题"js的回调函数"相关的东西. 说起回调函数,好多人虽然知道意思,但是还是一知半解.至于怎么用,还是有点糊涂.网上的一些相关的也没有详细的说一下是怎么回事,说的比较片面.下面我只是说说个人的一点理解,大牛勿喷.我们来看一下一个粗略的一个定义"函数a有一个参数,这

  • jQuery回调函数的定义及用法实例

    本文实例讲述了jQuery回调函数的定义及用法.分享给大家供大家参考.具体分析如下: jQuery代码中对回调函数有着广泛的应用,对其有精准的理解是非常有必要的,下面就通过实例对此方法进行简单的介绍. 代码实例如下: 利用回调函数,当div全部隐藏之后弹出一个提示框. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="a

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

    jQuery回调函数简单使用 比如说,我们想要点击某个按钮后触发事件, 先把一些指定内容给隐藏掉, 然后跳出相关信息的对话框. 如果使用普通的方法, 不用回调函数的话, 会有怎么样的效果呢? 效果是先弹出对话框再隐藏内容, 然后再隐藏指定内容. 这显然不是我们想要的效果, 如果使用回调函数,就可以解决这个问题. 当然,回调函数功能远不只这么简单-- 具体的代码如下: <%@ page language="java" import="java.util.*" p

  • 使用JSP制作一个超简单的网页计算器的实例分享

    使用JSP制作一个超简单的网页计算器的实例分享

    实现一个简单的计算器程序,要求:使用jsp+javabean模式实现. 项目源代码如下: 文件:calculator.jsp <%@ page language="java" pageEncoding="UTF-8"%> <%@ page isErrorPage="true"%> <%@ page errorPage="calculator.jsp" %> <%@ taglib uri

  • python3使用pyqt5制作一个超简单浏览器的实例

    我们使用的是QWebview模块,这里也主要是展示下QWebview的用法. 之前在网上找了半天的解析网页的内容,都不是很清楚. 这是核心代码: webview = Qwebview() webview.load(Qurl('http://www.cnblogs.com/Blaxon/')) webview.show() 完整代码(代码是拿的别的代码改得): from PyQt5.QtCore import * from PyQt5.QtWidgets import * from PyQt5.Q

  • jQuery 回调函数（callback）的使用和基础

    还是先贴代码吧 复制代码 代码如下: <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title></title>         <script src="js/jquery.js"></script>     </head> <style> bo

  • 浅谈jquery回调函数callback的使用

    回调函数必须是全局函数或者静态函数,不可定义为某个特定的类的成员函数 callback函数在当前动画100%完成之后执行 复制代码 代码如下: $("p").hide(1000); alert("the paragraph is now hidden"); <!--未使用回调函数,段落未完全隐藏时就弹出信息--> $("p").hide(1000,function(){alert("the paragraph is now

  • jQuery 自定义函数写法分享

    自定义主要通过两种方式实现$.extend({aa:function(){}});$.fn.extend({aa:function(){}});调用的方法分别是:$.aa();$($this).aa(); 注意:创建函数时不要放在 $(function() { }中,调用时候要放在事件里面$($this).click(function(){$.aa();}); jQuery.extend 函数详解JQuery的extend扩展方法:Jquery的扩展方法extend是我们在写插件的过程中常用的方

  • 一个很简单的jquery+xml+ajax的无刷新树结构(无css，后台是c#)

    复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.Linq; using System.Xml; using System.Xml.Linq; namespace WebApplication3 { public

  • 使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享

    我知道这些函数都是异步执行(asyncronously)并且会延迟一段时间返回,所以我想知道是否有一种方式,使我可以使用单个回调,并行地加载它们,就像JS加载器 curljs 所做的那样. 很幸运! 通过jQuery.when, 我可以并发地加载两个请求,只执行一次回调! jQuery 脚本正如我提到的,下面是加载脚本和一个JSON资源的用例: 复制代码 代码如下: $.when( $.getScript('/media/js/wiki-min.js?build=21eb633'),  $.ge

  • 超简单的jquery的AJAX用法

    包括POST,GET,AJAX 前台调用 复制代码 代码如下: jQuery.post("NewDoAjax.aspx", { max: ' N !', name: 'wsenmin' }, function(data) { alert(data) }); jQuery.get("NewDoAjax.aspx", { max: ' B !', name: 'wsenmin' }, function(data) { alert(data) }); var superM

随机推荐