[jQuery입문] 기본 - 셀렉터 "$()"

아주 기본 중에 기본인데, 이미 자바스크립트로 개발을 해본 유저라면 셀렉터 라는 말이 생소하다.

(물론 나만 그럴 수도 있겠다.)

 

정말로 간단하게 셀렉터라는 말은

$(....)

를 말한다.

 

이는 HTML 내의 Element를 객체화 하는 것이다.

(내가 이런 말을 쓸 줄이야... 나름 유식해 진 것 같다.)

 

jQuery와 친해지려면 일단 셀렉터가 기본이니 눈에 익도록 해 보자!

 

그리고 id값을 가진 Element를 객체화 하려면,

"#"을 사용하면 된다.

 

 

Layer내 내용

 

$( ) = 셀렉터(selector)

 

ID 셀렉터 : #idValue

--> 하나만 사용되는 셀렉터이고, 여러개에 동시에는 적용 안되는 단점이 있음

--> ex) $('#ID')

 

타입 셀렉터 : element

--> 특정 HTML 태그를 전체 선택

--> ex) $('div')

 

클래스 셀렉터 : .className

--> 여러개를 선택이 가능한 셀렉터

--> ex) $('.className')

 

============================================================================================

Content1
Content2
Content3
Content4

이 있을 때 아래와 같이 조합이 가능하다.

 

 

ㅇ 타입 셀렉터 + ID 셀렉터

$('div#id1').css('background','red');

 

ㅇ ID 셀렉터 + 클래스 셀렉터

$('#id1.cls1').css('background','red');

 

ㅇ 타입 셀렉터 + ID 셀렉터 + 클래스 셀렉터

$('div#id1.cls1').css('background','yellow');

 

============================================================================================

 

자손 셀렉터 : ancestor descendant

--> 태그 안에 태그를 선택할 때 사용

--> ex) $('p strong')

 

 

전체 셀렉터 : *

자식 셀렉터 : parent > child

인접 형제 셀렉터 : prev + next

복수 셀렉터 : selector, selector

부정 셀렉터 : :not(selector)

속성 셀렉터 : [name="value"]

순서에 관한 셀렉터 : :nth-child()

상태에 관한 셀렉터 : :checked

폼에 관한 셀렉터 : :text