DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery回調函數的定義及用法實例教程
jQuery回調函數的定義及用法實例教程
編輯:JQuery特效代碼     

本文實例講述了jQuery回調函數的定義及用法。分享給大家供大家參考。具體分析如下:

jQuery代碼中對回調函數有著廣泛的應用,對其有精准的理解是非常有必要的,下面就通過實例對此方法進行簡單的介紹。

代碼實例如下:

利用回調函數,當div全部隱藏之後彈出一個提示框。

代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cnblogs.com/" />
<title>博客園</title>
<style type="text/css">
div{
  height:150px;
  width: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.cnblogs.com/" />
<title>博客園</title>
<style type="text/css">
div{
  height:150px;
  width: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函數。

希望本文所述對大家的jquery程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved