0

0

jquery链式编程是什么

WBOY

WBOY

发布时间:2022-06-24 16:58:30

|

1844人浏览过

|

来源于php中文网

原创

在jquery中,链式编程指的是对同一个元素一直进行函数操作;链式编程是将多行代码合并成一行代码,每一个合并的方法返回的结果是元素对象才可以进行链式编程,语法为“元素对象.方法().方法().方法()...;”。

jquery链式编程是什么

本教程操作环境:windows10系统、jquery3.6.0版本、Dell G3电脑。

jquery链式编程是什么

实现链式编程的核心,是对象中的每一个方法都会返回当前对象。

链式编程:多行代码合并成一行代码,前提要认清此行代码返回的是不是对象,是对象才能进行链式编程

链式编程:对象.方法().方法().方法();......

一、链式编程

在jQuery中,如果一直对同一个元素进行函数操作,那么可以使用 .函数操作名,一直写下去。

二、常用绑定事件函数的链式编程

举例:

				//这是普通的事件绑定
				$("button").click(function() {
					console.log("1")
				})

				$("button").mouseenter(function() {
					console.log("2")
				})

				$("button").mouseleave(function() {
					console.log("3")
				})

				//与上文功能相同的链式编程
				$("button").click(function() {
					console.log("1")
				}).mouseenter(function() {
					console.log("2")
				}).mouseleave(function() {
					console.log("3")
				})

实现链式编程的核心,是函数调用结束之后返回的this对象,指的是当前调用者。这里的$("button").click(function(){})调用结束之后,返回this对象,它相当于$("button"),这样和后面的合在一起就实现了$("button").mouseenter(function() {})的函数调用,以上就是链式编程实现的一般步骤。

三、on函数的链式编程

DaGaoPeng(大高朋网团购程序)
DaGaoPeng(大高朋网团购程序)

大高朋团购系统是一套Groupon模式的开源团购程序,开发的一套网团购程序,系统采用ASP+ACCESS开发的团购程序,安装超简,功能超全面,在保留大高朋团购系统版权的前提下,允许所有用户免费使用。大高朋团购系统内置多种主流在线支付接口,所有网银用户均可无障碍支付;短信发送团购券和实物团购快递发货等。 二、为什么选择大高朋团购程序系统? 1.功能强大、细节完善 除了拥有主流团购网站功能,更特别支

下载

举例:

			//普通写法			$("#btn1").on("click",function(){				console.log("点击事件")			})			$("#btn1").on("mouseenter",function(){  //注意这里的on函数的链式编程				console.log("鼠标聚焦事件")			})			$("#btn1").on("mouseleave",function(){  //注意这里的on函数的链式编程				console.log("鼠标失焦事件")			})						//链式编程			$("#btn1").on("click",function(){				console.log("点击事件")			}).on("mouseenter",function(){  //注意这里的on函数的链式编程				console.log("鼠标聚焦事件")			}).on("mouseleave",function(){  //注意这里的on函数的链式编程				console.log("鼠标失焦事件")			})

这里的on函数链式编程,函数调用结束之后,会隐式返回this关键字,表示当前调用的对象,这里第一个on函数调用结束之后,返回的this关键字表示的就是$("#btn1"),所有之后再加上on函数是顺理成章的事情。

四、bind函数的链式编程

举例:

				//普通写法
				$("button").bind({"click":function(){
					console.log("点击事件")
				}})
				$("button").bind({"mouseenter":function(){
					console.log("鼠标聚焦事件")
				}})
				$("button").bind({"mouseleave":function(){
					console.log("鼠标离焦事件")
				}})

				//链式编程
				$("button").bind({"click":function(){
					console.log("点击事件")
				},
				"mouseenter":function(){
					console.log("鼠标聚焦事件")
				},
				"mouseleave":function(){
					console.log("鼠标离焦事件")
				}})

这里的bind函数链式编程,是将多个参数同时放在bind函数中,这是因为每个参数是以字典的形式存储,有着相同的格式,所以才可以同时作为并列参数放在bind函数中,需要记住这样的格式。

五、混合使用

举例:

	//混合使用
	$("button").bind({"click":function(){
					console.log("点击事件")
				}})
				$("button").bind({"mouseenter":function(){
					console.log("鼠标聚焦事件")
				}}).mouseleave(function(){
					console.log("混合使用的离焦事件")
				})

运行结果:
在这里插入图片描述

视频教程推荐:jQuery视频教程

相关文章

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

150

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

310

2023.10.13

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

394

2023.11.10

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。

501

2023.12.04

jquery实现分页方法
jquery实现分页方法

在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容,可以阅读本专题下面的文章。

181

2023.12.06

jquery中隐藏元素是什么
jquery中隐藏元素是什么

jquery中隐藏元素是非常重要的一个概念,在使用jquery隐藏元素之前,需要先了解css样式中关于元素隐藏的属性,比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

120

2024.02.23

jquery中什么是高亮显示
jquery中什么是高亮显示

jquery中高亮显示是指对页面搜索关键词时进行高亮显示,其实现办法:1、先获取要高亮显示的行,获取搜索的内容,再遍历整行内容,最后添加高亮颜色;2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

174

2024.02.23

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

35

2026.01.13

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 4.6万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.6万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号