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函數的鍊式編程

範例：

			//普通写法			$("#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影片教學

以上是jquery鍊式程式設計是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！