[JQuery 기본 개념] jQuery 사용 이유

1.1  javascript vs jquery

탭을 클릭했을 때 포커스를 변경하는 예제를 javascript와 jquery로 구현했을 때를 비교해본다.

javascript

jquery

<script type="text/javascript"> function addEvent(target, eventType,eventHandler, useCapture) { if (target.addEventListener) { // W3C DOM target.addEventListener(eventType,eventHandler,useCapture?useCapture:false); } else if (target.attachEvent) { // IE DOM var r = target.attachEvent("on"+eventType, eventHandler); } } function clickHandler(event) { var nav = document.getElementById('navigation'); for(var i = 0; i < nav.childNodes.length; i++) { var child = nav.childNodes[i]; if(child.nodeType==3) continue; child.className = ''; } event.target.className = 'selected'; } addEvent(window, 'load', function(eventObj) { var nav = document.getElementById('navigation'); for(var i = 0; i < nav.childNodes.length; i++) { var child = nav.childNodes[i]; if(child.nodeType==3) continue; addEvent(child, 'click', clickHandler); } }) </script>   //일부 생략

<script type="text/javascript"> $('#navigation li').live('click', function() { $('#navigation li').removeClass('selected'); $(this).addClass('selected'); }) </script>

이렇듯 jquery는 정말로 편하고 좋은 라이브러리이다. 다양한 기능들을 아주 쉽게 구현이 가능하고

소스 길이도 획기적으로 줄어든다. 매번 document.getElement어쩌고 저쩌고 한 구문들 대신 $와 선택자를 사용해서 구현을 하면 된다.

또한 toggleClass,removeClass,addClass등 쉽게 css 조작하여 UI들이 바로바로 적용되는 것을 알 수 있다.!

또한 jquery는  '멀티 브라우져 지원'를 지원한다. 그 말인 즉슨 어느 브라우져에서나 동일하게 작동을 한다는 것이다.