jQuery的版本比较及使用

 

对于什么是jQuery？记住如下三句话：

n  jQuery 是一个 JavaScript 库。

n  jQuery 极大地简化了JavaScript 编程。

n  jQuery 很容易学习。

一、jQuery的PC平台版本

目前jQuery有三个版本，在jQuery官网可以查看。

 

版本	描述
1.x	兼容ie678，使用最为广泛的，官方只做bug维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4
2.x	不兼容ie678，很少人使用，官方只做bug维护，功能不再新增。如果不考虑兼容版本低的浏览器可以使用2.x，最终版本：2.2.4
3.x	不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。截至2018年6月13日，最新版本：3.3.1

 

随着移动端兴起，jQuery也推出了移动版的jQuery Mobile（移动端jQuery框架）。

 

版本	描述
1.0.1	jQuery Mobile 1.0.1 Docs & Demos
1.1.2	jQuery Mobile 1.1.2 Docs & Demos
1.2.1	jQuery Mobile 1.2.1 Docs & Demos
1.3.2	jQuery Mobile 1.3.2 Demos
1.4.5	jQuery Mobile 1.4.5 Demos

 

二、jQuery的安装使用

在jQuery官网上可以下载想要使用的版本。每个版本对应compressed(压缩)和uncompressed(未压缩)两个版本。

 

版本        描述

compressed    精简版，去掉了格式，体积小，用于发布

uncompressed        原版，有统一的格式，体积较大，方便阅读，用于测试、学习和开发

 

三、替代方案

如果不想在本地下载jQuery文件，可以在CDN(内容分发网络)中引用。通过在遍布全球的服务器托管jQuery，CDN可以提供性能优势。这也提供了一个好处，如果你的网页的访问者已经从同一个CDN下载了一份jQuery的副本，那么它不需要重新下载。以下CDN中可以提供jQuery发行版的精简版和原版。

 

1、Google CDN

详情见：https://developers.google.com/speed/libraries/#jquery

 

精简版的引用格式：

 

 

 

原版的引用格式：

 

如上面CDN的 Google URL - 在 URL 中规定了 jQuery 版本 (1.12.4)。如果您希望使用最新版本的 jQuery，也可以从版本字符串的末尾（比如1.8）删除一个数字，谷歌会返回 1.8 系列中最新的可用版本（1.8.0、1.8.1 等等），或者也可以只剩第一个数字，那么谷歌会返回 1 系列中最新的可用版本。目前可用版本：

3.3.1; 3.2.1; 3.2.0; 3.1.1; 3.0.0

2.2.4; 2.2.3; 2.2.2; 2.2.1; 2.2.0; 2.1.4; 2.1.3; 2.1.1; 2.1.0; 2.0.3; 2.0.2; 2.0.1; 2.0.0

1.12.4; 1.12.3; 1.12.2; 1.12.1; 1.12.0; 1.11.3; 1.11.2; 1.11.1; 1.11.0; 1.10.2; 1.10.1

1.10.0; 1.9.1; 1.9.0; 1.8.3; 1.8.2; 1.8.1; 1.8.0; 1.7.2; 1.7.1; 1.7.0; 1.6.4; 1.6.3; 1.6.2; 1.6.1

1.6.0; 1.5.2; 1.5.1; 1.5.0; 1.4.4; 1.4.3; 1.4.2; 1.4.1; 1.4.0; 1.3.2; 1.3.0; 1.2.6; 1.2.3

 

jQuery MObile的引用格式：

 

   

   

 

目前可用版本：

1.4.5; 1.4.4; 1.4.3; 1.4.2; 1.4.1; 1.4.0;

 

2、微软CDN

 

https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0

 

3、CDNJS CDN

 

https://cdnjs.com/libraries/jquery/

 

4、jsDelivr CDN

 

https://www.jsdelivr.com/package/npm/jquery

 

四、使用CDN的好处

 

许多用户在访问其他站点时，已经从谷歌或微软加载过jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

 

五、Jquery1.x,2.x,3.x之间各个版本的具体区别和特性

1.4重要新特性

·常用方法的性能大幅提升:重写了大部分较早期的函数;

·更容易使用的设置函数(setter function):为所有对象新增了许多易用的设置函数;

·对Ajax的改进:引入了许多Ajax和JSON处理方面的更新，包括HTML5元素的序列化;

·attribute(改进了.attr()的性能)、jQuery()核心函数、CSS(.css()性能有两倍提升)、特效和事件、DOM操作等也有显著改进

1.5新版本

