jQuery 3 공개:17가지 강력한 새 기능 및 활용 방법

jQuery가 웹을 뒤흔들기 시작한 지 10년이 넘었고, 그럴만한 이유가 있어 계속해서 자리를 지키고 있습니다. 2015년 7월, jQuery는 오랜만에 대규모 업데이트인 버전 3.0의 첫 번째 알파를 발표했습니다. 그들은 거의 2년 동안 이 일을 해왔습니다. 새 버전은 이전 버전과의 호환성을 염두에 두고 더 얇고 빠른 jQuery를 약속합니다.

현재 버전 3.1.1 많은 버그를 수정하고, 새로운 메소드를 추가하고, 일부 기능을 제거하고, 일부 기능의 동작을 변경합니다. 어떤 새로운 기능이 추가되었고, 어떻게 사용하는지 살펴보겠습니다.

17. 숨기기 및 표시 방법

반응형 디자인과의 호환성을 높이기 위해 jQuery 3에서는 많은 요소를 숨기도록 개선되었습니다. 54개의 샘플을 대상으로 한 테스트에서 새 버전이 이전 버전보다 2% 더 빠른 것으로 나타났습니다.

이 외에도 .hide(), .show() 및 .toggle() 메서드는 계산된 스타일 대신 인라인 스타일에 중점을 둡니다. 이렇게 하면 가능할 때마다 스타일시트의 표시 값을 더 잘 존중하게 됩니다. 이는 CSS 규칙이 창 크기 조정이나 장치 방향 조정과 같은 이벤트에 따라 동적으로 변경될 수 있음을 의미합니다.

<script>
$( "#showr" ).click(function() {
 $( "div" ).first().show( "fast", function showNext() {
 $( this ).next( "div" ).show( "fast", showNext );
 });
});
 
$( "#hidr" ).click(function() {
 $( "div" ).hide( 1000 );
});
</script>

읽기:웹사이트에 현대적인 느낌을 주는 28가지 놀라운 CSS3 효과

16. WrapAll() 및 Unwrap() 함수

jQuery 2에서 .wrapAll() 메서드는 함수가 전달될 때 .wrap()처럼 동작했습니다. 이제 변경되었습니다. .wrapAll(function)은 함수 호출의 문자열 결과를 사용하여 함수를 한 번 호출하여 전체 컬렉션을 래핑합니다.

jQuery( "div" ).wrapAll(function( /* No index argument, since the function would be executed only once */ ) {
 // context is equal to the first found element
 return "<h4></h4>";
});

jQuery 3에는 unwarp() 메소드에 대한 선택적 선택기 매개변수가 있습니다. 메소드의 새로운 서명은 다음과 같습니다:

unwrap([selector])

이를 통해 상위 요소 내에서 일치시킬 선택기 표현식이 포함된 문자열을 전달할 수 있습니다. 일치하는 항목이 있으면 일치하는 하위 요소가 래핑 해제되고 그렇지 않으면 래핑되지 않습니다.

15. 고려되는 스크롤바 너비/높이

jQuery 2에서 $(window).width()를 호출하면 콘텐츠가 요소의 크기를 초과하는 경우 브라우저가 추가한 모든 스크롤바를 제외하는 '콘텐츠 너비'가 반환됩니다. CSS 미디어 쿼리와 동일한 측정값을 제공하기 위해 $(window).outerWidth() 및 $(window).outerHeight()는 이제 스크롤 막대 너비와 높이를 포함한 너비와 높이를 반환합니다. 이는 DOM 속성 window.innerWidth와 동일합니다.

14. data()의 동작

jQuery 3에서는 Dataset API 사양에 맞게 data() 메서드의 동작이 약간 변경되었습니다. 이제 모든 속성의 키를 카멜 케이스로 변환합니다.

var $elem = $('#container');
$elem.data({
 'custom-property': 'Hello World'
});
console.log($elem.data());

이전 버전을 사용하는 경우 콘솔에 다음과 같은 결과가 표시됩니다:

{custom-property: "Hello World"}

jQuery 3에서는 다음을 얻을 수 있습니다:

{customProperty: "Hello World"}

보시다시피 속성 이름은 대시 없이 카멜 케이스로 되어 있지만 이전 버전에서는 소문자로 유지되고 대시가 그대로 유지되었습니다.

13. 클래스 운영 지원 SVG

jQuery는 여전히 SVG를 완전히 지원하지 않지만 .hasClass() 또는 .addClass()와 같은 CSS 클래스 이름을 조작하는 메서드를 사용하여 SVG 문서를 대상으로 지정할 수 있습니다. SVG에서 jQuery를 사용하여 클래스를 변경(추가, 전환, 제거)하거나 찾은 다음 CSS를 사용하여 클래스 스타일을 지정할 수 있습니다.

12. 표시 및 숨겨진 필터

