当您刚开始学习 Web 开发时，您会注意到越来越多的新交互选项的大门开始打开。随着学习曲线开始变得更加平坦，各种交互元素、优化以及介于两者之间的一切似乎都是自然而然的事情。无论您选择学习 Web 开发的方式是什么——无论是与老师、在线还是自学——您可能都听说过，你可能都听说过，在这些场景中，你总是应该选择JavaScript。毕竟，它是互联网的语言！但是如果我告诉你还有另一种选择呢？在本教程中，我们将探索jQuery和JavaScript的持续对抗，以及这种对抗提供的一切。
我会告诉你关于这两种语言的所有信息——它们的用途，它们的优缺点等等。在本教程的稍后部分，当我们把它们都弄清楚后，我们将从不同的角度对它们进行比较和对比 - 代码可访问性、职业机会等等。所以，事不宜迟，让我们直接进入它！
目录
jQuery和JavaScript的困境
然而，当您在网上寻找JavaScript问题的一些答案时，您会发现答案只是简单地说“用jQuery来解决”。
最新优惠现在有效:
SAVE 50%
DataCamp End of Year Sale
Unlock a year of unlimited data and AI learning at half the price! This is your final call to save big on expertise for 2025. Act fast and secure your 50% discount with DataCamp's End of Year Sale – the clock is ticking!
您的反应可能是“什么是 jQuery？” 您认为您必须了解 JavaScript，但现在有替代方案吗？您还没有为jQuery和JavaScript的困境做好准备……
或者，您可能是从相反的角度看待这个困境的。jQuery是为您的网站推荐给您的方法，但您现在已经在网上阅读到，JavaScript可以完成jQuery所能做的一切以及更多，同时使用普通JavaScript编码也可以让您成为更好的开发人员。
现在你要问自己，'什么是 JavaScript？为什么事情不能简单？我不能只使用jQuery吗？
但是，请稍等一下，如果您要了解 Javascript 和jQuery根本不是两个不同的选择，是否会增加您的困惑？
jQuery是 JavaScript
我们可能将jQuery和JavaScript的困境呈现为两种相互竞争的技术之间的较量，但实际上，JavaScript和jQuery之间的区别在于jQuery只是使用JavaScript的不同方式。
jQuery通常被称为框架或库。不过，在我们解决这些术语的含义之前，让我们快速确保没有人想知道“什么是 JavaScript？”
JavaScript
JavaScript是浏览器的编程语言，或者至少直到最近它才如此——它的影响范围现在已经超出了浏览器窗口的范围，扩展到其他用途，例如服务器端代码。
作为写入每个 Internet 浏览器的客户端编程语言，它的主要目的是负责网页上的交互式和动态元素，例如聆听和响应用户输入。
现在，jQuery怎么样？
什么是jQuery？
正如我们所确定的，jQuery是一个JavaScript库。这意味着它是打包在一起的JavaScript代码的集合，可以通过更简单的代码行访问，从而使开发人员可以更轻松地实现 JavaScript，而无需编写复杂的JavaScript代码，这要归功于打包的预先编写的代码在jQuery中。
如果您已经熟悉 Bootstrap，一个很好的类比可能是CSS 和Bootstrap之间的关系。Bootstrap 只是一组CSS 命令，可以更轻松、更快速地设置网页样式。jQuery之于JavaScript就像Bootstrap之于CSS。
对于那些不熟悉Bootstrap的人，让我们尝试将jQuery与 Javascript 问题进行一个真实的类比。
假设你和你的朋友戴夫在酒吧里。戴夫喝了太多啤酒，他说话的声音太大了。你希望戴夫不再让你难堪，不再大声说话。
你的做法是向 Dave 解释你已经注意到酒吧后面的女人朝他的方向做了一张恼怒的脸。
你解释说坐在你旁边桌子的那位先生已经搬走了以获得一些平静。你告诉戴夫，他的妻子不会欣赏与整个酒吧分享他们关系的一些细节。
戴夫不再说话。这是让 Dave 停止说话的JavaScript方法。
jQuery方法是简单地说：
“别说话了，戴夫”。
戴夫不再说话。你用更少的词实现了同样的事情，而且要容易得多。
最喜欢的发现
寻找有关相关主题的更深入信息吗？ 我们收集了类似的文章供您节省时间。 来看一看吧！
代码中的jQuery与 JavaScript
BitDegree 的“交互式jQuery教程：学习如何使用jQuery效果和事件”中的第一课使JavaScript和jQuery之间的区别在代码中非常清晰。
该示例是一个 HTML 按钮，用于打开和关闭登录表单。
这是JavaScript代码：
const login = document.getElementById("login");
const loginMenu = document.getElementById("loginMenu");
login.addEventListener("click", () => {
if(loginMenu.style.display === "none"){
loginMenu.style.display = "inline";
} else {
loginMenu.style.display = "none";
}
});
虽然这里是jQuery代码:
$("#login").click(() => {
$("#loginMenu").toggle()
});
在JavaScript中需要 9 行代码，而在jQuery中只需要 3 行代码即可实现。
过早的结论
所以这看起来很简单，不是吗？使用 jQuery。
十年前它可能很简单，但在 2018 年，jQuery在 Web 开发中的相关性正在下降，像上面的代码这样的例子变得越来越少。
学习和使用jQuery仍然有很好的理由，但如果是jQuery和JavaScript的问题，那么理解和能够使用JavaScript的需求正在迅速加速，它的一些新功能使jQuery的许多功能得以实现多余的。
再次回到酒吧
为了证明jQuery与 Javascript 辩论中的另一个论点，让我们回到酒吧来进一步扩展我们的类比。你决定简单地告诉戴夫闭嘴。虽然是实现目标的有效策略，但戴夫在与您合租回家的出租车上心烦意乱。
如果您使用JavaScript策略向 Dave 解释他应该压低声音，您可能已经能够饶恕他的感受并让他保持好心情。使用JavaScript策略，您的说服力可能会大得多，即使它需要付出更多努力。
同样，如果您学习 JavaScript，您的 Web 开发能力将远远超过您只学习jQuery时的能力。也许让戴夫闭嘴不会让他感到不安，但这可能是不可预测的。
相比之下，jQuery命令的行为可能正是您所需要的，但如果不了解使jQuery工作的代码就很难确定。当然，由于jQuery由JavaScript代码组成，您需要了解JavaScript才能完全理解每个jQuery命令的工作原理。
从逻辑上讲，JavaScript可以做jQuery可以做的所有事情，甚至更多，因为再次强调，jQuery只是 JavaScript。
第二个过早的结论
那么就这样了吗？jQuery和JavaScript的区别在于jQuery更简单、更容易，但JavaScript更强大，不会让 Dave 感到不安。那么JavaScript和jQuery问题的答案是学习 JavaScript？
不，不完全是。不幸的是，对于jQuery和JavaScript的问题，没有一种万能的答案。您是否需要jQuery或JavaScript取决于您的职业目标和项目所需的功能。
职业目标
如果您的目标是成为前端开发人员，那么jQuery和JavaScript问题的答案很简单：学习 JavaScript。招聘广告可能会要求 jQuery，但JavaScript和jQuery的问题对于任何招聘经理来说都是一个简单的问题：他们几乎肯定会更喜欢了解JavaScript的候选人，而不是了解jQuery的候选人。
即使一家公司广泛使用 jQuery，也假设一个可以理解JavaScript的候选人可以快速轻松地学习 jQuery。学习JavaScript要困难得多，即使您是jQuery高手。
但是，如果您的目标是成为一名自由网页设计师，那么JavaScript可能不是那么必要。如果您在 WordPress 等内容管理系统上为客户构建网站，则可以通过jQuery或为您的网站添加功能的免费插件来处理对JavaScript的大量需求。
无需自定义JavaScript代码即可构建绝大多数在线网站。只要您认识到哪种网站功能需要您编写自定义JavaScript代码，什么不需要，对于具有 HTML、CSS 和jQuery技能的网页设计师来说，就有很多工作要做。
至此，我已经回答了什么是 JavaScript，什么是jQuery的问题。JavaScript和jQuery之间的区别应该是清楚的，但是JavaScript和jQuery的答案对很多人来说仍然不清楚。
如果您已下定决心并渴望开始学习，您可以点击图中两门课程中的任何一门课程的链接，立即开始学习。如果您对语言之间的更详细比较感兴趣，请继续阅读。
特定功能
因此，现在您已经了解了JavaScript是什么、jQuery是什么，以及它们在您选择的职业道路中的价值，让我们深入研究具体的用例。
JavaScript可以做jQuery可以做的任何事情，那么使用jQuery代码可能更好的具体实例是什么？
跨浏览器兼容性
向经验丰富的开发人员提及 Internet Explorer，您可能会看到他们的脸变红、眼睛凸出、静脉曲张、握紧拳头，因为他们在思考自己职业生涯中的黑暗时期，当时很多人都使用微软著名的浏览器。提起IE8，开发者的脑袋很可能会爆炸。
jQuery的很多增长都可以归因于它填补了浏览器之间的差距。今天的大多数浏览器都以相同的方式解释 JavaScript，但十年前浏览器之间存在巨大差异。您必须以各种方式编写代码，以便每个浏览器都能理解它。
或者，您可以使用 jQuery，它为您完成了繁重的工作。jQuery库会将一行jQuery代码解释为取悦每个浏览器所需的多行JavaScript代码。对于开发人员来说，在这些情况下使用jQuery是轻而易举的事。
但如今，这些浏览器差异很小。如果您确实发现了差异，例如在使用JavaScript语言 ES6 最新更新的某些功能时，建议改用 polyfill。Polyfills 只是处理浏览器之间这些差异的库，可以仅使用在脚本标签中引用 polyfill CDN 的 URL 来实现。
现代 polyfill 将检测最终用户使用的浏览器，并仅提供使您的代码适应用户浏览器所需的代码。这节省了加载时间，就好像用户只加载他们需要的代码一样，您的网站在他们的机器上加载的速度将比他们加载整个jQuery库时更快。
跨浏览器兼容性曾经可能是使用jQuery的关键原因，但现在它甚至不是解决问题的最好解决方案，而这个问题现在远不及以前那么重要。
DOM 操作
DOM 或文档对象模型是浏览器对您提供的网页的解释。如果您右键单击任何网页并单击检查，则在元素窗格下您将看到 DOM。它可能看起来就像您的 index.html 代码，但请留意，很多 HTML 内容通常是使用服务器端代码（例如 PHP）从服务器动态呈现的。
DOM 元素也可以使用JavaScript进行渲染和操作，这是jQuery曾经被证明非常有用的另一个领域。
使用 jQuery，您可以定位 DOM 节点，本质上是 HTML 元素，例如带有代码的二级标题
$(“h2”)
然后，您可以将函数链接到该代码以执行您喜欢的任何操作，例如侦听事件或修改 DOM 以在用户使用网站时更改网站上的内容。
使用 JavaScript，你可以使用代码做同样的事情，
document.querySelector("h2")
这不是一个巨大的差异，是吗？过去，使用JavaScript的 DOM 操作方法在浏览器之间并不那么容易或一致。此外，使用 vanilla JavaScript（vanillaJavaScript意味着没有任何库的纯、未更改的 JavaScript）被认为性能更高——这意味着它更快和/或使用更少的内存资源。
同样，这看起来像是JavaScript在jQuery和JavaScript辩论中的又一次胜利。然而，jQuery的流行意味着您将看到大量jQuery代码用于旧的应用程序，甚至是新的应用程序，因为许多开发人员只是觉得使用jQuery更舒服。
Bling.js 等新库甚至允许您使用jQuery语法，而无需加载整个jQuery库，这证明了许多开发人员对编写jQuery的喜爱。
虽然您可能应该使用 JavaScript，但如果您知道相对性能损失不会对您的目标最终用户产生太大影响，那么使用 jQuery，因为您知道使用它比使用普通JavaScript可以更快、更轻松地开发是合乎逻辑的.
因此，虽然您可能应该学习如何使用 vanillaJavaScript进行 DOM 操作，但如果您打算与其他人一起工作，那么了解jQueryDOM 操作方法几乎肯定会在某些时候证明有用。
效果和动画
jQuery包含一个效果库，包括本文初始jQuery和JavaScript代码比较中显示的切换方法。toggle 方法是使用jQuery实现功能比使用JavaScript更简单的一个很好的例子。
不过如今，开发人员可以访问 Web Animations API 和CSS Transitions。这两种技术是浏览器原生的，这意味着您的 Web 浏览器无需加载任何库即可理解它们，并且它们的执行速度比必须从jQuery库加载动画更快。
在某些情况下，jQuery将是一种更简单的实现动画的方法，但现在与开发人员拥有的浏览器原生选项的范围相比，它非常有限。
APIs api
过去jQuery的另一个出色用例是它能够进行 API 调用。调用 API 就是将数据从外部来源拉入您的网站，例如，您可能希望在您的网站上展示自定义地图，以便您使用 API 从 Google 获取 Google 地图数据。
调用 API 的jQuery方法比原生 XML 方法更受欢迎，但同样，与其他用例一样，现在有一种称为 Fetch 的高级方法，它是浏览器原生的，可以说与jQuery一样用户友好.
你知道吗
您是否想知道哪些在线学习平台最适合您的职业？
最新趋势的发现
浏览我们最全面的与加密货币相关的文章，指南和教程的集合。 始终保持了解并做出明智的决定！
结论
有时，最有用的技术并不是开始学习的技术。发展是困难的，在你的学习路径开始时学习一门过于困难的语言可能足以让你完全失望。
JavaScript是一种强大的工具，但不是您在几天甚至几周内就能掌握的。即使是经验丰富的JavaScript开发人员仍然经常被他们的行为所迷惑。
作为编程和 Web 开发的新手，您将无法在几周内使用您萌芽的JavaScript技能做很多事情。但是，如果您已经了解 HTML 和CSS，那么jQuery可能会在短短几天内将您的项目提升到另一个层次。
许多 Web 开发人员首先通过学习jQuery进入 Web 开发。虽然学习JavaScript基础知识可能是成为一名优秀的前端开发人员最重要的部分，但在你的教育中获得一些快速的胜利也很重要，而jQuery是实现这一目标的更快方法。
当您看到jQuery使您的项目栩栩如生时，您就会有动力去学习更多；使用 JavaScript，在您看到相同的结果之前，可能需要更多周的学习和更多的错误。
通过学习 jQuery，您还将开始了解JavaScript的强大功能。您将能够完成许多需要JavaScript开发人员执行的常见任务，但通过突破使用jQuery所能实现的界限，您还将了解使用JavaScript可以做的更多事情。
学术参考
关于本文的专家和分析师
