Question

在jQuery中我们可以这样做......

$('.button').click( function() {

    $(this).hide();

} );

但我们也可以这样做，当然：

$('.button').click( function() {

    $('.button').hide();

} );

使用此有什么好处？那不是很慢吗？

我认为这个问题的答案将是......

有些情况下只能使用 this 。

然后告诉我这种情况的例子！：）

我应该使用哪个（如果两者都有效）？

Answer 1

如果你想要的只是访问 DOM属性（由所有浏览器实现，有一些），你应该使用this。

例如：this.href（<a>），this.src（<img>），this.id（所有元素（如果已设置））等。这是紧固方式，因为你没有对jQuery进行函数调用。
如果要将 jQuery函数应用于DOM元素，则应使用$(this)。
如果您已经有对该元素的引用，则应避免使用$(selector)。再次搜索DOM会慢一点。

您可以看到in line 92 of the source code传递HTML元素时没有太多事情发生。

另请注意，$(this).hide()和$('.button').hide();不相同。第一个将隐藏被点击的元素，而第二个将隐藏所有.button元素。

Answer 2

this指实际点击的元素，其中$('.button').hide();会隐藏所有带有button类的元素。

它们的工作方式不同，即使它们愿意，this实际上会更快，因为$('.button')必须从整个文档中再次找到该元素。

Answer 3

使用$(this)比直接使用this要慢，但它（通常）不会比在处理程序中使用$('.button')再次点击DOM更慢。

两者之间的关键区别是this总是一个元素。 $('.button')可以是任意数量的元素。所以你使用它取决于你想要隐藏的内容。

因此，如果您想使用点击的按钮：

// Fastest if using DOM methods / properties
this.SOME_DOM_METHOD();

// Fastest if using some jQuery method that can take a DOM element
jQuery.method_that_takes_an_element(this, additional, args);

// Fastest if using a jQuery method that cannot take a DOM element
jQuery(this).SOME_JQUERY_METHOD();

如果您想使用类button的所有元素：

// Fastest if no new .button elements will be created
var buttons = $('.button');
buttons.click(function() {
    buttons.hide();
});

// Slow but I think necessary if new .button elements will be created
$('.some_container').delegate('.button', 'click', function() {
    $('.button').hide();
});

Answer 4

在第一种情况下，您只隐藏一个当前元素。在第二种情况下，你只需用类按钮隐藏所有内容

Answer 5

this指向已存在的对象，您不需要计算表达式并再次找到元素，这需要更多的时间和内存。

何时使用$（this）而不是那么慢？

5 个答案: