의 Width() 및 height()차이점: 1. 2.x는 더 이상 업데이트되지 않으며 공식은 버그 유지 관리만 수행하며 새로운 기능은 추가되지 않습니다. 3.x는 주로 업데이트 및 유지 관리되는 공식 버전이며 기능은 계속 유지됩니다. 추가되었습니다. 2. 3.x는 "for...of" 루프 문을 지원하고, 2.x는 "를 지원하지 않습니다. 3. 2.x는 setInterval을 사용하여 애니메이션을 구현하고, 3.x는 requestAnimationFrame()을 사용하여 애니메이션을 구현합니다. 4. 3
2006
에 출시된 이후 세 가지 주요 버전이 출시되었습니다.
1. 작은 버전이 많이 있을 수 있습니다. ? 실제 개발에는 어떤 버전을 사용해야 합니까? 1.1.x, 2.x, 3. 세 가지 주요 2.x, 3.x의 차이점: ie6을 지원하지 않습니다. ie7, ie8
2. 하위 버전 브라우저와의 호환성을 고려하지 않는 경우 최종 버전: 2.2.4(2016년 5월 20일)선택:
1.x2. (1) 상황 분석 jQuery
jQuery
의 새 버전이 출시되면 원래 플러그인이 제대로 작동하지 않을 수 있으므로 새 버전에서 플러그인을 다시 개발해야 합니다.
2006년 8월 26일
첫 번째 안정 버전1.1
1.2 | 2007년 9월 10일 | 1.2.6 | 54 | |
1.3 |
| 2009년 1월 14일1.3.2 | ||
코어에 | Sizzle선택기 엔진을 도입 |
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) 중. 더 이상 사용되지 않는 인터페이스, 깨끗한 코드 수정됨 |
및 | 2.0 베타
버전 주기 | 버그
및 차이점 |
1.11
|
|
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 2016년 6월 9일 | 3.0. 0(2016년 6월 9일) | 86.3 | 지연, $.ajax, $.when 지원 Promises/A+, .data()가 HTML5 |
|
7월 7, 2016 | 3.1.1 (2016년 9월 23일) | 86.3 | Join | | jQuery.readyException
오류가 더 이상 표시되지 않습니다 |
3.2 | 2017년 3월 16일 | 3.2.1(2017년 3월 20일) | |
검색 지원 추가 |
요소 콘텐츠, 여러 오래된 요소를 더 이상 사용하지 않음 행동 양식. | 3.3 | 2018년 1월 19일 |
3.3.1(2018년 1월 20일)84.8 이전 함수는 더 이상 사용되지 않으며 이제 함수는 클래스를 허용합니다. 배열 형식으로 쓰기를 지원합니다. |
2, 1.x 일반적으로 사용되는 버전
3, 2.x, 3.x 버전특별한 요구 사항(예: 모바일 단말기)이 없는 한 일반적으로 말해서 이 두 버전을 사용하는 사용자는 거의 없습니다.
3. jQuery3의 새로운 기능 요약은 jQuery3와 다릅니다. j쿼리 2 게다가 jQuery 3에는 실제로 많은 새로운 기능이 추가되었습니다. 이 기사에서는 이러한 새로운 기능을 요약하겠습니다. (1), 새로운 기능 1, for...of 루프 문 지원
(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()을 사용하여 애니메이션 구현
(1) 이제 거의 모든 최신 브라우저(IE 10 이상 포함)가 requestAnimationFrame을 지원합니다. requestAnimationFrame 은 브라우저의 그리기 시간을 기반으로 애니메이션을 지속적으로 최적화하여 애니메이션을 부드럽게 만들고 CPU 리소스 소비를 줄입니다. 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)比如 <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)比如下面一个样例:
/******************************* 测试样例 ********************************/ <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 对象
(1)jQuery 3 改变了 deferred 对象的行为,使得 deferred 对象可与新的 Promises/A+ 标准兼容。deferred 对象成为了可链对象,让创建回调队列成为可能。
(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();
4,类操作方法支持 SVG (1)可惜的是,jQuery 现在还无法完全支持 SVG(包括 jQuery3)。 (2)但是在 jQuery 3 中,对于操作 CSS 类名称的 jQuery 方法,如 addClass() 和 hasClass() 现在可以将 SVG 文档作为目标。这意味着,我们可以修改(添加、移除、切换),或是寻找 SVG 下的 jQuery 类,然后使用 CSS 的样式。 三、已废弃、已移除的方法和属性
1,废弃 bind()、unbind()、delegate() 和 undelegate() 方法(1)在很早之前,bind()、delegate()、unbind() 和 undelegate() 就已经不再推荐使用了,但它们还是一直存在着:
(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 = $('.container div').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>
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!