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

如果this中有DOM元素，则$(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，好吧，避免不必要的函数调用和内存分配。： - ）

$（this）查询dom吗？

2 个答案: