jQuery 기본구문

jQuery의 기본 문법과 개념

$('#typo').css('color','#ebc000');

jQuery 는 '명령대상($('#typo'))에 명령내용(css('color', '#ebc000'))을 보낸다'고 해석합니다.

따라서, 'CSS의 color 속성에 #ebc000라는 값을 지정하라'고 이해하면 된다.

css()라는 명령은 javaScript에 정의되어 있지 않은 jQuery의 명령입니다. 즉, jQuery의 js 파일 안에  css()라는 명령이 정의되어 있으며, 해당 명령을 main.js에서 이용합니다. 이러한 jQuery의 명령을 'jQuery 메서드' 라고 합니다. css() 의 괄호() 안에 작성한 css속성(color)과 값(#ebc000) 처럼 메서드에 전달되는 데이터를 '매개변수'라고 합니다. ①

※ 위 코드가 jQuery 메서드 (css())와 두 개의 매개변수 ('color' ',#ebc000')로 구성되어 있음을 알아야 합니다.

① 메서드에 매개변수를 지정하는 것을 '매개변수 전달'이라고 하며, 메서드를 실행하는 것을 '메서드  호출'이라고 합니다.

명령대상: $() 함수와 jQuery 객체

css()메서드의 '명령대상'이 되는 것은 'id="typo"가 지정된 HTML 요소' 입니다.

하지만 JQuery 는 HTML요소에  직접 css()메서드를 실행할 수 없습니다. css() 메서드를 사용하려면  jQuery 명령 대상을 고유의 형식으로 지정해야 합니다. 다음을 살펴봅시다.

$('#typo');

$() 함수와 CSS선택자 (예시의 '#typo')의 관계는 앞서 설명한 css() 메서드와 매개변수(CSS속성과 값)의 관계와 같습니다.

선택자는 $() 함수의 매개변수 ('#typo')로 전달됩니다. 

$() 함수는 'HTML 요소를 기반에 두고 jQuery의 고유 요소를 생성한다'라는 기능이 있는 함수입니다.

그리고 HTML 요소를 지정하는 방법으로 CSS 선택자를 지정할 수 있습니다. 이 $() 함수를 통해 JQuery 고유의 형식으로 변환된 요소를 'jQuery 객체'라고 합니다.

메서드와 함수

$()함수와 css() 메서드는 매개변수를 전달받는다는 의미에서는 비슷하지만, $()는 메서드라고 말하지 않고 '함수'라고 말합니다. 개념을 이해하기 조금 까다로울 수 있습니다. 지금은 명령문 앞에 점(.)이 붙어 있으면 '메서드' .점이 붙어 있지 않으면 '함수'라고 이해하면 됩니다.

방금 설명한 코드에서 이 개념을 살펴보면 index.html의 모든 HTML 요소 중 $('#typo')를 지정한 부분만 jQuery 객체로 변환됩니다.

따라서, $('#typo')에 지정된 메서드가 jQuery 객체를 통해 실행된다고 이해하면 됩니다.

다른 예로 $('h1')을 지정하면 h1이라는 HTML요소가 jQuery 객체로 변환되고 명령 대상이 됩니다.

jQuery의 실행 흐름은 보통 다음과 같습니다.

1 $()함수에서 명령 대상이 되는 HTML 요소를 jQuery 객체로 변환합니다.

2 변환한 jQuery 객체에 메서드를 호출해서 HTML 요소를 변경합니다.

jQuery 객체                      변경을 위한 명령

 $( HTML 요소 )                 .  메서드 ( ' 매개변수1 ' , ' 매개변수2 ' ) 

출처: 최고의 제이쿼리 作주식회사 시프트브레인