jQuery 回调函数和方法链接使用
在前面的章节中,我们也学习了一些 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
在语法上不是很严格,所以如果想要使用也是可以的。
jQuery 回调函数和方法链接使用相关推荐
- jQuery回调函数
1.引言 今天在学习<jQuery基础教程>在学习编写插件的时候,书中说利用回调函数来当参数,会极大的提高程序的灵活性.对回调函数很陌生.研究了一下给的示例程序.感觉对回调函数有了基本的了 ...
- html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...
- [转]在C#中使用API回调函数的方法
在C#中使用API回调函数的方法 就以EnumChildWindows和EnumChildProc为例子: 首先要声明EnumChildProc 为一个回调函数 public delegate boo ...
- C语言程序设计之回调函数实现方法
回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定 ...
- html 两个iframe重叠,解决同一页面中两个iframe互相调用jquery,js函数的方法
这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: b.html中有一个treeview,称为左菜单i ...
- c语言变长参数 第一个参数必须吗,一种使用变长参数为C程序构造灵活回调函数的方法...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 int twice(void *arg, va_list ap) { apply_func *func = va_arg(ap, apply_func * ...
- c语言函数可变长参数,一种使用变长参数为C程序构造灵活回调函数的方法
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 int twice(void *arg, va_list ap) { apply_func *func = va_arg(ap, apply_func * ...
- mini-ui 中的message弹出框中点击确定与取消之后使用回调函数的方法
1.在main.js中引入//引入import { MessageBox } from 'mint-ui';MessageBox.confirm('', { message: '您确定提交订单吗?', ...
- wepy里面两种不同的写回调函数的方法
方案一const getHelpCenter = createAction(GET_HELP_CENTER, () => request('api/hisense/article/menu/li ...
最新文章
- simulink中错误object[id]!=NULL Component: Simulink | Category:Model error
- 惹怒程序员的十件事!需求变更居然不被排第一!
- 优秀!港大同济伯克利提出Sparse R-CNN: 目标检测新范式
- 佳能MG2580S清零
- python一键电影搜索与下载
- TM1620 led显示芯片用stm8来驱动
- 【数据结构】给定中序序列,有多少种前序序列
- 计算机应用技术和it有什么区别,IT是程序员吗?IT究竟是什么意思?
- 反思抑郁症的原因:抑郁症能否遗传?
- python读取单元格前几个字的值_EXCEL表格中怎么取前一单元格中的前几个字符
- 封装link或style中的css规则
- 大数据入门级介绍(一)
- windows电脑cmd命令查看网卡的物理地址(mac地址)
- 硬盘分区MBR和GPT知识详解
- 中国1-甲基环丙烯市场现状研究分析与发展前景预测报告(2022)
- android4.1动态壁纸,Android 4.1 设置默认开机动态壁纸
- Bayesian Face Revisited: A Joint Formulation论文笔记
- JSP实现在线投票系统
- usb相关资料整理(一)
- hz什么梗_电脑上的HZ是什么意思?有什么用?
热门文章
- 索尼android sd卡上,16GB内存 支持microSD卡存储扩展_索尼 Xperia SP_手机Android频道-中关村在线...
- 蓝牙设备连接失败或很慢
- 如何运用DDD(一):值对象
- docker中VTK库vtkXOpenGLRenderWindow: Cannot create GLX context问题
- 海外多语言商城源码项目开发搭建 第一篇
- 公司来了一个女程序员,新鲜
- JavaScript中 Array.slice 8种不同的用法
- Android10之OMX:ACodec : signalError(omxError 0x80001001, internalError -22)
- STM32F103RC引脚模拟I2C操作EEPROM(24C16)的方法总结
- 2022年一级建造师通信与广电工程考试模拟试题卷及答案