jQuery 3에서는 :visible 및 :hidden 필터의 의미를 수정합니다. 너비와 높이가 0인 레이아웃 상자를 포함하여 레이아웃 상자가 있는 경우 요소 :visible 로 간주합니다. 예를 들어, 내용이 없는 br 요소와 인라인 요소는 :visible 필터에 의해 선택됩니다.

다음 HTML 페이지가 있는 경우:

<section></section>
<div></div>
<br />

그리고 다음 명령문을 실행합니다:

console.log($('body :visible').length);

jQuery 1과 2에서는 결과가 0이 되지만 이 버전에서는 결과가 3이 됩니다.

11. 너비와 높이에 대한 반올림이 더 이상 없습니다

이제 jQuery는 브라우저가 지원할 때마다 정수 대신 부동 숫자로 .width() 및 .height() 값을 반환합니다. 웹페이지 디자인을 위해 하위 픽셀 정밀도를 원하는 사용자에게 이는 좋은 소식이 될 수 있습니다.

예를 들어, 너비가 100px인 컨테이너 요소 내부에 너비가 1/3(33.3333333%)인 3개의 요소가 있는 경우:

<div class="container">
 <div>The car is </div>
 <div>black</div>
 <div>Audi</div>
</div>

하위 요소의 너비를 얻으려는 경우:

$('.container div').width();

더 정확한 결과인 33.3333333 값을 얻게 됩니다.

10. 추가 보안 계층

XSS(Cross-Site Scripting) 공격에 대비해 추가 보안 계층이 통합되었습니다. 개발자는 $.ajax() 및 $.get() 메서드의 옵션에 dataType:”script”를 지정해야 합니다. 이렇게 하면 원격 사이트가 스크립트가 아닌 콘텐츠를 제공하지만 악성 스크립트를 제공하기로 결정하는 공격 가능성을 방지할 수 있습니다. jQuery.getScript()는 dataType:”script”를 명시적으로 설정하므로 이 변경 사항에 영향을 받지 않습니다.

$.ajax({
 accepts: {
 mynewcustomtype: 'application/abc-some-custom-type'
 },
 // how to deserialize a `mynewcustomtype`
 converters: {
 'text mynewcustomtype': function(result) {
 // do things
 return newresult;
 }
 },
 
 // Expect a `mynewcustomtype` back from server
 dataType: 'mynewcustomtype'
});

9. 잘못된 해시 마크

