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>