何时使用 $(this) 不是更慢吗?

发布于 2024-11-18 21:34:06 字数 420 浏览 3 评论 0原文

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

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

    $(this).hide();

} );

但是我们当然也可以这样做:

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

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

} );

使用 this 的优点是什么?那不是更慢吗?

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

在某些情况下,唯一的方法就是使用this

那就给我看看这种情况的例子吧! :)

我应该使用哪个主要(如果两者都可以)?

In jQuery we can do like...

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

    $(this).hide();

} );

But we can do like this too, of course:

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

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

} );

What're advantages of using this? Isn't that slower?

I think the answer for this question will be something like...

There are situations when only way is to use this.

Show me example of that situation then! :)

Which should I use primary (if both would work)?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

北音执念 2024-11-25 21:34:06

可以看到源代码第92行当您传递 HTML 元素时,不会发生太多事情。


另请注意,$(this).hide()$('.button').hide(); 并不等效。第一个只会隐藏单击的元素,而第二个将隐藏所有 .button 元素。

  • You should use this if all you want to do is accessing DOM properties (that are implemented by all browsers, there are some).

    For example: this.href (<a>), this.src (<img>), this.id (all elements (if set)), etc.
    This is the fastet way as you don't make a function call to jQuery.

  • You should use $(this) if you want to apply jQuery functions to the DOM element.

  • You should avoid using $(selector) if you already have a reference to that element. Searching the DOM again is way slower.

You can see in line 92 of the source code that there is not much happening when you pass an HTML element.


Also note that $(this).hide() and $('.button').hide(); are not equivalent. The first will only hide the clicked element, while the second will hide all .button elements.

北风几吹夏 2024-11-25 21:34:06

this 指的是实际点击的元素,其中 $('.button').hide(); 将隐藏具有 button 类的所有元素。

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

this refers to the actual clicked element where as $('.button').hide(); would hide all elements with the class button.

They don't work the same and even if they would, this would actually be faster since $('.button') has to find the element again from the whole document.

罗罗贝儿 2024-11-25 21:34:06

使用 $(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();
});

Using $(this) is slower than using this directly, but it is not slower (in general) than hitting the DOM again by using $('.button') inside your handler.

The key difference between the two is that this is always going to be one element. $('.button') could be any number of elements. So which you use depends on what you want to hide.

So if you want to work with the clicked button only:

// 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();

If you want to work with all of elements with a class of 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();
});
病毒体 2024-11-25 21:34:06

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

in first case you hide only one current element.
in second case you just hide everything with class button

芯好空 2024-11-25 21:34:06

this 指向一个已经存在的对象,您不需要计算表达式并再次查找元素,这会花费更多时间和内存。

this points to an already existing object, you don't need to evaluate an expression and find the element again, which takes more time and memory.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文