在前面的章節中,我們也學習了一些 jQuery
的方法,大家有沒有發現,這些方法大多都有一個共同點,就是有一個可選的 callback
參數,這個 callback
其實就是一個回調函數,回調函數作爲參數傳到另一個函數裏面,一旦事件發生或者某一個任務完成時被執行,經常在異步代碼中使用。
回調函數的使用
我們通過一個函數來舉例,看一下當任務執行完成時,是如何執行回調函數的。
示例:
例如在執行 animate
函數時添加一個回調函數作爲參數,在動畫執行完畢後調用回調函數,彈出彈出層:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$(".rect").animate({width: '300px'}, 1500,function(){ alert("回調函數") });
});
});
</script>
</head>
<body>
<div class="box">
<div class="rect" style="background: red;width: 100px;height: 100px;"></div>
</div>
<p><button>點擊執行動畫</button></p>
</body>
</html>
在瀏覽器中演示效果:
再看一下如果不帶 callback
回調函數,會有什麼樣的執行效果呢,如下爲去掉回調函數的代碼:
$(function(){
$("button").click(function(){
$(".rect").animate({width: '300px'}, 1500);
alert("回調函數");
});
});
在瀏覽器中的演示效果:
方法鏈接使用
在 jQuery
中允許我們將方法鏈接使用,也就是說可以在一條語句中使用多個 jQuery
方法,通過點號 .
鏈接。
示例:
我們來看一個例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$(".rect").css("background", "tomato").slideUp(1500).slideDown(1500);
});
});
</script>
</head>
<body>
<p><button>點擊按鈕</button></p>
<div class="rect" style="background: red;width: 100px;height: 100px;"></div>
</body>
</html>
演示效果:
上述示例中,我們將 css()
、slideUp()
、slideDown()
等方法鏈接在一起使用,所以 .rect
元素首先會編程橙色,然後向上滑動隱藏元素,最後向下滑動展開元素。
要注意的是,當我們使用鏈接時,代碼行會變得很差,但是 jQuery
在語法上不是很嚴格,所以如果想要使用也是可以的。