jQuery - Selector jQuery

HTML 안에 존재하는 수 많은 태그 중에서 컨트롤(데이터를 수정하거나, Display, CSS를 변경하는 행위 들)하기 위한 Tag를 선택하는 것.

Selector(셀렉터)의 기본 구문.

$(function(){

$("셀렉터").jQuery명령어

});

 

1. 태그 셀렉터

  html 안에 존재하는 tag를 선택

ex)

$(function(){

$("li").css("color","red"); // css는 jquery에서 제공하는 문법같은 것임. 즉 규칙이니 외워야함.

});

      -> html 안에 있는 모든 li 태그의 color 값을 red로 변경하라는 의미.

 

2. ID 셀렉터

html에 존재하는 tag에는 id를 지정할 수 있는데 그 id를 이용하여 선택

ex)

$(function(){

$("#first").css("color","red"); 

});

      -> html 안에 있는 tag 중에 id가 'first' 인 모든 태그의 color 값을 red로 변경하라는 의미.

 

ex2) 태그 셀렉터 + ID 셀렉터

$(function(){

$("li#first").css("color","red"); 

});

      -> html 안에 있는 li tag 중에 id가 'first' 인 태그의 color 값을 red로 변경하라는 의미.

3. 클래스 셀렉터

html에 존재하는 tag에 있는 class 속성을 가진 태그를 대상으로 선택.

ex)

$(function(){

$(".first").css("color","red"); 

});

      -> html 안에 있는 tag 중에 class가 'first' 인 모든 태그의 color 값을 red로 변경하라는 의미.

ex2) 태그 셀렉터 + 클래스 셀렉터

$(function(){

$("li.first").css("color","red"); 

});

      -> html 안에 있는 모든 li 태그 중에 class 속성 값이 first 인 태그의 color 값을 red로 변경하라는 의미.

 

주로 사용되는 셀렉터는 위에 세개 이고 이외에도

자손 셀렉터, 그룹 셀렉터, 유니버셜 셀렉터가 존재한다.

 

셀렉터의 사용은  html를 컨트롤 하기 위한 가장 기본적인 행위이다. 


덧글

댓글 입력 영역