[Jquery 강좌/강의/스터디]4. jQuery(제이쿼리) Selector 선택자

[Jquery 강좌/강의/스터디]4. jQuery(제이쿼리) Selector 선택자

 

 

jQuery 셀렉터는 jQuery를 진행하는데 있어서 가장가장 엄청 중요한 부분입니다.

jQuery selector는 HTML 요소를 선택하고, 여러가지로 컨트롤하고 다룰수 있게 합니다.

 

html 의 속성(attributes), css의 클래스명(class), 또는 일부 jQuery에서 제공하는 옵션으로 선택할수 있고, 선택한 후에 컨트롤 할 수 있습니다.

 

$("p")

 

일단 jQuery selector 구문은 "$()."입니다.

 

 

태그이름으로 jQuery selector를 할 수 있습니다.

아래와 같이요.

 

$("#test")

 

 

예제)

사용자가 버튼을 클릭하면, <p>태그를 숨기는 소스는 아래와 같습니다.

 

태그의 id 로 jQuery selector를 할 수 있습니다.

태그의 속성(attributes)에는 id가 있습니다.

id는 풍기는 느낌과 같이 해당 html 문서내에 고유한 명칭이어야 합니다.

#아이디는 아래와 같이 작성합니다.

 

 

예제)

사용자가 버튼을 클릭하면, <p>태그에 아이디값이 test인 태그를 숨기는 소스는 아래와 같습니다.

 

 

태그의 class명으로 jQuery selector를 할 수 있습니다.

태그의 속성(attributes)에는 class를 정의할 수 있습니다.

클래스(class)는 css에서 클래스를 정의하여 별칭과 같이 사용하여 css의 구문들을 간단하게 적용하는데 쓰입니다. 이부분은 나중에 자세히 설명을 하도록 하구요. 

.클래스는 아래와 같이 작성합니다.

 

 

$(".test")

 

예제)

사용자가 버튼을 클릭하면, <p>태그에 .test라는 클래스명으로 정의된 태그를 숨기는 소스는 아래와 같습니다.

 

 

이것 이외에 좀 더 많은 Selector들이 있습니다. 아래의 테이블표를 참고하세용.

 

구문	설명	Example
$("*")	모든 태그요소 선택	예제보기
$(this)	현재 태그를 선택	예제보기
$("p.intro")	p태그 중 class="intro"로 속성정의된 모든 p태그 선택	예제보기
$("p:first")	첫번째 p 태그 선택	예제보기
$("ul li:first")	첫번째 ul태그의 첫번째 li태그 선택	예제보기
$("ul li:first-child")	모든 ul태그의 첫번째 li태그 선택	예제보기
$("[href]")	모든 href 속성을 가진 태그선택	예제보기
$("a[target='_blank']")	a 태그에 href 속성 중 target 속성이 _blank 인 선택	예제보기
$("a[target!='_blank']")	a 태그에 href 속성 중 target 속성이 _blank 가 아닌것을 선택	예제보기
$(":button")	모든 button 태그나 input 태그중 type이 button 인것 선택	예제보기
$("tr:even")	tr 태그중에 짝수인 것 선택	예제보기
$("tr:odd")	tr 태그중에 홀수인 것 선택	예제보기