찾다

집  >  기사  >  웹 프론트엔드  >  jquery 버전 2.x와 3.x의 차이점은 무엇입니까?

jquery 버전 2.x와 3.x의 차이점은 무엇입니까?

青灯夜游
青灯夜游원래의
2022-09-07 16:55:471934검색

차이점: 1. 2.x는 더 이상 업데이트되지 않으며 공식은 버그 유지 관리만 수행하며 새로운 기능은 추가되지 않습니다. 3.x는 주로 업데이트 및 유지 관리되는 공식 버전이며 기능은 계속 유지됩니다. 추가되었습니다. 2. 3.x는 "for...of" 루프 문을 지원하고, 2.x는 "를 지원하지 않습니다. 3. 2.x는 setInterval을 사용하여 애니메이션을 구현하고, 3.x는 requestAnimationFrame()을 사용하여 애니메이션을 구현합니다. 4. 3

의 Width() 및 height()

jquery 버전 2.x와 3.x의 차이점은 무엇입니까?2006

에 출시된 이후 세 가지 주요 버전이 출시되었습니다.

1. 작은 버전이 많이 있을 수 있습니다. ? 실제 개발에는 어떤 버전을 사용해야 합니까? 1.1.x, 2.x, 3. 세 가지 주요 2.x, 3.x의 차이점: ie6을 지원하지 않습니다. ie7, ie8

2. 하위 버전 브라우저와의 호환성을 고려하지 않는 경우 최종 버전: 2.2.4(2016년 5월 20일)

3.X를 사용할 수 있습니다. ie678과 호환되지 않으며 최신 브라우저만 지원합니다. 요구 사항, 버전 3.x는 일반적으로 사용되지 않습니다. 현재 이 버전은 주로 업데이트되고 유지 관리되는 공식 버전입니다.

(2)

ie678과 호환되어야 하는 경우 권장 사항

선택:

1.x
  • 만 선택할 수 있습니다. ie678과 호환될 필요가 없는 경우 를 선택할 수 있습니다. 2.x 또는 3.x 1.x
    • 의 코드는 대부분 이전 브라우저용이므로 운영 부담이 증가하고 운영 효율성에 영향을 미칩니다.

  • 2. (1) 상황 분석 jQuery

    • 버전은 지원되지 않으므로
jQuery

를 기반으로 개발된 플러그인에 대한 호환성 문제가 발생합니다.

jQuery

의 새 버전이 출시되면 원래 플러그인이 제대로 작동하지 않을 수 있으므로 새 버전에서 플러그인을 다시 개발해야 합니다.
  • (2) 선택 권장 사항 다양한 플러그인과 더 나은 호환성을 보장하며 버전
    • 1.x
  • 3을 선택할 수 있습니다. 새로운 기능 비교 (1) 2. 2) 3.x
이전 버전과 비교하여 많은 새로운 기능이 추가되었고 일부 이전 기능도 변경되었습니다.

2. 특정 버전 권장 사항

    1, 버전 기록
  • 버전 번호출시 날짜
최신 업데이트

  • 크기( KB)비고

1.0

2006년 8월 26일

첫 번째 안정 버전

1.1

2007년 1월 14일

1.2 2007년 9월 10일1.2.6 542009년 1월 14일55.9Sizzle1.4.41 .5.2과 함께 1.92.0 베타버그2014년 1월 24일1.12 지원 제외 , 파일 크기 줄이기2.1 2014년 1월 24일2.1.4(2015년 4월 28일)82.42.2 2016년 1월 8일2.2.4(2016년 5월 20일)85.63.17월 7, 20163.1.1 (2016년 9월 23일)86.3JoinjQuery.readyException, ready handler 8 4.6

1.3

1.3.2

코어에

선택기 엔진을 도입

1월 14일. , 2010년

76

1.5

2011년 1월 31일

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.11

1.11 .3 2015년 4월 28일)

95.9

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

3

2016년 6월 9일

3.0. 0(2016년 6월 9일)

86.3

지연, $.ajax, $.when 지원 Promises/A+, .data()가 HTML5


오류가 더 이상 표시되지 않습니다

3.2

 2017년 3월 16일

 3.2.1(2017년 3월 20일)

검색 지원 추가

2, 1.x 일반적으로 사용되는 버전

  • 1.4.2: 대부분의 플러그인으로 안정성과 호환성이 우수하지만 성능은 다음 버전만큼 좋지 않습니다.
  • 1.7.2: 성능 개선, 두 번째로 많은 플러그인, ajax 및 attr 등 api 에 약간의 수정이 있습니다.
  • 1.8.3: IE6을 지원하는 마지막 안정 버전
  • 1.9.1: 처음에는 많은 메소드가 제거되었으며 이벤트 바인딩은 on 사용을 권장합니다. 대신 All.
  • 1.12.4: 1.x 시대의 마지막 안정 버전은 IE8만 지원하고 IE6/7은 지원하지 않습니다.

3, 2.x, 3.x 버전

