PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

jquery链式编程是什么

WBOY
WBOY 原创
2022-06-24 16:58:30 1438浏览

在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函数的链式编程

举例:

			//普通写法			$("#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核实处理。