除了您列出的两个之外,还有第三种选择:
1: $('#content .someclass')
2: $('.someclass', '#content')
3: $('#content').find('.someclass')
在不进行任何测试的情况下,我们可以肯定地说 #3 比 #2 快。那是因为#2 在内部变成了#3。这是执行此操作的jQuery source code。它在 init() 函数中,它实际上是 jQuery 构造函数。经过相当长的一系列测试后,它检测到您调用了$(selector,context) 并改为调用$(context).find(selector):
// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
return this.constructor( context ).find( selector );
}
您可以让$(context).find(selector) 给自己打电话,避免额外的检查。
所以#2 永远不是最快的代码; #3 总会打败它。
也正如@KevinB 指出的那样,#2 是not a documented use 的$/jQuery 函数。这可能只是文档中的一个疏忽,因为它是对 #3 的直接转换,这是该函数的记录使用,并且代码多年来一直以这种方式工作。
在任何情况下,几乎没有任何理由使用 #2,即使在其记录的案例中,因为 #3 更快且更易于理解。
#3 与 #1 相比如何?在大多数情况下可能更快,但它可能因浏览器以及特定选择器和页面复杂性而异。 jsPerf 是你的朋友,但一定要给它一个与重要页面相似的页面,而不仅仅是一个人为的测试。
div.someclass 与 .someclass 相同。测试一下看看。
关于$(this),当$ 函数名称只是普通的JavaScript 函数调用时,它们有时会让事情看起来很神奇。为便于理解,请尝试改用 jQuery 函数名:
jQuery(this)
现在应该更清楚了,这确实是一个函数调用,而不是某种神奇的语法。当您使用$(this) 或$(anything) 时也是如此:它始终 是一个函数调用。所以是的,如果您重复使用它,最好将结果保存在变量中:
var $this = $(this);
我唯一的建议是不要将变量命名为 $thisobject。额外的object 措辞并没有真正使名称更加清晰;一个简单的$this 会让其他开发者更加熟悉。或者使用更具描述性的名称可能更好,例如
var $element = $(this);
一般来说,this 和 $this 在 jQuery 代码中被严重过度使用,最好尽可能使用具有简短但描述性名称的普通变量。
考虑一下这个人为的 jQuery 插件:
jQuery.fn.log = function() {
this.each( function() {
console.log( this );
});
return this;
};
在这个简短的函数中,this 改变了两次含义:首先是 jQuery 对象,然后是来自该对象的单个元素,然后又是 jQuery 对象。难怪人们对this 有麻烦!
相反,您可以使用.each() 的命名参数:
$.fn.log = function() {
this.each( function( i, element ) {
console.log( element );
});
return this;
};
这不那么令人困惑了,如果您在内部函数中需要一个用于 element 的 jQuery 对象,您可以使用与 this 相同的方式进行操作:
var $element = $(element);