jQuery

jQuery는 자바스크립트를 사용하는 사람들이 많이쓰는 라이브러리
( 라이브러리 : 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어 )

jQuery의 기본 문법은 단순하고 강력.

$('li'').css('color','red');

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

DOM(Document Object Model) 기반으로 자바스크립트를 사용할때와 jQuery 기반으로 자바스크립트를 사용할때의 차이를 알아보자.

DOM 기반:

var lis = document.getElementsByTagName('li');                //파일의 TagName이 li인 엘리먼츠들을 lis 배열에 담는다.

for(var i=0;i<lis.length;i++)    {                                      //for문을 통해 순차적으로 배열 요소에 접근한다.

lis[i].style.color='red';    }                                             // 배열요소의 속성 수정

코드를 해석해보면 , 파일에서 li라는 태그네임을 가진 엘리먼트를 lis라는 배열에 담고
for문을 통해 접근하여 lis 엘리먼트들의 색깔을 레드로 바꿔라 , 정도로 해석할수있다.

이 코드를 jQuery 기반으로 작성해보자.

$('li').css('color','red')                        끝                //li에 해당되는 엘리먼츠들 전부 red로 한꺼번에 바꾼다.

(jQuery 함수의 인자로 css선택자(li)를 부여 , 그리고 그것들에 대한 css 컬러를 red로 바꾼다.

보는바와 같이 jQuery 라이브러리를 이용하면 자바스크립트의 생산성을 올릴수있다.

DOM 기반:

var lis = document.getElementsByClassName('active');

for(var i=0;lis.length;i++)    {

lis[i].sty.color='red';     }

jQuery 기반:

$('.active').css('color','red')                                      

끝..

css선택자에서 클래스는 . (dot)를 이용 , ID는 # (우물정자)를 이용

ex)
        $('.active').css.('color','red')                //jQuery 함수의 인자로  class네임이 active인 것을 조회

        $('#active').css.('color','red')                //jQuery 함수의 인자로 ID가 active인 걸 조회

jQuery를 이용하면 체이닝이 가능하다 , (체이닝을 통해 코드의 반복을 줄일수있다.)
ex)

$('#active').css('color','red').css('textDecoration',underline);

//       jQuery함수의 인자로 ID가 active인것을 조회하여 color는 red로 하고 밑줄을 긋도록 체이닝