让代码更简单

jQuery 回调函数和方法使用

重要:本文最后更新于2021-08-05 19:48:49,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

jQuery的方法几乎都有一个回调函数,这个 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>

在浏览器中演示效果:

jQuery 回调函数和方法使用

jQuery 回调函数和方法使用

再看一下如果不带 callback 回调函数,会有什么样的执行效果呢,如下为去掉回调函数的代码:

$(function(){
$("button").click(function(){
$(".rect").animate({width: '300px'}, 1500);
alert("回调函数");
});
});

在浏览器中的演示效果:

jQuery 回调函数和方法使用

jQuery 回调函数和方法使用

方法链接使用

在 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>
jQuery 回调函数和方法使用

jQuery 回调函数和方法使用

上述示例中,我们将 css()slideUp()slideDown() 等方法链接在一起使用,所以 .rect 元素首先会编程橙色,然后向上滑动隐藏元素,最后向下滑动展开元素。

要注意的是,当我们使用链接时,代码行会变得很差,但是 jQuery 在语法上不是很严格,所以如果想要使用也是可以的。

以上内容来自CSDN博客,学习记录,以便查阅。

感觉很棒!可以赞赏支持我哟~

0 打赏

评论 (0)

登录后评论
QQ咨询 邮件咨询