$(this)查询dom吗？

Question

我想知道是否将它传递给jQuery函数实际上导致它在DOM中搜索它.这个问题有一个特定的背景.

比方说我有:

$('#foo').click(function(){
  var id = $(this).attr('id');
  var someVal = $(this).data('someVal');
}

jQuery是否会查询DOM以提供其功能,或者是从JavaScript对象中读取和获取的所有信息？

并且是否存在性能差异:

$('#foo').click(function(){
  var elem = $(this);
  var id = elem.attr('id');
  var someVal = elem.data('someVal');
}

Answer 1

它不会在此实例中查询DOM. 使用jQuery包装器对象$()包装this(或其中的任何其他内容).

通过缓存它:

var $this = $(this);
 // you will see code have a $ before or after a variable ( $this, this$, etc )
 // signifying it is a jQuery wrapped object

您只需使用jQuery包装它就可以节省性能.而不是让它进入jQuery并一遍又一遍地包装它.缓存它是一种很好的编码实践.

注意:当然如果你有$('#whatever')它将查询DOM,因为你已经提供了一个选择器供它检索,然后它用jQuery包装它.因此,如果您将一遍又一遍地重复使用它,那么保存它也是有意义的!var $whatever = $('#whatever');

Answer 2

如果您有DOM元素this,则$(this)不会查询DOM.它只是在一个DOM元素周围放置一个jQuery包装器对象.

这不是一项昂贵的操作,但您希望避免不必要的操作.例如,您有时会看到这种代码:

$("some_selector_here").mousemove(function() {
   if ($(this).hasClass('foo')) {
       $(this).doSomething();
   }
   else {
       $(this).doSomethingElse();
   }
});

没有理由这样做.代替:

$("some_selector_here").mousemove(function() {
   var $this = $(this);
   if ($this.hasClass('foo')) {
       $this.doSomething();
   }
   else {
       $this.doSomethingElse();
   }
});

几乎可以肯定的是,在一个click处理程序中,尽管我仍然会说它的形式很差.但是在那些被调用很多的东西中mousemove,好吧,避免不必要的函数调用和内存分配.:-)