美国时间2012年1月31日John Resig在jQuery官方博客发表文章，宣布jQuery 1.5正式版已经如期开发完成，可以下载使用。压缩版本jQuery Minified29KB，不压缩版本jQuery Regular(用于阅读和调试)207KB。由于jQuery已经成为目前最流行的JavaScript库，得到广泛的支持，新版本的发布当然非常引人注目。

 

重要变化:

1. Ajax重写

Ajax模块完全进行了重写。新增一个jXHR对象，为不同浏览器内置的XMLHttpRequest提供了一致的超集。对于XMLHttpRequest之外的传输机制，比如JSONP请求，jXHR对象也可以进行处理。(详情可以参见:jQuery.ajax文档)

此外，系统的可扩展性大大增强，可以附加各种数据处理器、过滤器和传输机制，为开发新的Ajax插件提供了方便。

2. 延迟对象

延迟对象(Deferred Object，jQuery.Deferred对象)是一个可链接的(chainable)实用工具对象，实现了Promise接口，可以在回调队列中注册多个回调、调用回调队列并转发任何同步/异步函数的成败状态。正如Using Deferreds in jQuery 1.5一文中说明的，其结果是在jQuery中能够将依赖于某个任务(事件)结果的逻辑与任务本身解耦了。这一点在JavaScript中其实并不新鲜，Mochikit和Dojo等已经实现有些日子了。由于jQuery 1.5的Ajax模块内置使用了延迟对象，因此通过jQuery编写Ajax程序将自动获得这一功能。

开发人员借此可以使用无法立即获得的返回值(如异步Ajax请求的返回结果)，而且第一次能够附加多个事件处理器。

例如，使用了新的jQuery内部Ajax API就可以实现下面的代码了:

