의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
