Princípio de operação encadeada: toda vez que uma função é chamada, o objeto da função de chamada é retornado
var $box = $(".box");
var boxReturn = $box.css("width", "200px");
console.log(boxReturn == $box); // true
var boxReturn2 = boxReturn.animate({
height: 200
});
console.log(boxReturn2 == $box); // true
Como resultado, pode ser usado para implementar operações em cadeia:
var obj = {
name: "李白",
sayName: function (){
console.log("调用了obj的sayName方法");
return this;
},
run: function (){
console.log("调用了obj的run方法");
return this;
},
say: function (){
console.log("调用了obj的say方法");
return this;
},
sing: function (){
console.log("调用了obj的sing方法");
return this;
}
}
obj
.sayName()
.run()
.sing()
.say()
.sayName()
.run()
.sing()
.say();
O objeto jq será transferido na operação em cadeia, você pode usar end () para voltar ao objeto antes da transferência
var innerReturn = boxReturn2.children().css({
height: 100
});
// 调用end()方法返回上一次转移前的对象
innerReturn.end().css({
width: 200,
backgroundColor: "blue"
})
console.log(innerReturn);
Iteração implícita:
Qualquer operação em jq percorrerá a matriz jq obtida e adicionará operações a cada item.
A seguir está uma combinação de operação em cadeia e iteração implícita:
$("li").css("color", "#fff");
self$("li").css("line-height", "60px");
self$("li").css("background-color", "red").addClass("d1");
function self$(select){
var arr = document.querySelectorAll(select);
arr.css = function (styleName, styleValue){
for(var i= 0; i < arr.length; i ++){
arr[i].style[styleName] = styleValue;
}
return arr;
}
arr.addClass = function (className){
for(var i = 0; i < arr.length; i ++){
arr[i].classList.add(className);
}
return arr;
}
return arr;
}