JQuery 기본 문법과 구성요소(선택자)

JQuery 는 HTML요소에 특정 동작을 수행하도록 하는데에 사용

기본 문법은 다음과 같은 형식을 가진다.

 

$(선택자).액션()

 

$: JQuery객체 접근자

(선택자) : HTML요소의 이름, 타입, 클래스, 아이디 등을 선택

액션 : 클릭, 키, 포커드 등의 이벤트

 

위의 요소들을 하나씩 확인해 보도록 한다.

 

선택자

 

선택자는 HTML요소를 선택하는 역할을 한다.

속성은 CSS선택자를 지원

$로 시작하는 선택자는 괄호가 필요 (ex. $() )

 

요소 선택자(Element selector)

이름을 사용하여 요소를 선택

예)

<p>태그를 선택한다면 인자로 요소의 이름을 전달

$("p")

위와 같이 사용하며 해당 요소를 반환한다.

 

아이디 선택자(ID selector)

아이디를 사용하여 요소를 선택

예)

ID가 text인 요소를 선택한다면 인자로 요소의 ID를 #을 붙여 전달

$("#text")

위와 같이 사용하며 해당 요소를 반환한다.

 

클래스 선택자(Class selector)

클래스명을 사용하여 요소를 선택

예)

class이름이 sample로 지정된 요소를 선택한다면 요소의 Class명을 .을 붙여 전달

$(".sample")

위와 같이 사용하며 해당 요소를 반환한다.

 

 

선택자를 이용하여 HTML요소를 선택하고

선택한 요소에 대해 적절하게 동작할 스크립트를 작성할 수 있다.