까딱이의 춤과 IT

이번에는 셀렉터에 대해 알아보도록 하자.

셀렉터는 해당 요소를 선택하기 위한 선택자이다. 정규식처럼 약속된 구문에 의해 해당하는 요소를 선택하여 반환해 준다.

제이쿼리의 셀렉터는 멀티브라우저 오픈 소스 셀렉터 엔진인 시즐(Sizzle)을 사용하고 있다.

기본적으로 css 의 셀렉터를 생각하면 된다.

기본 흐름은 다음과 같다.

셀렉터의 검색엔진을 통해 해당 요소를 검색하고 jquery 구문의 action 이 실행된다. 검색된 요소가 없다면 aciton 이 실행되지 않는다. 

가장 많이 사용하는 기본 셀렉터는 다음과 같다.

• 태그이름
• # + id 이름
• . + 클래스이름

셀렉터 예시

아래의 창에서 간단히 확인이 가능하다.

좌측의 셀렉터를 클릭하면 해당하는 태그들이 선택이 된다.

지난 강습에는 jquery 의 기본 설정 및 로딩 이벤트를 바인딩하는 법에 대해 간단히 다루었다.

이번에는 클릭이벤트를 다는 법~에 대해 간단히 다루어 보도록 하겠다.

jquery 기본 syntax>

$(셀렉터).action()

지난 시간 이 구문도 같은 원리이다. document 가 로드되어 dom 을 사용할수 있게 되었을때 function 안에 구문이 동작하라는 의미이다.

click event syntax>

$(셀렉터).click(실행될 function) 

위와 같은 방식으로 클릭 이벤트를 해당 객체에 바인딩할 수 있다.

단~ 지난번 내용인 로딩 이벤트 안 또는 다른 이벤트 실행 이후에 바인딩해야 한다.

이유는 스크립트는 컴파일이 미리 되어있지 않은 언어이기 때문에 순차적으로 실행한다.

로딩 이벤트에 처리 안했다면 다음과 같은 상황이 된다.

코드로는 다음과 같다.

방법 A.

방법 B.

방법 A 의 경우에는 script 동작 시점에 버튼을 찾지 못했기 때문에 바인딩할 요소가 없어서 이벤트가 바인딩 되지 않는다.

방법 B 의 경우는 button 객체 생성이후이기 때문에 바인딩이 된다.

이러한 차이가 없이 프로그래밍하기 위해서는 로딩완료 시점에 바인딩을 해주면 된다.

여기서 또 하나~!

버튼을 선택하기 위해서 #clickBtn 을 사용하였는데 이를 셀렉터라고 한다.

우선 이번에는 간단히 이야기하자면

# 을 붙이면 id 를 가르킨다.

즉 clickBtn 이라는 id 를 가진 요소에 이벤트를 달았다고 생각하면 된다.

다음 장에서는 셀렉터에 대해 이야기 하도록 해보자.