jquery版本2.x和3.x的区别有哪些

区别:1、2.x不再更新,官方只做BUG维护,功能不再新增;3.x是官方主要更新维护的版本,功能持续新增。2、3.x支持“for…of ”循环语句,2.x不支持“。3、2.x利用setInterval来实现动画,3.x支采用requestAnimationFrame()来实现动画。4、3.x中width()和height()将不再将结果的像素值四舍五入到一个整数值。

本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。

jQuery 2006 年诞生以来,一个发行了 1.x2.x3.x 这三个大版本。而在这三个大版本下又细分了许多小版本。可能有些小伙伴不太清楚这些版本有什么区别?实际开发中应该选用哪个版本?下面我对其做个总结。

一、1.x、2.x、3.x 三大系列的区别

1,IE 的支持情况比较

(1)情况分析

  • 1.x:支持 ie6ie7ie8

  • 2.x3.x:不支持 ie6ie7ie8

2.X不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)

3.X不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。

(2)选择建议

  • 如果需要兼容 ie678:只能选择 1.x

  • 如果不需要兼容 ie678:可以选择 2.x3.x。因为 1.x 中有大部分代码是对老旧浏览器做的兼容,这个就增加了运行的负担,影响了运行效率。

2,插件的支持情况比较

(1)情况分析

  • 由于 jQuery 的版本都是不向后兼容的,导致了基于 jQuery 开发的插件会有兼容性问题。也就是说当新版本的 jQuery 推出后,原有的插件可能无法正常使用,需要插件作者重新开发新版本。

(2)选择建议

  • 为了保证与各种插件有更好的兼容性可以选择 1.x 的版本。

3,新特性比较

(1)2.x 相较于 1.x 没有增加什么新特性,主要是去除了 ie678 的支持,提升了性能,减小了体检。

(2)3.x 相较于之前版本,增加了许多新特性,也改变一些以往的特性。

二、具体版本建议

1,版本历史

版本号

发布日期

最新更新

大小(KB)

备注

1.0

2006年8月26日

名列前茅个稳定版本

1.1

2007年1月14日

1.2

2007年9月10日

1.2.6

54

1.3

2009年1月14日

1.3.2

55.9

Sizzle 选择器引擎引入核心

1.4

2010年1月14日

1.4.4

76

1.5

2011年1月31日

1.5.2

83

延迟回调管理,ajax 模块重写

1.6

2011年5月3日

1.6.4

89

显著改善 attr() val() 的性能

1.7

2011年11月3日

1.7.2 (2012年3月21日)

92

新的事件 API.on().off(),而旧的 API 仍然支持。

1.8

2012年8月9日

1.8.3 (2012年11月13日)

91.4

重写 Sizzle 选择器引擎,改善动画和 $(html, props) 的灵活性。

1.9

2013年1月15日

1.9.1 (2013年2月4日)

90

移除弃用接口,清理代码

1.10

2013年5月24日

1.10.2 (2013年7月3日)

91

修复了 1.9 2.0 beta 版本周期的 bug 和差异

1.11

2014年1月24日

1.11.3 (2015年4月28日)

95.9

1.12

2016年1月8日

1.12.4 (2016年5月20日)

95

2.0

2013年4月18日

2.0.3 (2013年7月3日)

81.1

除去对 IE 6-8 的支持以提高性能,并降低文件大小

2.1

2014年1月24日

2.1.4 (2015年4月28日)

82.4

2.2

2016年1月8日

2.2.4 (2016年5月20日)

85.6

3.0

2016年6月9日

3.0.0 (2016年6月9日)

86.3

Deferred、$.ajax、$.when 支持 Promises/A+,令 .data() 兼容HTML5

3.1

2016年7月7日

3.1.1 (2016年9月23日)

86.3

加入 jQuery.readyExceptionready handler 错误现在不会不显示了

3.2

2017年3月16日

3.2.1 (2017年3月20日)

84.6

增加了对检索<template>元素内容的支持,弃用了多种旧方法。

3.3

2018年1月19日

3.3.1 (2018年1月20日)

84.8

弃用旧函数,函数现在可以接受类,并支持其写成数组格式。

