2.jQuery

개발자는 매번 구현해야하는 기능별로 서로 다른 브라우저별 코드의 문법을 파악하고, 이중으로 작성하다보니 상당한 피로와 개발 생산성이 저하됨

브라우저별 코드의 문법 사용 가능 여부 파악

app.js


<button id="btn">Click</button>
<script>
var btn = document.getElementById("btn");
 
if (btn.addEventListener) {
    // Netscape 이용자
    btn.addEventListener("click", function () {
        alert("clicked");
    });
} else if (btn.attachEvent) {
    // Internet Explorer 이용자
    btn.attachEvent("onclick", function () {
        alert("clicked");
    });
}
</script>

“누군가 각 브라우저 벤더별로 미리 작성해둔 코드가 없을까?“

1. jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jQuery의 핵심은 브라우저별 차이를 개발자가 직접 처리하지 않도록 추상화해주는 것에 있음

과거 브라우저 전쟁 시기에는 아래의 개념들이 브라우저마다 조금씩 달랐고, jQuery는 이를 하나의 API로 통일하였음

DOM API
이벤트 모델
CSS 선택자 지원
Ajax 구현 방식

이로 인해 수많은 개발자들이 브라우저가 아니라 기능 구현에만 집중할 수 있게 됨

정리하면,
jQuery는 브라우저마다 다른 DOM, 이벤트, Ajax 구현을 하나의 API로 통합하여 웹 개발자가 크로스 브라우징 문제에서 해방되도록 만든 JavaScript 라이브러리

2. 사용 예시

app.js


// 순수 JS (과거 브라우저 호환 문제에 따른 이중 로직)
if (element.addEventListener) {
  element.addEventListener('click', handler);
} else {
  element.attachEvent('onclick', handler);
}
 
// jQuery 활용 코드
$(element).on('click', handler);

jQuery 초기 실제 소스 코드
→ 아래의 코드는 addEvent로 검색하여 찾을 수 있음

jquery.js


// ... 
// Support: IE 9-11, Edge
	// Accessing iframe documents after unload throws "permission denied" errors (jQuery #13936)
	if ( (parent = document.defaultView) && parent.top !== parent ) {
		// Support: IE 11
		if ( parent.addEventListener ) {
			parent.addEventListener( "unload", unloadHandler, false );
 
		// Support: IE 9 - 10 only
		} else if ( parent.attachEvent ) {
			parent.attachEvent( "onunload", unloadHandler );
		}
	}
// ...