为什么我必须使用$(this)?

时间:2010-07-23 07:25:04

标签: javascript jquery this

  

可能重复:
  jQuery $(this) vs this

在jquery中,有时我发现在函数中我必须使用$(this)因为this不起作用:

var listItems = $('li');
listItems.each(function(index) {
    $(this).css({ 

    })
})

任何想法的原因是什么?

5 个答案:

答案 0 :(得分:29)

  • $()jQuery constructor函数
  • this是对DOM element of invocation
  • 的引用

基本上,你正在将DOM reference变成jQuery object

在您的示例中,您还可以使用

listItems.each(function(index, element){
   $(element).css({
   });
});

..因为.each()将在其回调中传递index +元素。

答案 1 :(得分:8)

this是本机DOM元素。 $(this)是一个jQuery对象,允许您在其上调用.css()等函数。

答案 2 :(得分:8)

我知道我对这个帖子有点迟了但我只想提出这样一个事实:DOM对象的冗余包装是针对jQuery最常犯的攻击之一。注意你的jQuery实例构建可以在性能方面产生巨大的影响,并且它很容易做到你没有理由不这样做。

通常,当人们拥有一个DOM对象(无论是this还是element)时,他们会在每次需要访问jQuery方法时尝试将其包装起来:

jQuery(this).css('a', 'b');

问题在于你多次这样做:

jQuery(this).css('a', 'b');
jQuery(this).find('span').attr(...);
jQuery(this)....

每次调用jQuery()时,都会构造一个新的jQuery实例。这种操作很昂贵,如果可能的话应该避免 - 特别是在循环中!

为避免这种情况,例如,您可以使用所有返回jQuery实例$(this).css(a,b).attr(a,b)...的方法的链接。其余的时间你应该有一个本地声明的变量引用jQuery实例然后只使用它:

var self = jQuery(this);
self.css(...);
self.attr(...);

如果你在.each()回调函数中执行此操作,则仍然会在每次迭代时构造一个新的jQuery对象。您可以通过使用一个不断变异的通用jQuery对象来避免这种情况,然后您可以在该单个实例上运行jQuery方法:

看看这个:

jQuery.single = function(a){
    return function(b){
        a[0] = b;
        return a
    }
}(jQuery([1]));

现在看看:

$('a').each(function(i){
    $.single(this).append('Anchor number ' + i);
});

只使用了一个jQuery对象。您可以通过避免标识符解析来使速度更快:

$_ = $.single;
$('a').each(function(i){
    $_(this).append('Anchor number ' + i);
});

思考的食物此处有更多信息http://james.padolsey.com/javascript/76-bytes-for-faster-jquery/

答案 3 :(得分:4)

默认情况下,

this通常是一个DOM对象,这意味着它只有普通DOM对象上的方法。

如果要调用特定于库的函数(例如jQuery的.css函数),则必须先将其转换为完整的jQuery对象,这是$()默认情况下执行的操作传递一个DOM对象。

(您还可以将其他内容传递给$(),例如HTML字符串(构造新的jQuery包装的DOM对象)或CSS选择器(以获取一组与D​​OM对象对应的jQuery对象)匹配选择器)。

答案 4 :(得分:2)

如果您使用的是Firefox,请尝试使用console.log($(this))和console.log(this)来查看差异。