JQuery 이란

 

 

 

JQuery 

 

1. 엘리먼트를 선택하는 강력한 방법이다.
2. 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공한다.
3. 자바스크립트 라이브러리라고 할 수 있다.

 

 

 

사용방법

 

1. http://jquery.org 에서 jquery 소스코드를 다운로드 한다.
2. 위의 파일을 서버에 업로드 한 후 웹페이지 안에서 자바스크립트를 삽입한다.

 

 

 

 

 

Javascript와 JQuery 비교

 

탭을 클릭했을 때 포커스를 색깔로 표시 변경하는 코드이다.

 

<script>
            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>
            $('#navigation li').live('click', function() {
                $('#navigation li').removeClass('selected');
                $(this).addClass('selected');
            })
 </script>

 

자바스크립트 본래의 코드보다 제이쿼리가 훨씬 간결해졌다.