jQuery 3.0의 변경 사항 및 it_jquery 사용 방법
세계에서 가장 인기 있는 JavaScript 라이브러리인 jQuery는 항상 우리 웹 개발자에게 마법의 무기였습니다. 2006년 첫 출시 이후 지금까지 많은 웹 개발자들은 개발 작업을 더 쉽게 만들기 위해 이 우수한 라이브러리를 프로젝트에 도입해 왔습니다.
3개월이 지나 드디어 jQuery 팀이 3.0 알파 버전을 출시했습니다. jQuery compat 3.0과 jQuery 3.0의 두 가지 버전이 있습니다.
•jQuery compat 3.0은 이전 1.x에 대응하고 더 많은 브라우저와 호환되며 IE 버전 8.0까지 지원합니다
•jQuery 3.0은 이전 2.x에 대응하며, 최신 브라우저에 주의하고, IE는 9.0 버전까지 지원합니다
또한 3.0에는 러시아의 브라우저인 Yandex 브라우저에 대한 지원도 추가되었습니다.
1. 단순화된 표시/숨기기
이전의 표시/숨기기는 완벽하게 호환됩니다. 예를 들어 표시 요소의 표시가 스타일로 작성되어도 스타일시트에 표시될 수 있습니다. 3.0에서는 다릅니다. 스타일시트에 작성된 display:none은 show를 호출한 후에도 여전히 숨겨집니다. 3.0 표시하고 숨기려면 클래스 메소드를 사용하거나, 완전히 숨기려면 hide를 먼저 사용하고(CSS 코드를 사용하지 않고) show를 호출하는 것이 좋습니다.
<style>
input {
display: none;
}
</style>
<input id="txt" type="text" value=""/>
<script>
$('#txt').show(); // 仍然隐藏的状态
</script>2. 데이터 방식은 data-name-11 쓰기와 호환됩니다.
<input id="txt" type="text" value="" data-name-11="aa"/>
<script>
// 3.0 版本 输出 {"name-11": aa}， 之前版本输出 {}
$('#txt').data()
</script> 이 문제의 핵심은 $.camelCase 메소드의 구현 차이입니다
// 3.0 输出 "name-11", 3.0 之前版本输出 "name11"
$.camelCase('data-name-11') 3. deferred는 Promise/A+와 호환됩니다
3.0은 그동안 거세 버전이라는 비판을 받아온 Promise/A에 대한 지원을 드디어 자신 있게 선언할 수 있게 되었습니다.
4. $.ajax 객체가 성공 | 오류 | 완료 메서드를 삭제했습니다.
이것은 Promise/A 사양의 홍보로 인해 사람들이 Promise를 점점 더 많이 사용하고 있으며 이전에는 Deferred에 여러 메소드가 존재할 필요가 없습니다
•derferred.done -> jqXHR.success
•derferred.fail -> jqXHR.error
•derrerred.always -> jqXHR.complete
// 以下方法在 3.0 后没有了 $.ajax().success $.ajax().error $.ajax().complete
5. 너비/높이, css(너비) / css(높이)의 반환 값은 항상 소수입니다
이전에 일부 브라우저는 특수한 상황에서 부동 소수점 숫자를 반환했습니다.
6. 등록 이벤트 로드 | 언로드 오류
•load 이름이 ajax load와 이름이 같아 불명확합니다.
•unload 로드가 제거되면 언로드는 의미가 없습니다.
•error는 window.onerror를 사용하여 등록되며 표준 이벤트 핸들러가 아니므로 제거하는 것이 좋습니다
위 내용은 jquery3.0의 변경 사항을 요약한 것입니다. 다음은 jquery3.0의 업데이트된 내용과 사용법을 주로 소개합니다.
표시 및 숨기기
가장 큰 변화는 기능 작동 방식입니다. 그리고 그렇게 하는 데에는 그럴 만한 이유가 있습니다. 이전 구현에서 hide() 함수는 css 속성을 "display:none"으로 설정하고 show() 함수는 이 속성을 지웁니다. 하지만 그렇게 하면 조금 혼란스럽습니다. 몇 가지 예를 살펴보겠습니다.
1. show() 함수가 노드를 "display:block"으로 설정하려고 하고 "display:inline" 속성이 다른 스타일시트에 구현되면 코드가 손상되기 시작합니다.
2. 미디어용 반응형 웹 디자인(RWD)을 다룰 때 "디스플레이" 또는 "가시성"을 사용하여 노드의 가시성을 변경할 수 있습니다. 이는 "show()" 및 "hide()" 기능에 영향을 미칠 수 있습니다.
이 외에도 JQuery 팀이 해결해야 할 문제가 많이 있었습니다. 이로 인해 복잡한 구현 및 성능 문제가 발생하여 더 간단한 모델로 마이그레이션했습니다.
앞으로 "display:none"을 설정하고 "show()", "slideDown()", "fadeIn()" 또는 유사한 메서드를 사용하여 노드를 표시하면 작동하지 않습니다. 더 나은 접근 방식은 "addClass()" 및 "removeClass()"를 사용하여 디스플레이를 제어하는 것입니다. 또는 "ready()"가 호출될 때 요소에서 "hide()"를 호출할 수 있습니다.
빠른 예:
<!DOCTYPE HTML><html>
<head>
<style>
.invisible{
display: none;
}
.visible{
background-color: deepskyblue;
display:block;
}
</style>
<script src="jquery-3.0.0-alpha1.js"></script>
<script>
$(document).ready(function(){
$("#div1").addClass("invisible");
$("#toggle").click(function(){
$("#div1").removeClass("visible");
$("#div1").addClass("invisible");
});
});
</script>
<title>Control Visibility</title>
</head>
<body>
<p>Hello!</p>
<div id="div1">Can you see this?</div>
<button id="toggle">Click me</button>
</body> </html>
.data() Key 的命名规则
jQuery 团队改变了 .data() 函数的实现来更符合 HTML5 数据集规范。如果 data-* 属性中的 key 包含了数字，该数字将不再参与转换。思考下面的例子：
使用 jQuery 2.1.4：
控制台窗口不显示对象。
使用 jQuery 3.0.0：
由于现在数字不会参与转换为骆驼拼写法，key 被转换成了 foo-42-name。因此，我们得到了控制台中的输出。这个 fiddle 的网址是 http://jsfiddle.net/nWCKt/25/ 。你可以更改 jQuery 的版本来观察变化。
同样，如果我们想要不带任何参数地使用 data() 显示所有的数据，如果 data-* 属性的 key 名在连字符（-）后面接了一个数字，则参数的数量也将会在两个 jQuery 版本中改变，就像上面的例子一样。
width() 与 height() 函数返回小数值
一些浏览 器会将宽度和高度返回为亚像素值。现在无论浏览器是否支持， jQuery 的 .width()、.height()、.css("width") 都可以返回小数值了。对于为了使用 亚像素精度来 设计网页的用户来说，这可能 会是一个好消息。
.load()、.unload()、及 .error() 函数被移除
这些方法早先已经不赞成使用了，现在则已经从 jQuery 3.0.0 alpha 版中被移除。推荐的方法是使用 .on() 函数来处理这些事件。简短示例：
HTML：
<img src="space-needle.png" alt="Space Needle" id="spacen">
JavaScript：
早先的实现方式（现已不可用）
$( "#spacen" ).load(function() {
// Handler implementation
});推荐的实现方式：
$( "#spacen" ).on( "load", function() {
// Handler implementation
});jQuery 对象现在可遍历了
现在已经可以遍历 jQuery 对象了，使用 ES2015 的 for-of。所以，你可以像这样使用：
for ( node of $( "<div id=spacen>" ) ) {
console.log( node.id ); // Returns ‘spacen'
}jQuery 动画现在在后端使用了 requestAnimationFrame API
所有现代的浏览器都已经支持了 requestAnimationFrame（参见： http://caniuse.com/#search=requestAnimationFrame ）了。由于其被普遍支持，jQuery 将会使用此 API 来执行动画。其优势包括更流畅的动画及更少的 CPU 占用（因此，可以在手机上节约电量）。
增强 .unwrap() 函数
.unwrap() 函数可以让你在 DOM 中删除指定元素的父元素，早先不能接收参数。如果有人想给 unwrap 设定一个条件，这可能是个问题。
在 jQuery 3.0.0 alpha 中，.unwrap() 可以接收 jQuery 选择器做为参数来处理这个问题。
jQuery.Deferred 升级为 Promises/A+ 兼容
Promiseis是一个异步操作的最终结果——它是一个对象，承诺在未来交付结果。 和promise接口的最主要方式是then方法， 它注册了回调函数。现在，在JavaScript中使用Promise来完成异步工作变得日益流行。Promises/A+是一个兼容JavaScript promises的开放标准。 (想要更多的信息，可以查看链接: https://promisesaplus.com/ )
从jQuery的参考文档中，Deferred对象是一个由jQuery.Deferred()方法创建的可链接实用对象。它可以注册多个回调函数放入回调函数队列中、调度这个队列、更新任何同步或异步方法的成功和失败状态。在jquery 3.0.0中，jQuery.Deferred对象升级成与Promises/A+和ES2015 Promises兼容。 这就是.then()方法的主要变更。
更好地处理错误情况
这个版本的 jQuery 能更好地处理错误 —— 错误请求过去一直是被忽略的，直到现在的版本才会抛出错误。
举例来说：考虑到 offset，要获取当前第一个元素的坐标，相对于文档来说，就要匹配集合中的元素。如果你正试图在 jQuery 的早期版本找到抵消的窗口（window），你会得到{top: 0, left: 0}这样的结果，而不是抛出一个错误，这是因为抵消窗口（window）是无意义的。而在 3.0 alpha 版本中，它就会抛出一个错误。
另外一个例子：$("#") 现在会抛出一个错误，而不是返回一个长度为 0 的集合。
对自定义选择器（如 :visible ) 进行了加速
当 :visible 之类的选择器在一个文档内多次使用时，性能得到了很大的提升。其内部是通过缓存来实现的 —— 第一次用过这个选择器后，以后返回结果都是一样的。但是其后的每一次调用返回结果都很快，因为缓存起作用了。来自 jQuery 的 Timmy Willison 在 报告 中指出使用缓存后 :visible 选择器的性能提升了 17 倍。
这些都是一些主要的更新。整个列表在他们的官方博客： http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/ .
在哪里下载最新版本
有两个版本：
jQuery 3.0，其支持了现代浏览器： https://code.jquery.com/jquery-3.0.0-alpha1.js
jQuery Compat 3.0，其包含了对 IE8 的支持： https://code.jquery.com/jquery-compat-3.0.0-alpha1.js
也可以从 npm 中获取：
npm install jquery@3.0.0-alpha1 npm install jquery-compat@3.0.0-alpha1
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7526
15
1378
52
81
11
54
19
21
74
내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?
Mar 18, 2025 pm 03:12 PM
기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.
브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?
Mar 18, 2025 pm 03:14 PM
이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.
프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까?
Apr 04, 2025 pm 02:42 PM
프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...
브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까?
Mar 18, 2025 pm 03:16 PM
이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.
누가 더 많은 파이썬이나 자바 스크립트를 지불합니까?
Apr 04, 2025 am 12:09 AM
기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.
소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까?
Mar 18, 2025 pm 03:17 PM
이 기사는 소스 맵을 사용하여 원래 코드에 다시 매핑하여 미니어링 된 JavaScript를 디버그하는 방법을 설명합니다. 소스 맵 활성화, 브레이크 포인트 설정 및 Chrome Devtools 및 Webpack과 같은 도구 사용에 대해 설명합니다.
Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까?
Apr 04, 2025 pm 05:12 PM
Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...
초보자를위한 타이프 스크립트, 2 부 : 기본 데이터 유형
Mar 19, 2025 am 09:10 AM
엔트리 레벨 타입 스크립트 자습서를 마스터 한 후에는 TypeScript를 지원하고 JavaScript로 컴파일하는 IDE에서 자신의 코드를 작성할 수 있어야합니다. 이 튜토리얼은 TypeScript의 다양한 데이터 유형으로 뛰어납니다. JavaScript에는 NULL, UNDEFINED, BOOLEAN, 번호, 문자열, 기호 (ES6에 의해 소개 됨) 및 객체의 7 가지 데이터 유형이 있습니다. TypeScript는이 기반으로 더 많은 유형을 정의 하며이 튜토리얼은이 모든 튜토리얼을 자세히 다룹니다. 널 데이터 유형 JavaScript와 마찬가지로 Null in TypeScript
