这里有一个非技术的答案——许多工作可能不允许某些库，比如jQuery。

事实上，谷歌不允许在他们的任何代码中使用jQuery (React也不允许，因为它属于Facebook)，直到面试官说“对不起，你不能使用jQuery，它不在XYZ公司的批准名单上”，你才可能知道这一点。Vanilla JavaScript绝对可以在任何地方、任何时候工作，并且永远不会给你这个问题。如果你依赖于一个库，是的，你得到了速度和轻松，但你失去了通用性。

另外，说到面试，另一个缺点是，如果你在代码测试中说你需要使用一个库来解决一个JavaScript问题，它给人的印象是你实际上并没有理解这个问题，这看起来有点糟糕。然而，如果你用原始的JavaScript来解决它，这表明你实际上理解并可以解决任何摆在你面前的问题。

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

其他人的回答集中在“jQuery vs.纯JS”这个宽泛的问题上。从你的OP来看，我认为你只是想知道如果你已经选择使用jQuery，什么时候使用普通JS更好。你的例子是一个完美的例子，当你应该使用香草JS:

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

既慢，(在我看来)可读性较差:

this.id。

它更慢，因为你必须旋转一个新的JS对象，只是为了用jQuery的方式检索属性。现在，如果你要使用$(this)来执行其他操作，那么无论如何，将jQuery对象存储在一个变量中并对其进行操作。但是，我遇到过很多只需要元素的属性(比如id或src)的情况。

还有其他常见的做法吗 像这样的吗?某些Javascript 可以完成操作 更简单，无需引入jQuery 混合。或者这是一种罕见的情况?( jQuery的“快捷方式”实际需要 更多的代码)

我认为最常见的情况是你在你的帖子中描述的;人们不必要地在jQuery对象中包装$(this)。我最常看到的是id和value(而不是使用$(this).val())。

编辑:这里有一篇文章解释了为什么在attr()情况下使用jQuery比较慢。坦白:从标签维基上偷来的，但我认为这个问题值得一提。

再次编辑:考虑到直接访问属性的可读性/性能影响，我认为一个好的经验法则可能是尝试使用它。如果可能，<attributename>。在某些情况下，由于浏览器不一致，这种方法可能不起作用，但如果它不起作用，最好先尝试这种方法，然后再求助于jQuery。

有一个框架叫做。你猜怎么着?香草JS。希望你能听懂这个笑话……为了性能，它牺牲了代码的可读性。将它与jQuery进行比较，您可以看到通过ID检索DOM元素几乎快35倍。：）

因此，如果你想要性能，你最好尝试Vanilla JS，并得出自己的结论。也许你不会遇到JavaScript在像for循环这样的密集代码中挂起浏览器的GUI/锁定UI线程。

Vanilla JS是一个快速、轻量级、跨平台的框架 构建令人难以置信的强大JavaScript应用程序。

在他们的主页上有一些性能比较:

$(this)与this不同:

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

已经有了一个公认的答案，但我相信这里直接输入的答案不能在本机javascript方法/属性列表中全面地保证跨浏览器支持。为此，请允许我把你引向quirkmode

http://www.quirksmode.org/compatibility.html

它可能是关于在任何地方的任何浏览器上什么可以工作，什么不能工作的最全面的列表。请特别注意DOM部分。要读的东西很多，但重点不是全部读完，而是作为参考。

当我开始认真编写web应用程序时，我打印出了所有的DOM表，并把它们挂在墙上，这样我就能一眼知道哪些是安全的，哪些需要hack。这些天，当我有疑问时，我只是谷歌一些类似quirksmode parentNode兼容性的东西。

和其他事情一样，判断主要是一种经验。我不建议你阅读整个网站，记住所有的问题来弄清楚什么时候使用jQuery，什么时候使用纯JS。只是要注意这个列表。搜索起来很容易。随着时间的推移，你会发现什么时候纯JS更可取。

PS: PPK(网站的作者)也有一本非常好的书，我推荐你去读