jQuery

jQuery와 함께하는 신나는 자바스크립트!

InspiredJW 2012. 2. 4. 15:37

jQuery의 문구처럼 짧은 소스로 더 풍부하게 코딩하는 것이 지향하는 목표입니다

 jQuery는 John Resig라는 Mozilla JavaScript 개발자가 만든 자바스크립트 프레임워크입니다.

위 문구처럼 보다 간결한 소스로 더 많은 일을 할 수 있게 해주는데요.

그럼 왜 구지 JavaScript를 그냥 쓰지 않고 jQuery를 많은 사람들이 사용할까요?

마이크로소프트에서도 jQuery를 Visual Studio MVC Framework에 포함시켰고

국내, 외 사이트에 들어가서 소스보기를 눌러보면 심심치 않게 jQuery가 포함되어 있는 것을 확인해

볼 수 있습니다. 점점 RIA (Rich Internet Application) 이 부각 되는데 비해 Flash나 Silverlight 는 부가적으로

플러그인을 설치해야 한다는 단점, 그리고 HTML5 + CSS3 와 발전하는 JavaSciprt 테크닉으로 인해 

충분히 대체되거나 오히려 더 뛰어난 RIA를 구현하기도 합니다.

이런 JavaScript 의 수요가 점점 부각 되는 시점에서 브라우저마다 조금씩 다른 명령어, 호환 문제도

많이 부각 되는데 프레임워크를 이용하면 이런 크로스 브라우징 (여러 브라우저에서 호환이 가능)이

어느정도 해결이 됩니다. 왜냐하면 프레임워크를 거쳐서 명령어를 내리게 되면 프레임워크가 알아서

브라우저에 맞는 명령어를 날리게끔 만들어져 있기 때문입니다.

JavaScript도 프레임워크가 사실 엄청 여러가지 인데요.

jQuery, Dojo, MooTools, ExtJS, YUI, Prototype 등이 있습니다.

사실 이미 jQuery가 비율이 압도적이구요.

따라서 인터넷에서 얻을 수 있는 응용 자료나 플러그인 또한 jQuery가 많기 때문에

jQuery를 선택하는 것을 나쁘지 않은 선택이라고 생각합니다.

먼저 <head>태그 안에 



을 넣고
JavaScript 소스에서 DOM 이 다 로딩 된 이후에 jQuery 명령을 날리기 위해
$(function() {
    // Code
});

Code 안에 소스를 입력하시면 됩니다!
먼저 jQuery를 이용하면 DOM을 조작하는 것이 얼마나 쉬운 일인지 보여드리겠습니다.

HTML:
Hello

JavaScript:
 
var myInput = document.getElementById('myInput');
myInput.innerHTML = "TEST";

예제보기

jQuery:
$("#myInput").html("test");
예제보기

딱 봐도 훨씬 간단하지요?

사실 뭐 이런 간단한 DOM 셀렉터야 뭐.. 라고 생각하실 수 있으시겠지만

jQuery안에서 .eq(), :even, :odd, parent() 등 유용한 셀렉터들이 많이 있고

계속 버전이 올라감에 따라 셀렉터들도 계속 늘고 있는 추세입니다.

또 이를 통해 CSS도 마음대로 조작할 수 있는데요.

HTML:



jQuery:
$(function() {
    $(".contentLink").click(function() {
        if( $(this).attr('href') == '#email' ) {
            $("#menu").hide();
            $("#email-menu").show();
        }
    });
});
"Email"을 클릭하면 뒤에 숨겨진 DIV를 보여주고 앞서 보였던 DIV를 가리게 할 수 있습니다.

예제 보기


이제 여러분도 jQuery를 이용해서 좀더 편하고 효율적으로 JavaScript를 할 수 있습니다.

혹시 궁금한점이 있으시면 jsfiddle.net에 예제를 만들어서 주소와 함께 댓글에 올려주시면

최선을 다해서 답변을 해드리겠습니다 ^ㅡ^