我是靠谱客的博主 从容黑裤,这篇文章主要介绍jquery链式编程是什么,现在分享给大家,希望可以做个参考。

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

jquery链式编程是什么

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

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

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

一、链式编程

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

举例:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//这是普通的事件绑定 $("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") })
登录后复制

三、on函数的链式编程

举例:

复制代码
1
//普通写法 $("#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("鼠标失焦事件") })
登录后复制

四、bind函数的链式编程

举例:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//普通写法 $("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("鼠标离焦事件") }})
登录后复制

五、混合使用

举例:

复制代码
1
2
3
4
5
6
7
8
9
//混合使用 $("button").bind({"click":function(){ console.log("点击事件") }}) $("button").bind({"mouseenter":function(){ console.log("鼠标聚焦事件") }}).mouseleave(function(){ console.log("混合使用的离焦事件") })
登录后复制

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

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

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

最后

以上就是从容黑裤最近收集整理的关于jquery链式编程是什么的全部内容,更多相关jquery链式编程是什么内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(118)

评论列表共有 0 条评论

立即
投稿
返回
顶部