jquery是世界上使用最广泛的javascript库。web开发社区在21世纪末兴起了jquery，创建了一个由网站、插件和框架组成的丰富的生态系统，这些系统在幕后使用jquery。

但在过去几年中，jquery作为web开发的头号工具的地位已经降低。让我们来看看jquery为什么变得流行，为什么它又失宠，什么场景下它仍然是一个现代网站的好选择。

query简史

john resig在2005年开发了jquery的初始版本，并在2006年发布了它。在最初的jquery网站上，他写道：

jquery是一个javascript库，它把这句格言放在心上：编写javascript代码应该很有趣。jquery通过执行常见的、重复的任务，去掉所有不必要的标记，使它们简短、智能、易懂，从而实现了这一目标。

jquery有两个主要的价值主张。第一个是提供一个便于操作网页的api。特别是，它提供了强大元素选择器。

除了只根据元素的id或类选择元素之外，jquery还允许复杂的表达式，比如根据元素间的关系选择元素：

// 选择列表中的每个li

$('#contactsul.people li');

第二个卖点是它消除了浏览器之间的差异。在当时，浏览器的兼容性是非常糟糕的。

缺乏标准化意味着开发人员必须考虑许多不同的浏览器兼容性。只要看看这个早期的jquery源代码，然后搜索jquery.browser以查看一些示例。这里有一个：

//IfMozillaisusedif( jQuery.browser =="mozilla"|| jQuery.browser =="opera"){        // Use the handyevent callback        jQuery.event.add(document,"DOMContentLoaded", jQuery.ready );// If IE isused, use the excellent hack by Matthias Miller//https://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited}elseif( jQuery.browser =="msie"){        // Only works ifyou document.write() it        document.write("<scr"+"iptid=__ie_init defer=true "+                "src=javascript:void(0)></script>");        // Use the deferscript hack        var script =document.getElementById("__ie_init");        script.onreadystatechange=function(){                if(this.readyState =="complete")                        jQuery.ready();        };        // Clear frommemory        script =null;// IfSafari  is used}elseif( jQuery.browser =="safari"){        // Continuallycheck to see if the document.readyState is valid        jQuery.safariTimer = setInterval(function(){                // loaded andcomplete are both valid states                if(document.readyState =="loaded"||                        document.readyState =="complete"){                        // If either oneare found, remove the timer                        clearInterval( jQuery.safariTimer );                        jQuery.safariTimer =null;                        // and executeany waiting functions                        jQuery.ready();                }        },10);}

通过使用jquery，开发人员可以忽略浏览器间的兼容性。

后来，jquery支持更强大的功能，比如动画和ajax。jquery实际上成了网站的标准依赖项。今天，它继续为互联网的很大一部分提供动力。w3techs估计，大约74%的网站使用jquery。

jquery的管理也变得更加正式。2011年，jquery团队正式创建了jquery委员会。在2012中，JQuery委员会形成了JQuery基金会。

在2015中，jQuery基金会合并了“基金会”基金会，成立了JS基金会，然后在2019与基金会合并，形成了基金会基金会，并将jQuery作为其“影响项目”之一。

不断变化的环境

然而，近年来jquery的受欢迎程度有所下降。github从他们的网站前端删除了jquery，bootstrap v5将删除jquery，因为它是bootstrap的“常规javascript最大的客户端依赖项”（目前是30kb，已缩小并gzip）。web开发的几个趋势削弱了jquery作为一个必须使用的工具的地位。

浏览器

由于几个原因，浏览器的差异和限制变得不那么重要。一是标准化水平提高。主要的浏览器供应商（苹果、谷歌、微软和mozilla）通过web超文本应用技术工作组就web标准进行协作。

虽然浏览器在很大程度上仍然存在差异，但厂商至少有办法找到并开发共同点，而不是彼此之间展开不间断的战争。因此，浏览器api变得更加强大。例如，fetch api可以替代jquery的ajax函数：

// jQuery$.getJSON('https://api.com/songs.json')    .done(function(songs){        console.log(songs);    })// nativefetch('https://api.com/songs.json')    .then(function(response){        return response.json();    })    .then(function(songs){        console.log(songs);    });queryselector和queryselectorall方法复制jquery的选择功能：// jQueryconst fooDivs = $('.foo div');// nativeconst fooDivs =document.querySelectorAll('.foo div');

现在可以使用classlist操作元素类：

他可能不需要jquery网站列出更多的jquery代码可以替换为本机代码的情况。有些开发人员总是使用jquery，因为他们不知道这些api是可用的，但是随着开发人员对它们的了解，他们对jquery的依赖性降低了。

