javascript - jQuery 中的方法链接是否会导致多个循环，即每个方法一个

Question

如果我想在一组 jQuery 对象上连续应用多个方法，我可以这样写

$('.myclass').css('width','10').addClass('foo')

这是否等同于

for(var i=0; i<$('.myclass').length); i++){
    $('.myclass').eq(i).css('width','10')
}
for(var i=0; i<$('.myclass').length); i++){
    $('.myclass').eq(i).addClass('foo')
}

或

for(var i=0; i<$('.myclass').length); i++){
    $('.myclass').eq(i).css('width','10')
    $('.myclass').eq(i).addClass('foo')
}

即如果我链接了 n 方法，这会导致 n 不同的循环，还是 jQuery 会优化链以在单个循环中应用所有方法？

Answer 1

它等同于您拥有的 2 个 for 循环。

您可以将其视为，

1) 找到所有元素，并存储到 1 个对象中。所以一个对象，但它包含所有这些元素。

2) 通过更改它们的 css 循环遍历这些元素，并像 (1) 中那样只返回对象

3) 通过向这些元素添加一个类再次遍历这些元素

因为这在 OOP 中很常见，你首先有一个对象，然后在其上调用方法 css()，然后在完成所有操作之后，css() 返回(在 jQuery 中，它通常返回相同的对象以便链接工作)，现在再次调用对象的 addClass()。

P.S. 如果您查看 http://jsfiddle.net/T4wKm/5/，您几乎可以模拟相同的机制。

P.P.S. jQuery 不会为您优化它以使其成为一个循环，但一般来说，拥有一个循环并做多件事 vs 拥有多个循环每个做一件事，不被视为性能差异很大。如果你以后了解 O()(大 O 表示法)，你就会知道它们都归结为 O(n)，并且对于计算速度，如果它们都是 O(n)。