在jquery中，鍊式程式設計指的是對同一個元素一直進行函數操作；鍊式程式設計是將多行程式碼合併成一行程式碼，每一個合併的方法傳回的結果是元素物件才可以進行鍊式編程，語法為「元素物件.方法().方法().方法()...;」。
本教學操作環境：windows10系統、jquery3.6.0版本、Dell G3電腦。
實作鍊式程式設計的核心，是物件中的每一個方法都會傳回目前物件。
鍊式程式設計：多行程式碼合併成一行程式碼，前提要認清此行程式碼返回的是不是對象，是對象才能進行鍊式程式設計
鍊式程式設計:對象.方法().方法().方法();......
一、鍊式程式設計
#在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鍊式程式設計是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
