Apakah pengaturcaraan rantai jquery

Dalam jquery, pengaturcaraan rantai merujuk kepada melaksanakan operasi fungsi pada elemen yang sama sepanjang masa menggabungkan berbilang baris kod ke dalam satu baris kod, dan hasil yang dikembalikan oleh setiap kaedah gabungan ialah objek elemen. Pengaturcaraan rantai boleh dilakukan, dan sintaksnya ialah "objek elemen. Kaedah().Kaedah().Kaedah()...;".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi jquery 3.6.0, komputer Dell G3.

Apakah pengaturcaraan rantai jquery

Inti pengaturcaraan rantaian ialah setiap kaedah dalam objek mengembalikan objek semasa.

Pengaturcaraan rantaian: Berbilang baris kod digabungkan menjadi satu baris kod Premisnya adalah untuk mengenali sama ada kod yang dikembalikan oleh baris kod ini adalah objek Hanya jika ia adalah objek, pengaturcaraan berantai boleh dibawa keluar.

Pengaturcaraan rantaian: objek().Kaedah().Kaedah();......

1

Dalam jQuery, jika anda menyimpan Untuk melaksanakan operasi fungsi pada elemen yang sama, anda boleh menggunakan

dan terus menulis.

.函数操作名

2. Pengaturcaraan rantaian fungsi acara mengikat yang biasa digunakan

Contoh:

				//这是普通的事件绑定
				$("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")
				})

Melaksanakan pengaturcaraan rantai Teras ialah objek

dikembalikan selepas panggilan fungsi tamat, yang merujuk kepada pemanggil semasa. Selepas panggilan

di sini tamat, objek this dikembalikan, yang bersamaan dengan $("button").click(function(){}) Dengan cara ini, digabungkan dengan yang berikut, panggilan fungsi this di atas adalah langkah umum untuk pelaksanaan pengaturcaraan rantaian. $("button")$("button").mouseenter(function() {})

3 Pengaturcaraan rantaian pada fungsi

Contoh:

			//普通写法			$("#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("鼠标失焦事件")			})

Pengaturcaraan rantaian pada fungsi di sini , selepas panggilan fungsi selesai, kata kunci ini akan dikembalikan secara tersirat, menunjukkan objek yang dipanggil pada masa ini Selepas panggilan pada fungsi pertama selesai, kata kunci yang dikembalikan ini mewakili

, dan fungsi on akan ditambah selepas itu .

$("#btn1")

4. Pengaturcaraan rantaian fungsi bind

Contoh:

				//普通写法
				$("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("鼠标离焦事件")
				}})

Pengaturcaraan rantaian fungsi bind di sini , ialah untuk meletakkan berbilang parameter dalam fungsi bind pada masa yang sama Ini kerana setiap parameter disimpan dalam bentuk kamus dan mempunyai format yang sama, jadi ia boleh diletakkan sebagai parameter selari dalam fungsi bind pada masa yang sama perlu ingat format ini.

5. Penggunaan bercampur

Contoh:

Hasil jalankan:

	//混合使用
	$("button").bind({"click":function(){
					console.log("点击事件")
				}})
				$("button").bind({"mouseenter":function(){
					console.log("鼠标聚焦事件")
				}}).mouseleave(function(){
					console.log("混合使用的离焦事件")
				})

Cadangan tutorial video:

Tutorial video jQuery

Atas ialah kandungan terperinci Apakah pengaturcaraan rantai jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!