我们在电商平台购买商品时,在商品列表页根据品牌、款式、价格范围等条件进行筛选查询,当点击某个条件时,在页面上会显示用户所选择的条件集合,并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。 查看演示下载源码 HTML 首先,我们将查询条件分类,在页面中布置条件容器li.select-list和已选择的条件容器div.select-result。 <ul class="select"> <li class="select-list"> <dl…
jQuery选择什么版本 1.x? 2.x? 3.x?, jQuery各个版本的具体区别和特性
类似标题:jQuery选择什么版本?jquery一般用什么版本?jquery ie8兼容版本。jquery什么版本稳定?
目前jQuery有三个大版本:
1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
2.x:不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本:3.3.1(2018年5月20日)
1.X大版本下,细分版本非常多,各个版本的函数都会有一定的差异。网上看到的很多教程大多是1.x版本的。jquery官方手册:http://api.jquery.com/
维护ie678是意见头疼的事情,一般我们都会额外加载一个css和js单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,电脑端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对ie678的支持。
jquery3.0 新特性:
1. 移除旧的IE工作区
新的最终版最主要的目标是更加快速,更加时尚,因此,那些支持早于IE9版本的相关技术与工作区都被移除了。这意味着如果你想要或者需要支持IE6-8,你必须用回1.12版本,因为甚至是2.X版本都无法完整支持早于IE9的浏览器。
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的元素集合进行循环。
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”。
换言之,如果你想要执行跨站点的脚本请求,你必须在这些方法中作出这样的声明。
新的改变对于当“远程站点传递非脚本内容之后又提供有恶意脚本的服务内容”的情况是非常有效的。这个变化不会影响$.getScript()方法,因为它明确地设置了dataType: “script”选项。
新浪cdn用的jquery:
<script src="//lib.sinaapp.com/js/jquery/1.4.4/jquery.min.js"></script> <script src="//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> <script src="//lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script> <script src="//lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js"></script>
百度CDN用:
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
jquery3 最新版本官方地址
<!--官方--> <script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.min.js"></script> <!--七牛--> <script type="text/javascript" src="//cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
如果你身在海外,也可以使用强大的cdn网站:cdnjs.com
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.map"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.map"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.map"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.map"></script>
还有 jsdelivr.com
// load any GitHub release or commit // note: we recommend using npm for projects that support it https://cdn.jsdelivr.net/gh/user/repo@version/file // load jQuery v3.2.1 https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js // use a version range instead of a specific version https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js // omit the version completely to get the latest one // you should NOT use this in production https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js // add ".min" to any JS/CSS file to get a minified version // if one doesn't exist, we'll generate it for you https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js // add / at the end to get a directory listing https://cdn.jsdelivr.net/gh/jquery/jquery/
// load any project hosted on npm https://cdn.jsdelivr.net/npm/package@version/file // load jQuery v3.2.1 https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js // use a version range instead of a specific version https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js // omit the version completely to get the latest one // you should NOT use this in production https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js // add ".min" to any JS/CSS file to get a minified version // if one doesn't exist, we'll generate it for you https://cdn.jsdelivr.net/npm/jquery@3.2.1/src/core.min.js // omit the file path to get the default file https://cdn.jsdelivr.net/npm/jquery@3.2 // add / at the end to get a directory listing https://cdn.jsdelivr.net/npm/jquery/
本文:jQuery选择什么版本 1.x? 2.x? 3.x?, jQuery各个版本的具体区别和特性