What is jquery chain programming

In jquery, chain programming refers to performing function operations on the same element; chain programming merges multiple lines of code into one line of code, and the result returned by each merged method is an element object. Chain programming can be performed, and the syntax is "element object.Method().Method().Method()...;".

The operating environment of this tutorial: windows10 system, jquery3.6.0 version, Dell G3 computer.

What is jquery chain programming

The core of chain programming is that every method in the object returns the current object.

Chain programming: Multiple lines of code are merged into one line of code. The premise is to recognize whether the code returned by this line of code is an object. Only if it is an object can chain programming be performed.

Chain programming: object. Method().Method().Method();......

1. Chain programming

In jQuery, if it has been To perform function operations on the same element, you can use . Function operation name and keep writing it.

2. Chain programming of commonly used binding event functions

Example:

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

The core of chain programming , is the this object returned after the function call ends, referring to the current caller. Here$("button").click(function(){})After the call is completed, this object is returned, which is equivalent to $("button"), this and the following together achieve the function call of $("button").mouseenter(function() {}). The above are the general steps for chain programming implementation.

3. Chain programming of on function

Example:

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

The on function chain programming here, function After the call is completed, the this keyword will be returned implicitly, indicating the currently called object. After the first on function call is completed, the returned this keyword represents $("#btn1"), After all, adding the on function is a matter of course.

4. Bind function chain programming

Example:

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

The bind function chain programming here is Put multiple parameters in the bind function at the same time. This is because each parameter is stored in the form of a dictionary and has the same format, so it can be placed in the bind function as parallel parameters at the same time. You need to remember this format.

5. Mixed use

Example:

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

Run result:

Video Tutorial recommendation: jQuery video tutorial

The above is the detailed content of What is jquery chain programming. For more information, please follow other related articles on the PHP Chinese website!