在前面的章節中，我們也學習了一些 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 在語法上不是很嚴格，所以如果想要使用也是可以的，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291885.html
標籤：其他
上一篇：jQuery 簡介
下一篇：Nuxt學習總結