我可以将几个命令附加到同一个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'});

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

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

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

这次重要吗？ 不是：jQuery中#something为heavily optimized，可以快速使用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');

Answer 2

是的，链接jquery命令总是更好。这将节省jquery每次都获取元素。

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

比使用相同功能更好。

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

Answer 3

嗯，通常是同样的事情，但是有些方法会影响所选元素的集合，因此它不一定相同。在您的特定情况下，是的，它完全相同。

使用“链”更有效，因为DOM只需要搜索一次。当你的例子中的查询是“id”时，这不是一个巨大的节省，但它是一些东西。

Answer 4

答案几乎是，它们是相同的，但第一次查询会更快。

第二次查询为#password元素

搜索文档两次

Answer 5

是的，这称为链接，并且比第二个示例更受欢迎，因为在第二个示例中，您将再次查找DOM元素，而不是使用第一个示例中已使用的元素

Answer 6

是的，结果是一样的，但是第一种方法只需要找到一次该元素，jQuery只会创建一个jQuery对象，从而节省内存。

它被称为链接。诸如jQuery之类的库的一个重要特性。

您可以通过为变量分配jQuery对象来优化调用，因此您不必多次调用jquery函数，从而节省内存和速度。

var $password = $('#password');

$password.css({

  'background-color': '#FF0000',
  'color': '#FFFFFF'

});

$password.html('Weak');