jquery鏈?zhǔn)骄幊讨傅氖鞘裁?/h1>

發(fā)布時(shí)間：2022-06-24 17:16:22 來源：億速云 閱讀：172 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“jquery鏈?zhǔn)骄幊讨傅氖鞘裁础钡挠嘘P(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

在jquery中，鏈?zhǔn)骄幊讨傅氖菍?duì)同一個(gè)元素一直進(jìn)行函數(shù)操作；鏈?zhǔn)骄幊淌菍⒍嘈写a合并成一行代碼，每一個(gè)合并的方法返回的結(jié)果是元素對(duì)象才可以進(jìn)行鏈?zhǔn)骄幊蹋Z(yǔ)法為“元素對(duì)象.方法().方法().方法()...;”。

本教程操作環(huán)境：windows10系統(tǒng)、jquery3.6.0版本、Dell G3電腦。

jquery鏈?zhǔn)骄幊?/h3>

實(shí)現(xiàn)鏈?zhǔn)骄幊痰暮诵?，是?duì)象中的每一個(gè)方法都會(huì)返回當(dāng)前對(duì)象。

鏈?zhǔn)骄幊蹋憾嘈写a合并成一行代碼，前提要認(rèn)清此行代碼返回的是不是對(duì)象，是對(duì)象才能進(jìn)行鏈?zhǔn)骄幊?/p>

鏈?zhǔn)骄幊?對(duì)象.方法().方法().方法();......

一、鏈?zhǔn)骄幊?/strong>

在jQuery中，如果一直對(duì)同一個(gè)元素進(jìn)行函數(shù)操作，那么可以使用 .函數(shù)操作名，一直寫下去。

二、常用綁定事件函數(shù)的鏈?zhǔn)骄幊?/strong>

舉例：

				//這是普通的事件綁定
				$("button").click(function() {
					console.log("1")
				})

				$("button").mouseenter(function() {
					console.log("2")
				})

				$("button").mouseleave(function() {
					console.log("3")
				})

				//與上文功能相同的鏈?zhǔn)骄幊?
				$("button").click(function() {
					console.log("1")
				}).mouseenter(function() {
					console.log("2")
				}).mouseleave(function() {
					console.log("3")
				})

實(shí)現(xiàn)鏈?zhǔn)骄幊痰暮诵?，是函?shù)調(diào)用結(jié)束之后返回的this對(duì)象，指的是當(dāng)前調(diào)用者。這里的$("button").click(function(){})調(diào)用結(jié)束之后，返回this對(duì)象，它相當(dāng)于$("button")，這樣和后面的合在一起就實(shí)現(xiàn)了$("button").mouseenter(function() {})的函數(shù)調(diào)用，以上就是鏈?zhǔn)骄幊虒?shí)現(xiàn)的一般步驟。

三、on函數(shù)的鏈?zhǔn)骄幊?/strong>

舉例：

			//普通寫法			$("#btn1").on("click",function(){				console.log("點(diǎn)擊事件")			})			$("#btn1").on("mouseenter",function(){  //注意這里的on函數(shù)的鏈?zhǔn)骄幊?			console.log("鼠標(biāo)聚焦事件")			})			$("#btn1").on("mouseleave",function(){  //注意這里的on函數(shù)的鏈?zhǔn)骄幊?			console.log("鼠標(biāo)失焦事件")			})						//鏈?zhǔn)骄幊?		$("#btn1").on("click",function(){				console.log("點(diǎn)擊事件")			}).on("mouseenter",function(){  //注意這里的on函數(shù)的鏈?zhǔn)骄幊?			console.log("鼠標(biāo)聚焦事件")			}).on("mouseleave",function(){  //注意這里的on函數(shù)的鏈?zhǔn)骄幊?			console.log("鼠標(biāo)失焦事件")			})

這里的on函數(shù)鏈?zhǔn)骄幊蹋瘮?shù)調(diào)用結(jié)束之后，會(huì)隱式返回this關(guān)鍵字，表示當(dāng)前調(diào)用的對(duì)象，這里第一個(gè)on函數(shù)調(diào)用結(jié)束之后，返回的this關(guān)鍵字表示的就是$("#btn1")，所有之后再加上on函數(shù)是順理成章的事情。

四、bind函數(shù)的鏈?zhǔn)骄幊?/strong>

舉例：

				//普通寫法
				$("button").bind({"click":function(){
					console.log("點(diǎn)擊事件")
				}})
				$("button").bind({"mouseenter":function(){
					console.log("鼠標(biāo)聚焦事件")
				}})
				$("button").bind({"mouseleave":function(){
					console.log("鼠標(biāo)離焦事件")
				}})

				//鏈?zhǔn)骄幊?
				$("button").bind({"click":function(){
					console.log("點(diǎn)擊事件")
				},
				"mouseenter":function(){
					console.log("鼠標(biāo)聚焦事件")
				},
				"mouseleave":function(){
					console.log("鼠標(biāo)離焦事件")
				}})

這里的bind函數(shù)鏈?zhǔn)骄幊蹋菍⒍鄠€(gè)參數(shù)同時(shí)放在bind函數(shù)中，這是因?yàn)槊總€(gè)參數(shù)是以字典的形式存儲(chǔ)，有著相同的格式，所以才可以同時(shí)作為并列參數(shù)放在bind函數(shù)中，需要記住這樣的格式。

五、混合使用

舉例：

	//混合使用
	$("button").bind({"click":function(){
					console.log("點(diǎn)擊事件")
				}})
				$("button").bind({"mouseenter":function(){
					console.log("鼠標(biāo)聚焦事件")
				}}).mouseleave(function(){
					console.log("混合使用的離焦事件")
				})

運(yùn)行結(jié)果：
“jquery鏈?zhǔn)骄幊讨傅氖鞘裁础钡膬?nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！