특별한 요구 사항(예: 모바일 단말기)이 없는 한 일반적으로 말해서 이 두 버전을 사용하는 사용자는 거의 없습니다.

  • 2.x 최신 안정 버전: 2.2.4
  • 3.x 최신 버전: 3.6.1

3. jQuery3의 새로운 기능 요약

은 jQuery3와 다릅니다. j쿼리 2 게다가 jQuery 3에는 실제로 많은 새로운 기능이 추가되었습니다. 이 기사에서는 이러한 새로운 기능을 요약하겠습니다.

(1), 새로운 기능

1, for...of 루프 문 지원

jQuery 3에서는 for...of 루프 문을 사용하여 반복할 수 있습니다. jQuery 컬렉션의 모든 DOM 요소. 이 새로운 반복 접근 방식은 ECMAScript 2015(예: ES6) 사양의 일부입니다. 이 메서드는 "Iterable 개체"(예: Array, Map, Set 등)을 반복할 수 있습니다.

(1) 예를 들어 과거에는 for 을 사용하여 페이지의 모든 input 요소를 반복하고 ID를 수정했습니다. 

for(var i = 0; i <p id="u928244ca">( 2) new <strong> for...of</strong> 루프를 어떻게 다음과 같이 작성할 수 있습니까? </p><pre class="brush:php;toolbar:false">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()는 $.get()

및 $에 대한 새 매개변수 유형 [설정](1)jQuery 3을 추가했습니다. ) 이 두 메소드는 새로운 매개변수 유형 [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()의 유일한 차이점은 method가 $.get() 및 $.post()의 [settings] 에 전달되는 경우입니다. 속성, method 속성 값은 무시됩니다. 

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

3, requestAnimationFrame()을 사용하여 애니메이션 구현

이전 버전에서 jQuery 는 setInterval 을 사용하여 요소의 CSS 속성을 지속적으로 업데이트하여 애니메이션을 생성했습니다. 업데이트할 때마다 브라우저는 페이지를 다시 그리게 되며(reflow) 일반 모니터는 16.7ms 마다 한 번씩 새로 고쳐집니다. 이 간격 동안 다른 setInterval 요청이 있으면 "프레임"이 손실되어 애니메이션 지연이 발생합니다. .

(1) 이제 거의 모든 최신 브라우저(IE 10 이상 포함)가 requestAnimationFrame을 지원합니다. requestAnimationFrame 은 브라우저의 그리기 시간을 기반으로 애니메이션을 지속적으로 최적화하여 애니메이션을 부드럽게 만들고 CPU 리소스 소비를 줄입니다.
(2) 그리고 jQuery 3 은 이 API 를 사용하여 애니메이션을 실행하여 애니메이션 재생을 더 부드럽고 빠르게 만듭니다.

4, unwrap() 메소드는 선택적 매개변수 선택기를 추가합니다

(1) unwrap() 메소드를 사용하여 선택한 요소의 상위 요소를 삭제할 수 있다는 것을 알고 있습니다. 

<script>
   $(function() {
     $("input").unwrap();
   });
</script>
<div>
  <div>
    <input>
  </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>hangge.com</div>
<div>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）比如
元素和没有内容的内联元素，现在都会被 :visible 过滤器匹配。

  <div></div>
  <br>

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

2，data() 方法

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

（2）比如下面一个样例：

  • 在 jQuery 1.x 和 2.x 中：属性名会保持全小写，并原样保留横杠。
  • 在 jQuery 3.x：属性名已经变成了驼峰形式，横杠已经被去除了。
/*******************************
    测试样例
********************************/
<div></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.x 和 2.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 移除了已经废弃的 context、support 和 selector 属性。

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

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

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

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

nbsp;html>

  
    <meta>
    <title>hangge.com</title>
    <script></script>
    <script>
       $(function() {
         var width = $(&#39;.container div&#39;).width()
         console.log(width);
       });
    </script>
    <style>
      .container div {
        width: 33.3333%;
        float: left;
      }
    </style>
  
  
    <div>
      <div>My name</div>
      <div>is</div>
      <div>Aurelio De Rosa</div>
    </div>
  
  • 在 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을 수정했습니다. jQuery 3 이전 버전에서는 함수가 wrapAll() 메서드에 전달되면 jQuery 컬렉션의 각 요소를 개별적으로 래핑했습니다. 즉, 동작은 wrap() 에 함수를 전달할 때와 정확히 동일합니다. (2) 이 문제를 해결하는 동안 또 다른 변경 사항도 도입되었습니다.

jQuery 3

에서 이 함수는 한 번만 호출되므로 jQuery 컬렉션 요소에 각 항목을 추가할 수 없습니다. 그것으로 전달됩니다. 따라서 이 함수(this)의 실행 컨텍스트는 현재 jQuery 컬렉션의 첫 번째 요소만 가리킵니다. 【추천 학습: jQuery 동영상 튜토리얼,

웹 프론트엔드 동영상

】

위 내용은 jquery 버전 2.x와 3.x의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jquery가 태그 값을 얻을 수 있나요?다음 기사：jquery가 태그 값을 얻을 수 있나요?

관련 기사

더보기