在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鍊式程式設計是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

Dreamweaver Mac版
視覺化網頁開發工具

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

記事本++7.3.1
好用且免費的程式碼編輯器