在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("混合使用的离焦事件")
				}
    )

运行结果：