jQuery의 기본 문법

태그 선택

html 문서 내에서 임의으 태그를 선택할 수 있다. 

$(‘li’).css(‘color’, ‘red’);

항상 $로 시작한다. $(..)로 괄호가 있으므로 $는 함수이다. 따라서 $를 jquery 함수라 부른다. 인자에는 다양한 값이 들어 갈 수 있으나 일반적 인자는 css 선택자이다.  

위 명령은 li라는 태그 이름을 가진 요소의 선택자이다. 

$(..) 함수가 실행되면 리턴한 값은 jquery 객체가 된다. 객체의 메쏘드로써 css(..)를 가지며, 이는 요소 li에 다음과 같은  작용을 한다.  

<li style=“color: red”>

즉, 실행되면 html의 태그 li의 스타일 속성에 색 속성을 추가해 준다. 

이러한 사항을 기존의 DOM 코드로 해 주려면 요소 선택부터 좀 더 복잡하다.

var lis = document.getElementsByTagName(‘li’); 

로 선택하면 된다. 수행 후, 여러 요소가 선택되어 배열로 넘어오고,

for(…) {…}

로 루프를 돌려 각각에 대해 필요한 처리를 해 주어야 한다.

클래스 선택

DOM 코드는

var lis = document.getElementsByClassName(‘active’);

이다. 이처럼 class명이 active인 요소를 선택할 때는

$(‘.active’).css(…)

로 해준다.

id 선택

DOM코드

var lis = document.getElementsById(‘active’);

는

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

처럼 선택 후, 색은 붉게, 밑줄을 그어 준다. 

여기서 $(..).css(..)를 실행하면 .css(..)도 메쏘드이고 리턴 값이 있을 것이다. 이 리턴 값은 또 객체이다. 

따라서 계속해서 .css(..)로 객체 메쏘드를 연속 호출해 주었다. 이를 chaining이라 부른다.

참고

[1] 생활코딩, 제어 대상을 찾기(jQuery)