javascript - 我可以将多个命令附加到同一个 jQuery 选择器吗

Question

简单来说:

这是:

$('#password').html('Weak').css({'background-color' : '#FF0000' , 'color' : '#FFFFFF'});

等于这个？

$('#password').css({'background-color' : '#FF0000' , 'color' : '#FFFFFF'});
$('#password').html('Weak')

它们对我来说是一样的——但我只是想确定它们真的是一样的……

Answer 1

差不多。

$('#password').html('Weak').css({'background-color' : '#FF0000' , 'color' : '#FFFFFF'});

为选择器#password构建一次jQuery对象。

$('#password').css({'background-color' : '#FF0000' , 'color' : '#FFFFFF'});
$('#password').html('Weak')

为选择器 #password 构建一个 jQuery 对象两次。

这次重要吗？ 不是真的:#something 是 heavily optimized在 jQuery 中快速使用 document.getElementById 来匹配正确的元素。

但是，如果你有

$('input[value^=your_complex_selector],div div div,img[src$=.jpg]')

然后你不断调用它而不缓存它......你可以看到我们要去哪里。

通过将 jQuery 对象分配给变量，您可以获得链接的性能优势，而不会损失可读性:

var password = $('#password');
password.css({'background-color' : '#FF0000' , 'color' : '#FFFFFF'});
password.html('Weak');