2,1.x 常用版本

  • 1.4.2:稳定性和兼容性都很出色,插件非常多,但性能不如下面后面的几个版本。

  • 1.7.2:性能提升,插件第二多,ajax attr api 有少许修改。

  • 1.8.3:最后一个支持 IE6 的稳定版

  • 1.9.1:开始移除了不少方法,事件绑定推荐使用 on 方法一个代替所有的。

  • 1.12.41.x 时代最后一个稳定版本,仅支持 IE8,不支持 IE6/7

3,2.x、3.x 版本

除非有特殊要求(比如面向移动端),一般情况下这两大版本使用人的确很少:

  • 2.x 最后一个稳定版本:2.2.4

  • 3.x 最新版本:3.6.1

三、jQuery3的新特性汇总

不同于 jQuery 2 主要做的是性能的提升,jQuery 3 是实实在在增加了许多新特性,本文我就对这些新特性做个汇总。

(一)、新增的特性

1,支持 for…of 循环语句

jQuery 3 中,我们可以用 for…of 循环语句来迭代一个 jQuery 集合中的所有 DOM 元素。这种新的迭代方法是 ECMAScript 2015(即 ES6)规范中的一部分。这个方法可以对 “可迭代对象”(比如 ArrayMapSet 等)进行循环。

(1)比如过去我们使用 for 循环遍历页面上的所有 input 元素,并修改它的 ID,可以这么写:

for(var i = 0; i < $('input').length; i++) {  $('input')[i].id = 'input-' + i;}

(2)使用新的 for…of 循环怎可以这么写:

var i = 0;for(var input of $('input')) {   input.id = 'input-' + i++;}

注意:for…of 循环体内每次拿到的值并不是一个 jQuery 对象,而是一个 DOM 元素。这一点跟 jQuery 自己提供的 .each() 方法类似。

$('input').each(function(index,item){  	item.id = 'input-' + index;});

2,$.get() 和 $.post() 增加了新的参数类型 [settings]

(1)jQuery 3$.get() $.post() 这两个方法增加了新的参数类型 [settings],从而使得它们和 $.ajax() 的接口风格保持一致。

//过去这么写$.post('test.php', { name: 'hangge', age: 2 }, function (data) {  console.log(data);}); // jQuery3 中可以这样写$.post({  url: 'test.php',  data: { name: 'hangge', age: 2 },  success: function (data) {    console.log(data);  }});

(2)与 $.ajax() 少数不同的是:如果 $.get()$.post()[settings] 中传递了 method 属性,method 的属性值将被忽略掉。

