jquery - $(this) 是否查询 dom？

Question

我想知道将其传递给 jQuery 函数是否真的会导致它在 DOM 中搜索它。这个问题有特定的背景。

假设我有:

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

jQuery 会查询 DOM 以提供其功能，还是从 JavaScript 对象 this 中读取和获取所有信息？

性能是否存在差异:

$('#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');