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鏈式程式設計是什麼的詳細內容，更多請關注TW511.COM其它相關文章！