jquery鏈式編程指的是什么

本篇內容介紹了“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鏈式編程指的是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！