$(this)与this不同:

通过使用$(this)，可以确保jQuery原型被传递到对象上。

正确的答案是，当使用jQuery而不是“普通的”原生JavaScript时，您总是会受到性能损失。这是因为jQuery是一个JavaScript库。它不是什么花哨的JavaScript新版本。

jQuery强大的原因在于，它使一些在跨浏览器情况下过于繁琐的事情变得简单(AJAX就是最好的例子之一)，并平滑了无数可用浏览器之间的不一致性，并提供了一致的API。它还很容易促进链接、隐含迭代等概念，以简化一起处理元素组的工作。

学习jQuery不能代替学习JavaScript。你应该对后者有一个坚实的基础，这样你才能充分体会到了解前者会让你更容易。

-编辑以包含评论-

As the comments are quick to point out (and I agree with 100%) the statements above refer to benchmarking code. A 'native' JavaScript solution (assuming it is well written) will outperform a jQuery solution that accomplishes the same thing in nearly every case (I'd love to see an example otherwise). jQuery does speed up development time, which is a significant benefit which I do not mean to downplay. It facilitates easy to read, easy to follow code, which is more than some developers are capable of creating on their own.

在我看来，答案取决于你想要达到的目标。如果正如我根据您对性能好处的参考所推测的那样，您希望获得应用程序的最佳运行速度，那么每次调用$()时使用jQuery都会带来开销。如果你追求可读性、一致性、跨浏览器兼容性等等，那么肯定有理由支持jQuery而不是“原生”JavaScript。

这是我个人的观点，但无论如何jQuery是JavaScript，我认为理论上它不能比普通JS表现得更好。

但实际上，它可能比手工编写的JS执行得更好，因为手工编写的代码可能不如jQuery有效。

总之，对于较小的东西，我倾向于使用普通的JS，对于JS密集的项目，我喜欢使用jQuery，而不是重新发明轮子——它也更有效率。

this.id (as you know) this.value (on most input types. only issues I know are IE when a <select> doesn't have value properties set on its <option> elements, or radio inputs in Safari.) this.className to get or set an entire "class" property this.selectedIndex against a <select> to get the selected index this.options against a <select> to get a list of <option> elements this.text against an <option> to get its text content this.rows against a <table> to get a collection of <tr> elements this.cells against a <tr> to get its cells (td & th) this.parentNode to get a direct parent this.checked to get the checked state of a checkbox Thanks @Tim Down this.selected to get the selected state of an option Thanks @Tim Down this.disabled to get the disabled state of an input Thanks @Tim Down this.readOnly to get the readOnly state of an input Thanks @Tim Down this.href against an <a> element to get its href this.hostname against an <a> element to get the domain of its href this.pathname against an <a> element to get the path of its href this.search against an <a> element to get the querystring of its href this.src against an element where it is valid to have a src

.．.我想你已经明白了。

有时，性能是至关重要的。比如，如果你在循环中多次执行某项操作，你可能想要抛弃jQuery。

一般来说，你可以替换:

$(el).attr('someName');

:

上面的措辞很糟糕。getAttribute不是一个替换，但它检索从服务器发送的属性的值，其对应的setAttribute将设置它。在某些情况下是必要的。

下面的句子在某种程度上涵盖了它。请看这个答案，了解更好的治疗方法。

el.getAttribute('someName');

.．.以便直接访问属性。注意，属性与属性不同(尽管它们有时相互镜像)。当然还有setAttribute。

假设您遇到了这样一种情况:收到了一个页面，需要打开某种类型的所有标记。它是简单的jQuery:

$('span').unwrap();  // unwrap all span elements

但如果有很多，你可能想要做一点本地DOM API:

var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}

这段代码非常短，它的性能比jQuery版本更好，并且可以很容易地在你的个人库中成为一个可重用的函数。

因为while(span[0])，它看起来像是一个外部while的无限循环，但因为我们处理的是一个“活动列表”，当我们执行parent. removecchild (span[0]);时，它会被更新。这是我们在使用数组(或类数组对象)时忽略的一个非常漂亮的特性。

如果您最关心的是性能，那么您的主要示例就一针见血了。在我看来，不必要或冗余地调用jQuery是导致性能变慢的第二个主要原因(第一个原因是DOM遍历不好)。

这并不是你真正想要的例子，但我经常看到这样的例子，所以值得一提:加快jQuery脚本性能的最佳方法之一是缓存jQuery对象，和/或使用链接:

// poor
$(this).animate({'opacity':'0'}, function() { $(this).remove(); });

// excellent
var element = $(this);
element.animate({'opacity':'0'}, function() { element.remove(); });

// poor
$('.something').load('url');
$('.something').show();

// excellent
var something = $('#container').children('p.something');
something.load('url').show();

我发现JS和JQ之间确实有重叠。您所展示的代码就是一个很好的例子。坦率地说，使用JQ而不是JS的最佳理由仅仅是浏览器兼容性。我总是倾向于JQ，即使我能用JS完成一些事情。