$.get({  url: 'test.php',  method: 'POST'  //这个将被忽略,仍然是get请求});

3,采用 requestAnimationFrame() 来实现动画

之前的版本中,jQuery 使用 setInterval 通过不断更新元素的 CSS 属性产生动画。每次更新时会迫使浏览器对页面进行重绘(reflow),而一般显示器 16.7ms 刷新一次,如果在这间隔期间有其他的 setInterval 请求,就会导致”帧”丢失,造成动画卡顿。

(1)现在几乎所有的现代浏览器(包括 IE 10 及以上版本),都支持 requestAnimationFramerequestAnimationFrame 会根据浏览器的绘制时间 对动画进行不断优化,使动画流畅并减少对 CPU 资源的消耗。
(2)而 jQuery 3 会使用这个 API 执行动画,让动画的播放更加顺畅、速度更快。

4,unwrap() 方法增加一个可选参数 selector

(1)我们知道使用 unwrap() 方法可以删除被选元素的父元素。

<script type="text/javascript">   $(function() {     $("input").unwrap();   });</script><div class="wrapper1">  <div class="wrapper2">    <input type="text">  </div></div>

(2)jQuery 3 unwrap() 方法增加了一个可选参数 selector,我们可以通过这个字符串选择器匹配元素的父元素:

  • 如果匹配到:则移除父元素

  • 如果没有匹配到:就不移除父元素

$("input").unwrap(".wrapper3"); //由于没有匹配到,则不会移除父元素

5,addClass()、removeClass()、toggleClass() 方法可以接受类数组

(1)过去想要通过 addClass()removeClass()toggleClass() 方法一次性设置多个类时,需要使用空格分开多个 class

$("#div1").addClass("important blue");

(2)而从 jQuery 3.3 起,这些方法可以直接接受类数组。

$("#div1").addClass(["important", "blue"]);

6,新增了 $.escapeSelector() 方法

(1)jQuery 3 新增的 $.escapeSelector() 函数可以用来转义 CSS 选择器中有特殊意义的字符或字符串。此方法对于一个 CSS 类名或一个 ID 包含的字符在 CSS 中具有特殊含义的情况下非常有用,如点或分号。

(2)下面是一个简单的样例:

<div id="#div1">hangge.com</div><div class="abc.def">hangge.com</div> //如果像下面这么写会直接报错$('##div1').text();$('.abc.def').text(); //$.escapeSelector()就是用来解决这个问题$('#' + $.escapeSelector('#div1')).text();$('.' + $.escapeSelector('abc.def')).text();

(二)、有变更的特性

1,:visible 和 :hidden 过滤器含义变更

(1)jQuery 3 修改了 :visible :hidden 过滤器的定义。任何可用于布局的元素 即使它们的高度宽度为 0,都会被认为是 :visible

(2)比如 <br> 元素和没有内容的内联元素,现在都会被 :visible 过滤器匹配。

<body>  <div></div>  <br/></body> //在 jQuery 1.x 和 2.x 中,你得到的结果会是 0//在 jQuery 3.x,你得到的结果会是 2console.log($('body :visible').length);

2,data() 方法

(1)现在 data() 方法行为已经变得跟 Dataset API 规范一致。jQuery 3 将会把所有属性键名转换成驼峰形式。

(2)比如下面一个样例:

  • jQuery 1.x2.x 中:属性名会保持全小写,并原样保留横杠。

  • jQuery 3.x:属性名已经变成了驼峰形式,横杠已经被去除了。

/*******************************    测试样例********************************/<div id="container"></div> var $elem = $('#container'); $elem.data({   'my-property': 'hello'}); console.log($elem.data());  /*******************************    jQuery 1.x 和 2.x 结果********************************/{my-property: "hello"}  /*******************************    jQuery 3.x 结果********************************/{myProperty: "hello"}

3,Deferred 对象

Deferred 对象可以说是 Promise 对象的前身之一,它实现了对 Promise/A+ 协议 的兼容。关于 Deferred 更详细的用法可以参考我之前写的这篇文章:

  • JS – Promise使用详解3(jQuery中的Deferred)

(1)jQuery 3 改变了 deferred 对象的行为,使得 deferred 对象可与新的 Promises/A+ 标准兼容。deferred 对象成为了可链对象,让创建回调队列成为可能。

  • jQuery 1.x2.x 中:传递给 deferred 的回调函数内如果出现未捕获的异常,就会阻断程序的执行。不像原生 Promise 对象那样会抛出异常冒泡至 window.onerror(通常冒泡到这里)。如果你没有定义一个函数处理错误事件(通常我们是会处理的),那么异常信息就会显示并且程序会终止执行。

  • jQuery 3.x 中:jQuery3 遵循原生 Promise 对象的模式。因此,抛出的异常被当作失败,接着失败回调函数被执行。一旦失败回调函数执行完成,进程就会继续,下面的成功回调函数将被执行。

(2)下面是一个简单的样例:

var deferred = $.Deferred();deferred .then(function() {   throw new Error('An error'); // 抛出一个错误 }) .then(   function() {     console.log('Success 1');   },   function() {     console.log('Failure 1');   } ) .then(   function() {     console.log('Success 2');   },   function() {     console.log('Failure 2');   } ); deferred.resolve();
  • jQuery 1.x 2.x 中,只有名列前茅个函数(也就是抛出错误的那个函数)会被执行到。此外,由于我们没有为 window.onerror 定义任何事件处理函数,控制台将会输出 “Uncaught Error: An error”,而且程序的执行将中止。

jquery版本2.x和3.x的区别有哪些

  • 而在 jQuery 3 中,整个行为是完全不同的。你将在控制台中看到“Failure 1”和“Success 2”两条消息。那个异常将会被名列前茅个失败回调处理,并且,一旦异常得到处理,那么后续的成功回调将被调用。

jquery版本2.x和3.x的区别有哪些

4,类操作方法支持 SVG

(1)可惜的是,jQuery 现在还无法完全支持 SVG(包括 jQuery3)。

(2)但是在 jQuery 3 中,对于操作 CSS 类名称的 jQuery 方法,如 addClass() hasClass() 现在可以将 SVG 文档作为目标。这意味着,我们可以修改(添加、移除、切换),或是寻找 SVG 下的 jQuery 类,然后使用 CSS 的样式。

三、已废弃、已移除的方法和属性

废弃与移除的区别:

  • 废弃:是指一些方法还在存在于 jQuery 源码中,但是已经提供了新方法来替换那些方法。

  • 移除:是指一些方法已经从 jQuery 源码中删除了。

1,废弃 bind()、unbind()、delegate() 和 undelegate() 方法

(1)在很早之前,bind()delegate()unbind()undelegate() 就已经不再推荐使用了,但它们还是一直存在着:

  • jQuery 在很久以前就引入了 on() 方法,它提供了一个统一的接口,用以取代 bind()delegate()live() 等方法。

  • 同时,jQuery 还引入了 off() 这个方法来取代 unbind()undelegated() die() 等方法。

(2)jQuery 3 终于开始将这些方法标记为 “废弃” 了,并计划在未来的某个版本(很可能是 jQuery 4)中将它们彻底移除。因此,建议我们在项目中统一使用 on() off() 方法,这样就不用担心未来版本的变更了。

2,移除 load()、unload() 和 error() 方法

load()unload() error() 等方法在很早以前(从 jQuery 1.8 开始)就已经被标记为废弃了,但一直没有去掉。这次 jQuery 3 彻底将它们移除了。

3,移除 context、support 和 selector 属性

jQuery3 移除了已经废弃的 contextsupport selector 属性。

四、修复了之前版本中存在的重大 Bug

1,width() 和 height() 的返回值将不再取整

(1)在 jQuery 3 中,width()height() 及所有其它相关方法将不再将结果的像素值四舍五入到一个整数值,因为四舍五入后在某些情况下很难对元素进行定位。

(2)比如下面样例,container 容器内有三个子元素,它们宽度均为父容器的 1/3。我们通过 width() 得到具体的宽度值:

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>hangge.com</title>    <script src="js/jquery-3.3.1.min.js" charset="utf-8"></script>    <script type="text/javascript">       $(function() {         var width = $('.container div').width()         console.log(width);       });    </script>    <style>      .container div {        width: 33.3333%;        float: left;      }    </style>  </head>  <body>    <div class="container">      <div>My name</div>      <div>is</div>      <div>Aurelio De Rosa</div>    </div>  </body></html>
  • jQuery 1.x 2.x 中,输出结果如下:

jquery版本2.x和3.x的区别有哪些

  • jQuery 3.x 中,输出结果如下:

jquery版本2.x和3.x的区别有哪些

2,wrapAll() 方法

(1)jQuery 3 还修复了 wrapAll() 方法中的一个 bug,这个 bug 出现在把一个函数作为参数传给它的情况下。在 jQuery 3 以前的版本中,当一个函数被传给 wrapAll() 方法时,它会把 jQuery 集合中的每个元素单独包裹起来。换句话说,这种行为和把一个函数传给 wrap() 时的行为是完全一样的。

(2)在修复这个问题的同时,还引入了另外一个变更:由于在 jQuery 3 中,这个函数只会调用一次了,那就无法把 jQuery 集合中每个元素都传给它。因此,这个函数的执行上下文(this)将只能指向当前 jQuery 集合中的名列前茅个元素。

感谢各位的阅读,以上就是“jquery版本2.x和3.x的区别有哪些”的内容了,经过本文的学习后,相信大家对jquery版本2.x和3.x的区别有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

文章标题:jquery版本2.x和3.x的区别有哪些,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/23939

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云认证作者
上一篇 2022年9月8日 下午10:46
下一篇 2022年9月8日 下午10:47

相关推荐

  • MySQL中replace into与replace区别是什么

    0.故事的背景 【表格结构】 CREATE TABLE `xtp_algo_white_list` ( `strategy_type` int DEFAULT NULL, `user_name` varchar(64) COLLATE utf8_bin DEFAULT NULL, `status` …

    2022年9月1日
    60100
  • weblogic攻击手法有哪些

    简介 weblogic服务器的特点为架构庞大复杂,蓝队一般很难防御,且多部署于外网。而且weblogic的攻击成本比较低,只要存在漏洞,一般可以直接获取目标服务器的root权限。在攻防演习中被各大攻击队,防守方重点关注。 当然,目前网上公开的各种exp程序,当然也包括我自己的工具,或多或少都有点问题…

    2022年9月22日
    57300
  • linux能不能获取本地ip地址

    linux能获取本地ip地址。方法:1、利用“ifconfig -a”命令,该命令用于显示或者设置网络设备信息;2、利用“ip address”命令,语法为“ip address | grep eth0 | awk ‘{print$2}’”;3、利用“hostname -I”…

    2022年6月29日
    4.1K00
  • MyBatis3源码解析之怎么获取数据源

    jdbc 再贴一个JDBC运行的测试方法,流程为: 加载JDBC驱动; 获取数据库连接; 创建JDBC Statements对象; 设置SQL语句的传入参数; 执行SQL语句并获得查询结果; 对查询结果进行转换处理并将处理结果返回; 释放相关资源(关闭Connection,关闭Statement,关…

    2022年9月19日
    49400
  • 如何深度分析宽字节sql注入

    基本概念 宽字节是相对于ascII这样单字节而言的;像GB2312、GBK、GB18030、BIG5、Shift_JIS等这些都是常说的宽字节,实际上只有两字节 GBK是一种多字符的编码,通常来说,一个gbk编码汉字,占用2个字节。一个utf-8编码的汉字,占用3个字节 转义函数:为了过滤用户输入的…

    2022年9月21日
    1.1K00
  • video接口指的是什么

    video接口指的是“复合视频接口”,是音频、视频分离的视频接口,一般由三个独立RCA插头组成,其中V接口连接混合视频信号,为黄色插口;L接口连接左声道声音信号,为白色插口;R接口连接右声道声音信号,为红色插口。 本教程操作环境:windows7系统、Dell G3电脑。 video是什么接口 复合…

    2022年9月2日
    1.3K00
  • 用于黑客渗透测试的Linux工具有哪些

    用于黑客渗透测试的 Kali Linux 工具 Kali Linux 预装了几种类型的工具。如果你发现有的工具没有安装,只需下载并进行设置即可。这很简单。 1、Nmap Nmap Nmap (即 “ 网络映射器(Network Mapper)”)是 Kali Linux 上很受欢迎的信息收集工具之一…

    2022年9月1日
    78100
  • windows中appdata文件夹怎么查看

    appdata文件夹查看方法: 1、首先打开桌面的计算机,再点击“工具”选择“文件夹选项”。 2、然后点击“查看”选项栏。 3、勾选下面的“显示隐藏的文件、文件夹和驱动器”。 4、最后只要进入c盘,就可以看到appdata文件夹了。 关于“windows中appdata文件夹怎么查看”这篇文章的内容…

    2022年8月31日
    1.1K00
  • MySQL优化器hash join怎么使用

    前言 数据库的优化器相当于人类的大脑,大部分时候都能做出正确的决策,制定正确的执行计划,走出一条高效的路,但是它毕竟是基于某些固定的规则、算法来做的判断,有时候并没有我们人脑思维灵活,当我们确定优化器选择执行计划错误时该怎么办呢,语句上加hint,提示它选择哪条路是一种常见的优化方法。 我们知道Or…

    2022年9月15日
    59800
  • php索引超出了数组界限如何解决

    索引超出了数组界限解决方法: 1、在test.php文件内使用header设置test.php执行的编码为utf8,避免乱码的出现。 2、随后在test.php文件内创建一个测试数组,对应的索引值分别为0、4、8。 3、在test.php文件中使用array_values方法将上一步的数据重新排序,…

    2022年9月10日
    64000
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部