jQueryチェーンプログラミングとは何ですか

jquery では、チェーン プログラミングは、同じ要素に対して関数操作を実行することを指します。チェーン プログラミングは、複数行のコードを 1 行のコードにマージし、マージされた各メソッドによって返される結果は要素オブジェクトです。構文は「element object.Method().Method().Method()...;」です。

このチュートリアルの動作環境: Windows10 システム、jquery3.6.0 バージョン、Dell G3 コンピューター。

jquery チェーン プログラミングとは

チェーン プログラミングの中核は、オブジェクト内のすべてのメソッドが現在のオブジェクトを返すことです。

チェーン プログラミング: 複数行のコードが 1 行のコードにマージされます。前提として、このコード行によって返されたコードがオブジェクトであるかどうかが認識されます。オブジェクトである場合にのみチェーン プログラミングを実行できます。 .

チェーン プログラミング: オブジェクト.Method().Method().Method();....

1. チェーン プログラミング

# jQuery では、同じ要素に対して関数操作を行う場合は、

. 関数操作名 と書き続けることができます。

2. 一般的に使用されるバインディング イベント関数のチェーン プログラミング

例:

				//这是普通的事件绑定
				$("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 オブジェクト。現在の呼び出し元を参照します。 Here$("button").click(function(){})呼び出しが完了すると、this オブジェクトが返されます。これは $("button と同等です) ")、これと次のコードを合わせて $("button").mouseenter(function() {}) の関数呼び出しを実現します。上記はチェーン プログラミング実装の一般的な手順です。

3. 関数上のチェーン プログラミング

例:

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

ここでの関数チェーン プログラミングは、関数の後にあります。呼び出しが完了すると、現在呼び出されているオブジェクトを示す this キーワードが暗黙的に返されます。最初の関数呼び出しが完了した後、返された this キーワードは

$("#btn1") を表します。 on機能は当然です。

4. バインド関数チェーン プログラミング

例:

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

ここでのバインド関数チェーン プログラミングは、複数のパラメーターを入力します。これは、各パラメータが辞書形式で同じ形式で格納されているため、並列パラメータとしてバインド関数に同時に配置できるためです。この形式を覚えておく必要があります。 。

5. 混合使用

例:

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

実行結果:

ビデオチュートリアルの推奨事項:

jQuery ビデオ チュートリアル

以上がjQueryチェーンプログラミングとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。