jQuery 3에서는 선택기 문자열이 jQuery(“#”) 및 .find(“#”)와 같이 해시 표시로만 구성된 경우 구문 오류가 발생합니다. 이전 버전에서는 $(“#”)가 빈 컬렉션을 반환했고 .find(“#”)에서 오류가 발생했습니다.

8. 문자열을 이스케이프하는 새로운 방법

새로운 jQuery.escapeSelector() 메서드를 사용하면 CSS 선택기에서 특별한 의미를 갖는 문자열이나 문자를 이스케이프할 수 있습니다. ID나 클래스 이름에 세미콜론이나 점 등 CSS에서 특별한 의미를 갖는 문자가 있는 경우에 유용합니다.

예를 들어, 페이지의 요소에 "abc.xyz" ID가 있는 경우 $("abc.xyz")로 선택할 수 없습니다. 선택기는 ID가 'abc'이고 클래스도 'xyz'인 요소로 구문 분석되기 때문입니다. 그러나 새로운 메소드 $(“#” + $.escapeSelector(“abc.xyz”))를 사용하여 선택할 수 있습니다.

7. jQuery.when() 인수

jQuery 3에서는 $.when()에 then() 메서드가 포함된 입력 인수를 추가하면 Promise 호환 "thenable"로 해석됩니다. 이를 통해 Bluebird Promise 및 ES6 Promise를 포함하여 훨씬 더 광범위한 입력이 가능해 더욱 정교한 비동기 콜백을 작성할 수 있습니다.

$.when($.ajax("test.apx")).then(function(data,textStatus,jqHXR) {
 alert (jqHXR.status); //alerts 200
 }); 

다중 인수 jQuery.when 호출은 Promise.all처럼 작동하여 이행 값을 이행 배열로 집계하거나 첫 번째 거부 값으로 거부합니다. 단일 및 0 인수 호출은 Promise.resolve처럼 동작하여 Thenable과 동일하게 해결되거나 Promise가 아닌 입력으로 이행하는 Deferred를 반환합니다.

또한 jQuery.when() 메서드는 더 이상 입력 Deferred에서 출력 Deferred로 진행 알림을 전달하지 않습니다.

6. URL의 해시가 보존됩니다

이제 jQuery.ajax() 메서드는 전체 URL을 전송(스크립트, xhr, jsonp 또는 사용자 정의 전송)으로 보냅니다. URL에 해시가 있는 경우 더 이상 해당 해시를 제거하지 않습니다. 그러나 연결 반대편에 있는 서버가 URL의 해시를 처리할 수 없는 경우 요청을 보내기 전에 수동으로 이를 제거해야 합니다.

5. 지연된 객체는 JS Promise와 호환됩니다

Deferred는 콜백 대기열을 생성할 수 있게 해주는 체인 가능한 객체입니다. jQuery 3에서는 지연된 객체가 새로운 Promises/A+ 표준과 호환되도록 만들었습니다. .then() 메소드에 중요한 변경 사항이 있습니다. .then() 콜백 내에서 발생한 모든 예외는 이제 포착되어 거부 값으로 변환됩니다. 거부 핸들러에서 반환된 nonnable 값은 이행 값으로 전환됩니다.

이전 스타일의 Deferred 메소드:

$.ajax("/stat")
 .done(function(data) {
 whoops();
 // console displays: "whoops is not a function"
 // no further execution
 })
 .fail(function(arg) {
 // doesn't execute since the was not caught 
 });

새로운 표준 Promises/A+ 동작

$.ajax("/stat")
 .then(function(data) {
 whoops();
 // console displays "jQuery.Deferred exception: whoops is not a function"
 // no further execution
 })
 .catch(function(arg) {
 // arg is an Error object - "whoops is not a function"
 });

4. 애니메이션을 위한 새로운 API

jQuery 3에서는 애니메이션 실행을 위해 requestAnimationFrame() API를 사용합니다. 이 새로운 API는 애니메이션을 더 부드럽고 빠르게 실행하여 CPU 시간을 덜 소모합니다. 이를 지원하는 브라우저에서만 사용됩니다. Internet Explorer 9과 같은 이전 브라우저의 경우 jQuery는 이전 API를 대체 방법으로 사용합니다.

읽기:디자이너를 위한 24가지 CSS3 및 HTML5 애니메이션 도구

3. jQuery 3은 엄격 모드에서 실행됩니다.

jQuery 3을 지원하는 대부분의 브라우저는 엄격 모드를 사용하며 새 버전은 이 지시문을 염두에 두고 구축되었습니다. jQuery 3은 엄격 모드로 작성되었지만 코드는 엄격 모드에서 실행될 필요가 없으므로 현재 버전으로 마이그레이션하려는 경우 기존 코드를 다시 작성할 필요가 없습니다. 그러나 한 가지 예외가 있습니다. ASP.net의 일부 버전은 엄격 모드로 인해 호환되지 않습니다.

doPostBack() 메서드의 호출 스택을 통해 추적을 시도하기 위해 arguments.caller.callee를 사용하는 ASP.net 4.0을 실행하는 경우 jQuery 2.x 또는 이전 버전을 계속 사용하는 것이 좋습니다. 요즘 브라우저는 error.stack을 통한 스택 추적을 지원하므로 Arguments.caller.callee를 검사할 필요가 없습니다.

2. Get 및 Post 메소드에 대한 새로운 서명

jQuery에는 $.ajax()에 정렬하기 위한 $.get() 및 $.post() 유틸리티 함수에 대한 새로운 서명이 있습니다. 새로운 서명은 설정 매개변수입니다.

$.get([settings])
$.post([settings])

개체 설정에는 많은 속성이 있을 수 있습니다. $.ajax()에 제공할 수 있는 것과 동일한 객체입니다. $.ajax()와 반대로 $.get() 및 $.post()에 객체를 전달할 때의 유일한 차이점은 $.get() 및 $.post()에는 Ajax 요청(GET 및 POST)을 수행하기 위해 미리 설정된 HTTP 메소드가 있기 때문에 메소드 속성이 항상 무시된다는 것입니다.

코드를 고려해보세요:

$.get({
 url: 'https://www.rankred.com',
 method: 'POST' // property is ignored
});

메소드 속성에도 불구하고 명령문은 POST 요청이 아닌 GET 요청을 보냅니다.

1. For...of 루프

jQuery 3은 ECMAScript 6 사양에 도입된 for...of 루프를 지원합니다. Map, Set, Array 등과 같은 반복 가능한 객체를 반복할 수 있습니다. 이 루프를 사용할 때 얻은 값은 한 번에 하나씩 jQuery 컬렉션의 DOM 요소입니다.

읽기:웹사이트 개선을 위한 26가지 최신 jQuery 플러그인

for...of 루프는 이전의 $.each( ) 구문을 대체하고 jQuery 컬렉션의 요소를 통해 더 쉽게 루프를 수행하는 데 사용할 수 있습니다. 페이지의 각 입력 요소에 이름을 할당한다고 가정해 보겠습니다.

jQuery 2 코드는 다음과 같습니다...

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

jQuery 3 코드는 다음과 유사합니다…

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