var jxhr = $.ajax({ url: "example.php" }) .success(function() { .complete(function() { ;

此外，使用jQuery.Deferred还可以开发自己的延迟对象。更多详情参见:延迟对象文档。

3. jQuery.sub()

jQuery 1.5提供了一种创建和修改jQuery副本的方式。可以用来添加不向外部公开的方法，或者对jQuery的某些方法进行重新定义以提供新功能，或者提供更好的封装、避免名称空间冲突。当然，也可以用来开发插件，但Resig强烈建议在开发插件之前，先考虑jQuery UI widget工厂。

值得注意的是，sub函数并不提供真正的隔离，所有方法、数据、调用仍然依靠jQuery本身来支持。

4. 遍历性能提高

在新版本中.children(),.pre(),.next()几个常用的遍历函数性能有了显著提高。

5. 内部开发系统

John Resig还特别提到了jQuery团队内部开发系统的两点改变:一是服务器端用Node.js替换了老的Java/Rhino系统，使得团队可以专注于JavaScript环境的新变化;二是所用的代码优化程序从Google Closure切换到UglifyJS，新工具的压缩效果非常令人满意。

 

jQuery 1.5.2 在1.5的基础上修正的大量的bug

1.7bjQuery 1.7b

2011年09月29日jQuery 1.7 的第一个 beta 测试版本，该版本修复了超过 50 个的问题以及带来一些新特性。

 

2011年11月4日jQuery1.7正式版发布。

 

新版本包含了很多新的特征，特别提升了事件委派时的性能尤其是在IE7下。

新增及改进项:

新的事件 APIs: .on() and .off();

提升了事件委派时的性能有了大幅度的提升，尤其是在IE7下;

更好的在 IE 6/7/8 上支持 HTML5;

切换动画更加直观;

匿名模块定义 AWD

jQuery.Deferred

jQuery.isNumeric()

被删除的方法:

event.layerX and event.layerY

 

jQuery.isNaN()

 

1.7.2

2012年03月24日jQuery 1.7.2正式版发布。

该版本在1.7.1的基础上修复了大量的bug，并改进了部分功能。而相比于1.7.2 RC1，只修复了一个bug。值得注意的是:如果你正在使用jQuery Mobile，请使用最新的jQuery 1.7.2和jQuery Mobile 1.1这两个版本，因为之前的jQuery Mobile版本还基于jQuery core 1.7.1或更早的版本。

 

1.8.3

2012年11月14日 jQuery 1.8.3 发布，修复 bug 和性能衰退问题

IE8中的HTML相关Bug

jQuery 1.8.2在IE9中调用ajax失败的问题

jQuery 1.7.1不能正确地设置IE7中克隆元素的tabindex属性

压缩的JS文件包含非ASCII字符

如果body样式设置为display:none，则$('body').show()无法工作

在IE9中element.css('filter')返回不明确

在Android 2.3.4的浏览器中，jQuery 1.8.1转场效果崩溃

在iPad上缩放一个灯箱效果后，所有动画效果失效

从1.3.2升级到1.8.2版本后，出现Uncaught TypeError错误

 

在Chrome和Safari中，无法正确检测包含可编辑内容的DIV的焦点

 

2.0 Beta 2

2013年3月 jQuery 2.0 Beta 2 发布

据jQuery官方博客3月消息，jQuery 2.0 Beta 2 发布。

根据用户对jQuery 2.0 Beta 1 版本的反馈，Beta 2 版做了一些修改。jQuery官方表示，非常需要用户来测试 Beta 2 版，最好同时也能向他们反馈提交建议。

他们相信，Beta 2 版已非常稳定，值得一试，不需要等 2.0 的最终版本。

jQuery 团队在官博中再次提醒用户，jQuery 2.0 不再支持IE 6/7/8 了，但是 jQuery 1.9 会继续支持。因为旧版 IE 浏览器在整个互联网中还有很大部分市场，所以他们非常期望大部分网站能继续使用 jQuery 1.x 一段时间。jQuery 团队也将同时支持 jQuery 1.x 和 2.x 。1.9 和 2.0 版的 API 是相同的，所以不必因为你们网站还在用 jQuery 1.9，就感觉好像错过了什么，或者是落后了。

如果你想继续支持 IE 6/7/8，并且又想尝试 jQuery 2.0，那你可以额外加上一些代码。除了老版的 IE，其他所有浏览器都将使用第二脚本，忽略第一个。

在很多环境中，jQuery 2.0 应当都表现的很好。如下:

Google Chrome plugins

Mozilla XUL apps and Firefox extensions

Firefox OS apps

Chrome OS apps

Windows 8 Store (“Modern/Metro UI”) apps

BlackBerry 10 WebWorks apps

PhoneGap/Cordova apps

Apple UIWebView class

Microsoft WebBrowser control

Cheerio or jsdom with Node.js

 

Intranet applications

 

2.0

2013年4月18日 jQuery 2.0正式版发布

不再支持IE 6/7/8:如果在IE9/10版本中使用“兼容性视图”模式也将会受到影响。

更轻更快:2.0版本文件与1.9.1相比小了12%。

可以构建一个更小、更轻量的版本。

jQuery 2.0 API完全兼容jQuery 1.9 API。

 

1.9.1汉化版

jQuery 1.9.1汉化版2013年2月23日发布，

 

jQuery 3.0

jQuery 3.0在日前发布了最终的全新版本。从2014年10月，jQuery团队对这个主要大版本进行维护开始，web开发者社区便一直在期待着这一刻的到来，终于在2016年6月他们迎来了这一个最终版。

 

 

通过jQuery 3.0的版本更新说明，我们看到了一个保持着向后兼容的更轻便，更快速的jQuery。在本文中，我们将介绍一些令人眼前一亮的jQuery 3.0全新特性。

 

开始前的说明

 

如果你想要下载jQuery 3.0进行亲自实验，可以通过该页面进行下载。另外，升级指南和源代码也值得你一看。

 

如果你想要测试一下你的项目如何在jQuery 3.0中工作的，你可以尝试通过jQuery迁移插件来识别代码的兼容性问题，你也可以查看jQuery未来发展的时间表。

1. 移除旧的IE工作区

 

新的最终版最主要的目标是更加快速，更加时尚，因此，那些支持早于IE9版本的相关技术与工作区都被移除了。这意味着如果你想要或者需要支持IE6-8，你必须用回1.12版本，因为甚至是2.X版本都无法完整支持早于IE9的浏览器。查看完整的浏览器支持方案>>

 

注意：在jQuery 3中还弃用了一些其它的功能。截止到2016年6月，升级指南还没有提供一个对于弃用功能的分组整理。因此，你如果想要了解弃用功能，可以通过ctrl+f键来进行搜索。

2. jQuery 3.0运行在Strict Mode下

 

大多数支持jQuery 3的浏览器都支持strict mode，而在本次更新中对此进行了规定。

 

虽然jQuery 3是写在strict mode中的，但是你需要了解的是你的代码并不需要运行在strict mode中，因此如果你想要把以前的代码迁移到jQuery 3，你不需要对已存在的jQuery代码进行重写。Strict和non-strict mode的JavaScript代码可以和谐共存。

 

这里有一些例外：某些版本的ASP.NET，因为strict mode的缘故，无法与jQuery 3兼容，如果你的代码涉及到了ASP.NET，你可以查看关于strict mode的细节。

3. 引进for...of循环

 

jQuery 3支持for...of语句，这是由ECMAScript 6中新引进的一种for循环语句。这提供了对Arrays，Maps和Sets这样的可迭代对象一种更直接的遍历方法。

 

在jQuery中，for...of循环可以取代以前的$.each(...)语法，并且更容易通过jQuery的元素集合进行循环。

 

注意：for...of只能在支持ECMAScript 6的环境下或者使用Babel这样的JavaScript编译器下工作。

4. 动画方面采用新的API

 

jQuery 3使用requestAnimationFrame() API来执行动画，使动画运行得更加顺畅、快速。新的API只用于支持它的浏览器，对于那些更老的浏览器（如IE9）jQuery使用先前的API来作为显示动画的后备方案。

 

RequestAnimationFrame已经推出一段时间了，如果你对如何使用它以及什么时候使用它感兴趣，CSS Tricks上有一篇很好的文章可供你阅读。

5. 对包含特殊含义的字符串提供转义的新方法

 

新的jQuery.escapeSelector()提供了对在CSS中存在特殊含义的字符串或字符进行转义的方法，该方法可使这些字符串或字符能够继续用于jQuery选择器中，而无需对那些无法进行正确理解的JavaScript解释器进行转义。

 

这个示例可以让你更好的了解这个全新的方法：

 

举个例子，页面中某个ID为“abc.def”的元素由于选择器将其解析为ID为“abc”且包含一个名为“def”的类的对象，而无法被$( "#abc.def" )选定。但是它可以由 $( "#" + $.escapeSelector( "abc.def" ) )来进行选定。

 

我无法确定发生中情况的频率，但是假如你碰到过这种类似的情况，这无疑给了你一个解决该问题的简单方法。

6. 类操作方法支持SVG

 

不幸的是，jQuery 3现在还无法完整的支持SVG，但是对于操作CSS类名称的jQuery方法，如.addClass()和.hasClass()现在可以将SVG文档作为目标。这意味着你可以修改（添加、删除、切换）或者查找SVG（可缩放矢量图形）下的jQuery类，然后使用CSS的类样式。（相关阅读：Styling Scalable Vector Graphic (SVG) with CSS）

7. 延迟对象现在与JS Promises兼容

 

JavaScript Promises，用于异步计算的对象，现在在ECMAScript 6中已经被标准化；它们的运行状况和特性的详细说明参见Promises/A+标准。

 

在jQuery 3中，延迟对象已经与新的Promises/A+标准相兼容，延迟对象已经成为让创建回调队列成为可能的可链对象(chainable objects)。

 

新的特性改变了异步回调函数执行过程，Promises允许开发者编写在逻辑上与同步代码更接近的异步代码。

 

查看升级指南的代码示例，或者查看关于JavaScript Promises基础的Scotch.io教程可以让你了解更多的信息。

8. jQuery.when()对于多种参数的不同解读

 

$.when()提供了执行回调函数的一种方法，它成为了jQuery 1.5之后的一部分。这个方法非常灵活，它适用于零参数，也适用于一个或者多个作为参数的对象。

 

jQuery 3改变了当包含$.then()方法时对$.when()中参数的解读方法，你可以对$.when()进行额外的参数回调。

 

在jQuery 3中，如果你在$.when()中的then()方法内增加一个输入参数，该参数将会被解释成一个可与Promise兼容的"thenable"。

 

这意味着 $.when方法能够接收更加宽广的输入范围，比如原生的ES6 Promises和Bluebird Promises，这也使得编写更复杂的异步回调成为了可能。

9. 新的显示/隐藏逻辑

 

为了增加响应式设计的兼容性，与元素显示和隐藏的代码在jQuery 3中进行了更新。

 

从现在开始，.show()、.hide()和.toggle()方法将会以内联样式为重点取代以前的计算样式，这种方式能够更尊重样式列表的改变。

 

新的代码尽可能的尊重样式列表中所呈现的数值，这意味着CSS规则可根据事件（如设备重新定位和窗口尺寸调整）进行动态改变。

 

这个说明文件申明了最重要的结果就是：

 

“作为结果，断开连接的元素除非指定了内联display: none，否则将不再认定为是隐藏的。因此，在jQuery 3.0中，.toggle()不再对断开连接元素与已连接元素进行区分。”

 

如果你想要更好的了解关于全新的显示/隐藏逻辑，这个Github discussion会对你有帮助。jQuery开发者还发布了Google文档表来展示在不同用例下新规则的运转。

10. 对于防止XSS攻击的额外保护

 

jQuery 3增加一个额外的安全层用户用于防备跨站点脚本(XSS)攻击，它需要开发者指定$.ajax()和$.get()方法中的选项为dataType: "script"。

 

换言之，如果你想要执行跨站点的脚本请求，你必须在这些方法中作出这样的声明。