JQuery 초 간단 이해

jQuery는 JavaScript에서 사용되는 편리하고 강력한 라이브러리 입니다.

자세한 내용은 아래 링크를 참고 하시면 됩니다. :)
-> http://jquery.com

* jQuery의 API 참고
-> https://api.jquery.com

jQuery를 이용하면 DOM을 사용하는 것 보다 훨씬 효율적으로 필요한 객체를 조회할 수 있고,
jQuery는 객체를 조회할 때 CSS 선택자를 이용합니다.

jQuery 라이브러리 사용 (jQuery’s CDN)
--> html 코드에 아래 코드를 추가하면 된다. :)
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

jQuery의 기본 Syntax
$('CSS의 선택자').css('color', 'pink');

$('li').css('color', 'pink');
====================================================================================

 $()는 jQuery의 함수이다. 이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴한다. 이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다. 위의 그림에서 css는 선택자에 해당하는 객체들의 style에 color:red로 변경한다.
====================================================================================

* jQuery에서 attr과 prop의 차이!!
-> attr은 html의 attribute 실제 값을 리턴, prop는 그에 매칭되는 JavaScript의 property값을 리턴

DOM과 jQuery의 비교 Sample
아래의 코드는 동일한 결과를 가져오는데,  jQuery가 훨씬 편리한 것을 알 수 있다.

1. DOM을 사용한 경우

            var lis = document.getElementsByTagName('li');
            for(var i=0; i<lis.length; i++){
                lis[i].style.color='pink';   
            }

2. jQuery를 사용한 경우 (jQuery에서는 아래 한 라인으로 암시적 반복이 수행된다.)

            $('li').css('color', 'pink')

jQuery의 Chaining 문법
아래의 Chaining 문법을 통해 여러가지의 css 설정 적용이 한 Line 에서 가능하다. (멋짐..)

         $('#active').css('color', 'red').css('textDecoration', 'underline');
/* active 라는 id를 가진 요소에 red와 underline을 적용 */

jQuery의 조회 범위 제한 문법
아래와 같이 여러가지 방법을 통해 범위 제한 및 CSS 적용이 Chaining가 가능하다.

1. $( ".marked", "#active").css( "background-color", "red" );
-> 여기서 "#active" 는 Selcetor context라고 한다. ".marked" 는 Selctor 이다.


2. $( "#active .marked").css( "background-color", "red" );
-> 1번과 같은 결과를 수행한다.  (id가 active 인 것중에서 클래스가 marked 인 것을 조회한다.)


3, $( "#active").find('.marked').css( "background-color", "red" );
-> 1,2번과 같은 결과를 가져오며 여기서는 .find() 메소드를 이용한 것


4. $('#active').css('color','blue').find('.marked').css( "background-color", "red" );
-> .find()를 이용하는 것의 장점은 Chainging 이 가능하기 때문!!

/* Javascript Sample */
console.info("hello world");