[jQuery] selector(선택자) 란 / selector 예제

[jQuery] selector(선택자) 란 / selector 예제

selector (선택자) 란

- jQuery의 selector는 DOM의 요소들의 집합에 쉽게 접근할 수 있도록 제공하는 기술입니다.

  선택자를 사용해 요소를 먼저 선택해 오고, 선택한 요소에 스타일(CSS) 또는 속성(Attribute)을 적용할 메서드(Method)를 작성

jQuery 선택자에는

직접 선택자

인접 선택자

- 이미 선택한 요소를 기준으로 근접한 요소의 관계를 따져 선택함.

탐색 선택자

- 선택된 요소 중 더 세밀하게 선택할 수 있는 선택자

<input id=”test” type=”text” name=”test_name” value=”test” />

라는 html이 있다고 가정 합니다.

기존 javascript에서는 

document.getElementById(“test”);

위와 같은 문법으로 input 태그에 접근이 가능했지만,

jQuery의 selector를 이용하면 쉽고 다양한 방법을 이용하여 input 태그를 접근할 수 있습니다.

예를 들면 input 태그의 요소중 id를 통해 접근 하는 방법은 

$(“input#test”);

 또는

 $(“input [id=test]”);

와 같은 문법으로 input 태그를 접근할 수 있습니다. 

위에서 파란색 부분으로 색칠한 부분은 명시해도 되고 안해도 되는 부분 입니다.

이외 방법은 type=”text”라는 요소를 가지고 하는 방법은 

$(“input:text”); 

또는 

$(“input [type=text]”);

와 같은 문법도 가능 합니다.

selector의 방법은 너무나 다양하기 때문에 여러가지 방법을 익혀두면 코딩할 때 편하게 코딩할 수 있습니다.

selector의 방법은 아래 표에서 확인할 수 있습니다.

 위의 표는 jQuery에서 사용할 수 있는 selector를 나열한 표입니다.

 

 표 중에 바탕색이 하늘색인 것은 자주 사용되는 selector이므로 숙지하셔야 됩니다.