1. jQuery 개요 및 Core

 ■ jQuery 개요
 ο 개요
   - jQuery는 빠르고 간결한 JavaScript Library
   - HTML document traversing, 이벤트 처리, 애니메이션, Ajax 지원을 단순화하여 빠른 웹 개발을 가능하게 함
   - CSS3 규격 지원 : CSS 1 ~ 3와 기본 XPath 지원
   - 다양한 브라우저 지원
   - 경량 파일(90KB 수준의 파일크기)
   - John Resig에 의해 개발

 ο 다운로드 및 라이브러리 포함
   - jQuery 다운로드
      http://jquery.com/

   - jQuery를 사용하기 위한 라이브러리 포함
     <script type="text/javascript" src="jquery-1.6.4.min.js"></script>

■ jQuery API Core
 ο 개요
   jQuery의 핵심으로 jQuery 오브젝트를 의미 한다.

ο jQuery 사용
   jQuery는 $로 대체 가능.
   jQuery() 메소드는 다른 라이브러리(프로토타입 등) 에서 $() 메소드를 사용 할 경우 사용한다.(충돌이 날 경우)

   1) jQuery(selector, [context])
      jQuery(selector, [context])
      jQuery(element)
      jQuery(elementArray)
      jQuery(jQuery object)
      jQuery()

     - 의미
         CSS 선택 장치를 받고, 매치한 엘리먼트 집합의 jQuery 오브젝트를 돌려준다.

     - 사용 예
        // 첫번째 폼의 모든 radio 객체
        $("input:radio", document.forms[0])

        // 모든 radio 객체
        $("input:radio")

        // 특정 객체(id가 myid인 객체)
        $("#myid")  -> document.getElementById("myid")
        // 바탕화면의 배경색 변경
        $(document.body).css("background", "#FFFF00");

   2) jQuery(html, [ownerDocument])
      jQuery(html, [ownerDocument])
      jQuery(html, props)

     - 의미
         html 문자열을 받아 DOM Element(을)를 작성해, 그것들을 포함한 jQuery 오브젝트를 돌려준다.

     - 사용 예
         // body에 <div><p>Hello</p></div> 태그를 추가
         $("<div><p>Hello</p></div>").appendTo("body");
    
   3) $(callback) / jQuery(callback)
      - $(document).ready(callback)의 단축형.
      - $(document).ready(callback) 은 문서가 사용가능한 시점을 자동으로 인식하여 주어진 콜백 함수를 동작시킨다.
      - 자바스크립트의 window.onload=function(){...}에 대응 된다.
      - onload 이벤트보다 먼저 실행.
      - 콜백 함수란 지정된 행위가 끝난다음 자동적으로 실행될 함수를 의미한다.

      - 사용 예
        $(document).ready(function(){
            alert("A");
         });

         또는

         $(function(){
            alert("A");
         });

       /*
        // 두번 다 실행
        $(function(){
          alert("A");
         });
         $(function(){
           alert("B");
         });
      */

       /*
         // 한번 만 실행
         window.onload = function(){
            alert("A");
         }
         window.onload = function(){
            alert("B");
         }
      */

  4) each(function([index, Element]) )
     - 의미
       매치 되어진 모든 원소에 대해 주어진 콜백 함수를 실행한다. 루프의 의미이다.

      - 사용 예
        $(function(){
            $(document.body).click(function () {
                $("div").each(function (i) {
                     if (this.style.color != "blue") {
                         this.style.color = "blue";
                     } else {
                         this.style.color = "";
                     }
               });
           });
     });