使用本机功能还可以提高网页的性能。许多jquery动画效果现在可以用css更有效地实现。

第二个原因是浏览器更新的速度比过去快。

大多数浏览器现在都有一个自动更新策略，苹果的Safari是主要的例外。它们可以在无需用户干预的情况下自动更新自己，并且不受操作系统更新的限制。

这意味着新的浏览器功能和bug修复程序可以更快地被用户采用，开发人员不必等待我使用百分比达到可接受的水平。他们可以放心地使用特性和api，而不必加载jquery或polyfill。

第三个原因是internet explorer用户量越来越少。ie一直是世界各地web开发人员的祸根。IE特有的漏洞是出了名的普遍，而且由于IE是21世纪的主流浏览器，并且缺乏永久性的更新，旧版本顽固地挂在那里。

微软加快了IE的速度，在2016年结束了对IE 10及以下版本的支持，将IE 11作为最后一个支持版本。越来越普遍的是，web开发人员有幸忽视了ie的兼容性。

甚至jquery在2013年2.0版发布时也放弃了对ie 8及其以下版本的支持。虽然像传统网站这样的特殊情况仍然需要IE，但这种情况越来越少见。

新框架

自jquery发布以来，出现了大量的web框架，其中一些当前的领先者是react、angular和vue。与jquery相比，这些框架有两个显著的优势。

首先，它们可以很容易地将ui分解为组件。它们被设计用来处理页面的呈现和更新。jquery通常只用于更新页面，依赖服务器提供初始页面。

另一方面，react、angular和vue组件允许html、代码甚至css之间的紧密耦合。同样，我们可以将一个代码库分解为多个自包含的函数和类，将一个ui分解为可重用的组件使得构建和维护一个复杂的网站更加容易。

第二个优点是，较新的框架鼓励声明式规范，在这种规范中，开发人员描述ui应该是什么样的，并将其留给框架来进行必要的更改。这种方法与以jquery代码为特征的命令式方法相反。

使用jquery，您可以显式地编写进行任何更改的步骤。对于声明性框架，你可以说，“基于这些数据，这就是ui应该呈现的样子。”这可以显著减少编写多余的代码。

开发人员采用了这些新的方法来构建网站，降低了jquery的相关性。

何时使用jquery

那么我们什么时候应该选择使用jquery呢？

如果所讨论的项目预计会变得越来越复杂，那么最好选择一个不同的库或框架开始，它将允许您从容地处理这种复杂性，例如将ui分解为组件。对这样一个网站使用jquery一开始可以很好，但它可以很快变的越来越复杂，在这里您不确定什么代码会影响页面的哪些部分。

我以前处理过这个问题，每当你想改变的时候，这种情况就会产生一种不安的感觉。很难确定没有中断任何内容，因为jquery选择器依赖于服务器生成的html结构。

另一方面，你有一个简单的网站，只需要少量的交互性或动态内容。对于这些情况，我仍然建议不使用jquery，因为我们现在可以使用本机api做更多的事情。

即使我确实需要更强大的功能，我也会为这个用例寻找一个特定的库，比如Axios forAJAX或animate.css for animations。使用这样的库通常比为jquery的一点功能加载整个jquery更轻量级。

我认为使用jquery的最好理由是它提供了为网站前端提供便捷的全面功能。不必学习所有各种本地api或特殊用途的库，只需阅读jquery文档，就可以立即提高工作效率。

它的命令式方法不能很好地扩展，但是它比其他库的声明式方法更容易学习。对于一个范围明显有限的网站来说，加入jquery并继续前进是合理的；它不需要任何复杂的构建或编译过程。

那么，jquery是一个很好的选择，因为您有理由相信网站不会变得更加复杂，而且您不想使用本机功能，因为本机功能肯定比同等的jquery代码更加冗长。

当你必须支持旧版本的ie时，在这种情况下，jquery是明智的选择。

期待

jquery不会很快离开。它正在进行积极的开发，很多开发人员甚至在有本机方法可用时也喜欢使用它的api。

它帮助一代开发人员创建了可以在每个浏览器上工作的网站。尽管jquery在许多方面被新的库、框架和范例所取代，但它在web发展方面发挥了巨大的积极作用。

除非jquery功能发生重大变化，否则jquery在未来几年中的使用率会继续缓慢而稳定地下降。新的网站往往从一开始就使用更现代的框架来构建，jquery的使用场景会变得越来越少。

有些人对web开发工具的流失率感到不满，但对我来说，这是一个快速进步的迹象。jquery给了我们更好的做事方法。它的继任者也这样做了。

原文链接：

https://blog.logrocket.com/the-history-and-legacy-of-jquery/