JQuery 편집하기 (부분)

== 버전별 차이점 ==

=== jQuery 1.x ===

jQuery 1.x는 2006년부터 2016년까지 개발된 버전으로, '''[[Internet Explorer]] 6-8 지원'''이 특징이다. <code>live()</code> 메소드를 사용했으나 현재는 deprecated되었고, <code>$.browser</code>를 통한 브라우저 감지 기능이 있었다가 jQuery 1.9에서 제거되었다.

<syntaxhighlight lang="javascript">
// jQuery 1.x의 특징
// - IE 6-8 지원
// - live() 메소드 사용 (현재는 deprecated)
$('.button').live('click', function() {
    // IE 6-8에서도 동작
});

// 브라우저 감지 (jQuery 1.9에서 제거됨)
if ($.browser.msie && $.browser.version < 9) {
    // IE 8 이하에서만 실행
}
</syntaxhighlight>

=== jQuery 2.x ===

jQuery 2.x는 2013년부터 2016년까지 개발된 버전으로, '''IE 6-8 지원을 중단'''했다. 이로 인해 성능이 향상되고 파일 크기가 약 12% 감소했다. API는 1.x와 동일하지만 더 빠른 성능을 제공한다.

=== jQuery 3.x ===

jQuery 3.x는 2016년부터 현재까지 개발되고 있는 최신 버전이다. '''Promise 호환성'''이 추가되어 <code>$.get()</code> 등의 AJAX 메소드가 <code>.then()</code>과 <code>.catch()</code>를 지원한다. <code>for...of</code> 루프를 지원하고, <code>requestAnimationFrame</code>을 사용하며, [[CSS]] 커스텀 프로퍼티도 지원한다.

<syntaxhighlight lang="javascript">
// jQuery 3.x의 새로운 기능들

// Promise 호환성
$.get('data.json')
    .then(function(data) {
        console.log('성공:', data);
    })
    .catch(function(error) {
        console.log('실패:', error);
    });

// for...of 루프 지원
var $elements = $('.items');
for (let element of $elements) {
    console.log(element); // DOM 요소
}

// requestAnimationFrame 사용
$('#element').show(); // 이제 requestAnimationFrame 사용

// CSS 커스텀 프로퍼티 지원
$('#element').css('--main-color', 'red');

// 더 엄격한 HTML 파싱
$('<div class="test"/>'); // 올바른 방식
// $('<div class=test>'); // 3.x에서는 오류 발생 가능
</syntaxhighlight>

=== 마이그레이션 가이드 ===

1.x에서 3.x로 마이그레이션할 때 주의해야 할 사항들이 있다. <code>size()</code> 메소드가 제거되어 <code>.length</code> 속성을 사용해야 하고, <code>andSelf()</code> 메소드가 <code>addBack()</code>으로 변경되었으며, <code>load()</code> 이벤트 핸들러가 제거되어 <code>on('load')</code>를 사용해야 한다.

<syntaxhighlight lang="javascript">
// 1.x에서 3.x로 마이그레이션 시 주의사항

// 1. size() 메소드 제거됨
// 잘못된 방법 (1.x)
var count = $('.items').size();

// 올바른 방법 (3.x)
var count = $('.items').length;

// 2. andSelf() 메소드 -> addBack()로 변경
// 잘못된 방법 (1.x)
$('#container').find('p').andSelf().addClass('highlight');

// 올바른 방법 (3.x)
$('#container').find('p').addBack().addClass('highlight');

// 3. load() 이벤트 핸들러 제거됨
// 잘못된 방법 (1.x)
$('#image').load(function() {
    console.log('이미지 로드됨');
});

// 올바른 방법 (3.x)
$('#image').on('load', function() {
    console.log('이미지 로드됨');
});
</syntaxhighlight>