• 技术文章 >web前端 >前端问答

    jquery链式编程是什么

    长期闲置长期闲置2022-06-24 16:58:30原创232

    在jquery中,链式编程指的是对同一个元素一直进行函数操作;链式编程是将多行代码合并成一行代码,每一个合并的方法返回的结果是元素对象才可以进行链式编程,语法为“元素对象.方法().方法().方法()...;”。

    本教程操作环境:windows10系统、jquery3.6.0版本、Dell G3电脑。

    jquery链式编程是什么

    实现链式编程的核心,是对象中的每一个方法都会返回当前对象。

    链式编程:多行代码合并成一行代码,前提要认清此行代码返回的是不是对象,是对象才能进行链式编程

    链式编程:对象.方法().方法().方法();......

    一、链式编程

    在jQuery中,如果一直对同一个元素进行函数操作,那么可以使用 .函数操作名,一直写下去。

    二、常用绑定事件函数的链式编程

    举例:

    				//这是普通的事件绑定
    				$("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对象,指的是当前调用者。这里的$("button").click(function(){})调用结束之后,返回this对象,它相当于$("button"),这样和后面的合在一起就实现了$("button").mouseenter(function() {})的函数调用,以上就是链式编程实现的一般步骤。

    三、on函数的链式编程

    举例:

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

    这里的on函数链式编程,函数调用结束之后,会隐式返回this关键字,表示当前调用的对象,这里第一个on函数调用结束之后,返回的this关键字表示的就是$("#btn1"),所有之后再加上on函数是顺理成章的事情。

    四、bind函数的链式编程

    举例:

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

    这里的bind函数链式编程,是将多个参数同时放在bind函数中,这是因为每个参数是以字典的形式存储,有着相同的格式,所以才可以同时作为并列参数放在bind函数中,需要记住这样的格式。

    五、混合使用

    举例:

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

    运行结果:
    在这里插入图片描述

    视频教程推荐:jQuery视频教程

    以上就是jquery链式编程是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:jquery中dom是什么意思 下一篇:jquery中map返回的是对象还是什么
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• jquery怎么给text文本框设置只读状态• jquery流行的原因是什么• 用jquery写代码能触发事件吗• jquery能为元素添加新属性吗• jquery事件代理的意思是什么
    1/1

    PHP中文网