为什么我必须使用$(this)?
可能重复:
jQuery $(this)vs this
在jquery中,有时我发现在函数中我必须使用$(this)
因为this
不起作用:
var listItems = $('li'); listItems.each(function(index) { $(this).css({ }) })
有什么想法的原因?
-
$()
是jQuery constructor
函数 -
this
是对DOM element of invocation
所以基本上,你将DOM reference
转换为jQuery object
在您的示例中,您也可以使用
listItems.each(function(index, element){ $(element).css({ }); });
..since .each()
将在其回调中传递index +元素。
this
是本机DOM元素。 $(this)
是一个jQuery对象,允许您在其上调用.css()
等函数。
我知道我对这个post有点迟了但我只是想提出这样一个事实: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/
默认情况下,这通常是一个DOM对象,这意味着它只有普通DOM对象上的方法。
如果要调用特定于库的函数(例如jQuery的.css
函数),则必须首先将其转换为完整的jQuery对象,这是$()
默认情况下传递给DOM对象的情况。
(您还可以将其他内容传递给$()
,例如HTML字符串(用于构造新的jQuery包装的DOM对象)或CSS选择器(用于获取与匹配选择器的DOM对象相对应的一组jQuery对象)。
如果您使用的是Firefox,请尝试使用console.log($(this))和console.log(this)来查看差异。