何时使用原生JavaScript而不是jQuery

以前，网站是静态的。然而，原始JavaScript的引入改变了网站的外观和功能。原生JS帮助开发人员创建动态网站。然后就有了jQuery，这是一个由世界各地的开发人员使用JavaScript创建的工具库。

简单来说，jQuery是一个轻量级且易于使用的JavaScript库，它可以通过少量的代码创建复杂的功能。jQuery可以帮助处理CSS操作，进行AJAX请求，处理从服务器接收到的JSON数据，并且可以帮助添加动画效果（例如隐藏、显示等）到组件中。最好的部分是jQuery适应性强，兼容市场上的所有浏览器，因此开发人员不需要担心用户使用的浏览器。

jQuery简化了很多事情。使用jQuery实现某些功能比原生JS更容易。看一个示例，我们要在用户点击“点击此处以获取弹出窗口！”按钮后，在屏幕上显示一个弹出消息。

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而不是jQuery

点击按钮之后：

何时使用原生JavaScript而不是jQuery

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>

输出：

点击按钮之前：

何时使用原生JavaScript而不是jQuery

点击按钮之后：

何时使用原生JavaScript而不是jQuery

可以清楚地看到，与普通的JavaScript代码相比，jQuery的编码更短且简化了许多。让我们看另一个示例以更好地理解。

假设程序员想选择所有具有类名为 'hello' 的元素。
JavaScript

document.getElementsByClassName("hello");

jQuery

$('.hello')

没有一本书是规定在哪里使用jQuery和在哪里使用JavaScript的。据说，jQuery在DOM操作方面比JavaScript更好，然而，在对它们的性能进行监测后，发现纯JavaScript比jQuery更快。然而，对于初学者来说，使用JavaScript编写复杂功能可能会变得困难。

jQuery vs JavaScript

JavaScript	jQuery
弱类型的动态编程语言。	功能丰富、轻量级且易于使用的JavaScript库。
用于创建动态网站用户友好界面的脚本语言。	用于处理AJAX请求、操作CSS以及创建幻灯片、隐藏等动画效果的JS框架。
所有的编码都必须从头开始编写。对于初学者来说可能会难以理解和耗费时间。	jQuery有几个预先编写好的函数。只需要进行必要的修改即可。节省了很多时间。
开发者需要考虑多浏览器兼容性。与浏览器相关的错误可能更常出现。	jQuery与所有现代浏览器兼容。不会出现任何浏览器兼容性问题。
运行JS不需要额外的插件。不需要添加任何额外的插件，因为所有浏览器都支持JavaScript。	jQuery库脚本链接必须包含在网页的head标签中。
代码行较长。可能导致代码复杂难以维护。	完成同样的工作所需的代码较少。
可以更快地访问DOM。	最适合复杂操作，开发者通常会在其中出错并编写糟糕的代码。
学习难度较大。学习曲线陡峭。	相对容易学习。

简而言之，对于像WordPress、Weebly等CMS网站，jQuery是更好的选择。它因为拥有庞大的插件库使开发变得更加容易。然而，尽管jQuery是由Javascript制作而成，忽视原生Javascript并不是一个明智的决定。如果您想成为前端或全栈web开发人员，学习原生JS是必不可少的。这是因为Javascript还有其他的框架和库，如Angular、React和Vue，这些都比jQuery有着更多的优点。这就是为什么建议首先深入学习原生JS，因为库和框架会来来去去，但它们的基础始终是原生JS。这就是为什么在面试中，懂得Javascript的候选人会比其他懂得jQuery的候选人占有优势。

还必须知道，正在学习原生JS的人会发现切换到jQuery更容易。然而，从jQuery切换到Javascript可能一开始看起来并不顺利。根据最近的一项调查，发现全球排名前100万的网站中约有77%使用jQuery，因此先学习原生语言总是向前迈进的最佳方式。