在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() {})的函数调用,以上就是链式编程实现的一般步骤。
使用jQuery链式编程,比使用原生js更简单。