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


Posted in Javascript onAugust 08, 2016

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回调函数例子(分享) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
yepnope.js 异步加载资源文件
Sep 08 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
KnockoutJs快速入门教程
May 16 Javascript
微信小程序 教程之引用
Oct 18 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 #Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 #Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 #Javascript
用js读写cookie的简单方法(推荐)
Aug 08 #Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 #Javascript
js中遍历Map对象的简单实例
Aug 08 #Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 #Javascript
You might like
PHP 采集程序原理分析篇
2010/03/05 PHP
php设计模式小结
2013/02/15 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
解析php中memcache的应用
2013/06/18 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
python中split方法用法分析
2015/04/17 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Python中如何引入第三方模块
2020/05/27 Python
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
打架检讨书400字
2014/01/17 职场文书
法制宣传实施方案
2014/03/13 职场文书
护士节策划方案
2014/05/19 职场文书
教师节活动总结
2014/08/29 职场文书
停车位租赁协议书
2014/09/24 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js