链式操作原理：每次调用函数都返回调用函数的对象
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
由此，可以用来实现链式操作：
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();
jq对象会在链式操作时转移，可以使用end()变回转移前的对象
var innerReturn = boxReturn2.children().css({
height: 100
});
// 调用end()方法返回上一次转移前的对象
innerReturn.end().css({
width: 200,
backgroundColor: "blue"
})
console.log(innerReturn);
隐式迭代：
对jq的任何操作都会遍历获取的jq数组，给其中的每一项添加操作。
以下是链式操作和隐式迭代的结合使用：
$("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;
}