极客教程什么时候使用Vanilla JavaScript与jQuery
早些时候，网站曾经是静态的。然而，vanilla JavaScript的引入彻底改变了网站的外观和功能。Vanilla JS帮助开发者创建动态网站。然后，jQuery出现了，这是一个由世界各地的开发者使用Javascript创建的工具库。
简单地说，jQuery是一个轻量级的、易于使用的JavaScript库，有助于用几行代码创建复杂的功能。最重要的是，jQuery具有浏览器灵活性。这意味着jQuery与市场上的每个浏览器都兼容，因此开发者不必担心用户可能使用的浏览器。
jQuery简化了很多事情。使用jQuery实现一些东西比vanilla JS更容易。请看这个例子。在这里，我们必须在用户点击 “click here for popup!”按钮后，在屏幕上显示一个弹出信息。
jQuery 代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="styles.css">
<script src="app.js"></script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body>
<input id="button1" type="button"
value="click here for popup!" />
<script>
$('#button1').click(function() {
alert("GeeksforGeeks");
});
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击按钮后。
JavaScript 代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src = "app.js"></script>
</head>
<body>
<input id="button1" type="button"
value="click here for popup!"/>
<script>
document.getElementById("button1")
.addEventListener('click', function(){
alert("GeeksforGeeks");
});
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击按钮后。
可以很容易地看到，jQuery的编码比vanilla JS的编码更短，更简化。让我们看一下另一个例子，以便更好地理解。
假设程序员想选择所有具有类名=’hello’的元素。
document.getElementsByClassName("hello");
jQuery
$('.hello')
没有一本成文的规则书告诉我们哪里应该使用jQuery，哪里应该使用JavaScript。据说jQuery比Javascript更适合DOM操作，然而，在监测了它们的性能后，发现vanilla JS比jQuery更快。然而，使用Javascript编写复杂的功能对新手来说可能会很困难。
jQuery与Javascript的关系
| JavaScript | jQuery |
|---|---|
| 一种弱类型的动态编程语言。 | 一个丰富、轻量级、易于使用的JavaScript库。 |
| 一种脚本语言，用于创建动态网站的用户友好界面。 | JS框架用于处理AJAX请求，操作CSS，并创建动画，如滑动、隐藏等。 |
| 所有的编码都必须从头开始做。对于新手来说，这可能是一个困难和耗时的过程。 | jQuery有几个预先写好的功能。只需要进行必要的修改。节省了大量的时间。 |
| 开发人员必须照顾到多浏览器的兼容性。浏览器相关的错误更容易出现。 | jQuery可以在所有的现代浏览器上工作。任何浏览器都不存在这种兼容性问题。 |
| 运行JS不需要额外的插件。不需要添加任何额外的插件，因为所有的浏览器都支持JavaScript。 | jQuery库的脚本链接必须包含在网页的头部标签内。 |
| 冗长的代码行。可能导致意大利面条式的代码。 | 做同样的工作需要更少的编码。 |
| DOM可以被更快地访问。 | 它最适合于复杂的操作，因为在这些操作中，开发人员通常会犯错误，写出糟糕的代码行。 |
| 不容易学习。学习曲线很陡峭。 | 相对来说更容易学习。 |
简而言之，jQuery是使用CMS网站（如WordPress、Weebly等）时的一个更好的选择。它使开发变得更容易，因为它已经有了庞大的插件库。然而，尽管jQuery是由Javascript制成的，但忽视vanilla Javascript并不是一个明智的决定。如果你想成为一个前端或全栈网络开发人员，那么学习香草Javascript是必要的。这是因为Javascript还有其他框架和库，如Angular、React和Vue，它们比jQuery有大量的优势。这就是为什么建议首先深入学习vanilla JS，因为库和框架会不断出现，但所有这些框架的基础永远是vanilla JS。这就是为什么在面试中，了解Javascript的候选人会比其他了解jQuery的候选人更有优势的原因。
还必须知道，一个正在学习vanilla JS的人，会发现切换到jQuery更容易。然而，从jQuery切换到Javascript，起初可能并不顺利。根据最近的一项调查，据观察，在互联网上排名前100万的网站中，约有77%的网站使用jQuery，先学习vanilla语言总是最好的方法。