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

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

10余年的崇陽網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整崇陽建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)公司從事“崇陽網(wǎng)站設(shè)計”,“崇陽網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

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

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

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

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

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

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

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

在jQuery中，如果一直對同一個元素進(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")
				})

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

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

舉例：

			//普通寫法			$("#btn1").on("click",function(){				console.log("點擊事件")			})			$("#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("點擊事件")			}).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é)束之后，會隱式返回this關(guān)鍵字，表示當(dāng)前調(diào)用的對象，這里第一個on函數(shù)調(diào)用結(jié)束之后，返回的this關(guān)鍵字表示的就是$("#btn1")，所有之后再加上on函數(shù)是順理成章的事情。

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

舉例：

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

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

這里的bind函數(shù)鏈?zhǔn)骄幊?，是將多個參數(shù)同時放在bind函數(shù)中，這是因為每個參數(shù)是以字典的形式存儲，有著相同的格式，所以才可以同時作為并列參數(shù)放在bind函數(shù)中，需要記住這樣的格式。

五、混合使用

舉例：

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

運行結(jié)果：
http://weahome.cn/article/pjgcdp.html