何时使用香草JavaScript与jQuery？

我注意到，在监视/尝试回答常见的jQuery问题时，有一些使用javascript而不是jQuery的做法，实际上可以让您编写更少的内容，并且。。。嗯，同样的数量。而且还可能产生性能优势

一个具体的例子

$（this）

vs

this

在引用已单击对象id的单击事件内

jQuery

$(this).attr("id");

Javascript

this.id;

还有其他类似的常见做法吗？在这里，某些Javascript操作可以更容易地完成，而无需将jQuery加入到组合中。还是这是一个罕见的案例？（实际上需要更多代码的jQuery“快捷方式”）

编辑：虽然我很欣赏关于jQuery与普通javascript性能的答案，但实际上我正在寻找更多的定量答案在使用jQuery时，如果使用纯javascript而不是使用

$（）

，则会更好（可读性/紧凑性）的实例。除了我在原始问题中给出的示例之外。

当：

您知道，对您正在做的事情有着坚定的跨浏览器支持，并且

输入的代码并不多，而且

它的可读性并没有显著降低，并且

您有理由相信jQuery不会基于浏览器选择不同的实现来实现更好的性能，那么：

使用JavaScript。否则使用jQuery（如果可以的话）

---

编辑：这个答案既适用于选择整体使用jQuery还是不使用jQuery，也适用于选择是否在jQuery中使用vanilla JS。在

attr（'id'）

和

.id

之间选择有利于JS，而在

removeClass（'foo'）

和

.className=.className.replace（新的Regexp（（？：^ | \\s+）+foo+”（？：\\s+），'g'），“

有利于jQuery。

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

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

jQuery之所以强大，是因为它在跨浏览器的情况下做了一些过于繁琐的事情（AJAX是最好的例子之一），消除了无数可用浏览器之间的不一致，并提供了一致的API。它还很容易简化诸如链接、隐含迭代等概念，从而简化对元素组的处理

学习jQuery不能代替学习JavaScript。你应该为后者打下坚实的基础，这样你才能充分理解了解前者会让你变得更容易

--编辑以包含评论--

正如评论很快指出的（我100%同意），上面的陈述是指基准测试代码。“本机”JavaScript解决方案（假设编写得很好）的性能将优于几乎在所有情况下都能完成相同任务的jQuery解决方案（我希望看到一个不同的示例）。jQuery确实加快了开发时间，这是一个显著的好处，我并不是有意淡化这一点。它使代码易于阅读，易于理解，这是一些开发人员无法自行创建的

---

在我看来，答案取决于你想要达到的目标。如果，正如我根据您提到的性能优势所推测的那样，您正在追求应用程序的最佳速度，那么每次调用

$（）

时，使用jQuery都会带来开销。如果你想要可读性、一致性、跨浏览器兼容性等，那么肯定有理由支持jQuery而不是“本机”JavaScript。

这是我个人的观点，但不管怎样，jQuery是JavaScript，我认为理论上它的性能不可能比vanilla JS更好

但实际上，它可能比手工编写的JS性能更好，因为手工编写的代码可能不如jQuery高效

---

底线-对于较小的东西，我倾向于使用vanilla JS，对于JS密集型项目，我喜欢使用jQuery，而不是重新发明轮子-它的效率也更高。

如果您主要关注性能，那么您的主要示例就一针见血了。不必要地或冗余地调用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();

---

其他人的回答集中在“jQuery vs.plain JS”这一广泛的问题上。从你的评论来看，我想你只是想知道如果你已经选择使用jQuery，什么时候使用vanilla JS更好。您的示例是您应该何时使用vanilla JS的完美示例：

$（this.attr（'id'）

在我看来，它的速度较慢，可读性也不如：

此.id

它的速度较慢，因为您必须启动一个新的JS对象，以便以jQuery的方式检索属性。现在，如果您要使用
$（this）
执行其他操作，那么请务必将jQuery对象存储在一个变量中并使用该变量进行操作。但是，我遇到过许多情况，我只需要元素中的属性（比如
id
或
src
）

还有其他常见的做法吗
这样地？其中某些Javascript
行动是可以完成的
更简单，无需将jQuery引入
混合。或者这是一种罕见的ca
$(el).attr('someName');

el.getAttribute('someName');

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

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] );
}