Javascript 为什么我必须使用$(这个)?

Javascript 为什么我必须使用$(这个)?,javascript,jquery,this,Javascript,Jquery,This,可能重复: 在jquery中,有时我发现在函数中我必须使用$(this),因为this不起作用: var listItems = $('li'); listItems.each(function(index) { $(this).css({ }) }) 你知道原因吗 $()是jQuery构造函数函数 此是对调用的DOM元素的引用 因此,基本上,您正在将DOM引用转换为jQuery对象 在您的示例中,您还可以使用 listItems.each(function(inde

可能重复:

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

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

    })
})
你知道原因吗

  • $()
    jQuery构造函数
    函数
  • 是对调用的
    DOM元素的引用
因此,基本上,您正在将
DOM引用
转换为
jQuery对象

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

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

…因为
.each()
将在其回调中传递这两个元素,index+元素。

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

默认情况下,此
通常是一个DOM对象,这意味着它只有普通DOM对象上的方法

如果要调用特定于库的函数(例如jQuery的
.css
函数),必须首先将其转换为完整的jQuery对象,这是默认情况下传递DOM对象时
$()
所做的


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

我知道我在这篇文章中有点晚了,但我只是想提出一个事实,即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 = 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);
});

值得深思此处的更多信息

如果您使用的是Firefox,请尝试console.log($(this))和console.log(this)以查看区别。

将DOM对象转换为jQuery对象。我完全理解。谢谢你的帮助。一条评论说那里可能存在内存泄漏,这是否被批准/反驳?嗨,J-P,好帖子。我只是不明白最后一点。什么是标识符解析?同样在阅读文章和评论时,这种方法似乎确实存在一些问题(内存泄漏,与bind方法冲突),但总而言之,它让我非常清楚我是如何在代码中调用jquery实例的。@999,我在一本书中遇到了这种方法,觉得它太神奇了。但当我搜索检查其他人是否在实际操作中使用它时,我只得到了一些结果,包括你的结果。你知道为什么它不受欢迎吗?或者为什么它没有正式包装到jQuery中?实际上,是Firebug,不是Firefox,或者其他一些JS调试器。