JQuery

1. JQuery

	웹 페이지를 제작할 때 html은 기본 골격, css는 스타일링,
    자바스크립트는 움직이는 요소를 제어할 때 사용한다. 
    jquery는 자바스크립트를 조금 더 편하게 사용하기 위한 라이브러리로
    코드 양이 적고 쉽게 쓸 수 있는 구조를 갖는다.
    

1-1. 사용법

        1) 구글에 jquery cdn을 검색하고 접속
        2) 이미지에서 보이는 1.x, 2.x, 3.x는 회사나 프로젝트에 따라 버전이 달라진다.
		3) 사용하고자하는 쿼리의 minified를 누르면 아래 사진과 같이 나온다.             

		4) src 뒤에 따옴표로 묶여 있는 주소를 주소창에 입력하면 코드가 적힌 페이지가 나온다.
        5) 이 코드를 따로 저장하면 js 파일이 생성되는 것이다.

        6) 주소만 가져와 html 파일 script src에 연결하여 사용할 수도 있다.
        

1-2. 기본 문법

	1) $(선택자).동작함수();
    
    - 달러($) 기호는 제이쿼리에 접근할 수 있게 하는 식별자이다.
      이를 활용하여 html의 요소를 바꾸고 css의 스타일도 변경할 수 있다.
      
	2) .css() 메서드
    
    - 선택된 style 속성을 반환받거나 설정할 수 있다.
    
    2-1) .css() 메서드 종류
    
    	.css("속성"); - 선택된 요소의 속성 값을 반환
        .css("속성", "값"); - 선택된 요소의 속성과 값을 설정
        .css({"속성1":"값1", "속성2":"값2"...}); - JSON 구문을
        사용하면 여러 css 속성을 한 번에 설정할 수 있다.
        
    3) .animate({속성:값}, 속도, 콜백)
    
    - 애니메이션 효과도 줄 수 있는 문법이다.
    - 속도 모션의 속도로 1000을 줄 경우 1초라는 의미이다.
    - 콜백(callback)은 앞에 먼저 쓴 코드가 실행되고 나중에 실행된다.

        	$('').animate({속성:값}, 속도, function() {
            	// 사용하고자 하는 코드 작성
            })

     4) .addClass(''), .removeClass(''), .hasClass('')
     
      - 클래스를 추가하거나 삭제할 수 있는 문법이다.
      - hasClass는 해당 클래스가 존재 유무 파악이 가능하다.
        (console을 사용해서 확인이 가능하다.)
    

1-3. 문서 로드

	자바스크립트는 웹브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 한다. 
    하지만 아직 생성되지 않은 html 요소가 나중에 추가가 되는 경우 오류가 생긴다.
    이러한 오류를 방지하기 위해 다음과 같이 코드를 설정한다.
    
    1) widnow.onload = function(){
    		자바스크립트 코드 작성
        };
       
    - 자바스크립트에서는 Window 객체의 onload() 메소드를 이용하여
      문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다.
    
    2) $(document).ready(function(){
    		제이쿼리 코드 작성
       });
       
    - JQuery에서는 Document 객체의 ready() 메소드를 이용하여
      위와 같이 동일하게 로드된 뒤에 코드가 실행된다.
       
    3) $(function(){
    		제이쿼리 코드 작성
      });
	
    - JQuery에서는 위 코드와 동일한 결과를 보장하며 
      더욱 짧은 문법을 제공한다.