一、链式编程
在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---链式编程
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
原文链接：jQuery---链式编程
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
微信扫一扫 