jQuery 선택자 (selector) 총 정리 (1) id, class, name, attribute (속성)

예제 HTML 소스

<div>
	<h3>Selector (1)</h3>
	<ul>
		<li>전체 선택자 : *</li>
		<li>태그 선택자 : 태그명</li>
		<li id="id_01">아이디 선택자 : #아이디명</li>
		<li class="class_01">클래스 선택자 : .클래스명</li>
		<li modify="yes">속성 선택자 : 요소[속성]</li>
	</ul>
</div>

 

위의 HTML 소스를 이용하여 jQuery로 특정 요소를 선택해 css를 입혀보겠습니다.

// jQuery css 메소드의 기본 형태
$(selector).css();

 

1. 전체 선택자 : *

$("*")

 

예제

$(document).ready(function(){
	$("*").css("color", "red");
});

결과

전체 요소에 css가 적용되는 것을 볼 수 있다.

 

2. id 선택자 : #아이디명

$("#id_01")

예제

$(document).ready(function(){
   $('#id_01').css('color', '#ff0000');
});

결과

3. class 선택자 : .클래스명

$(".class_01")

예제

$(document).ready(function(){
   $('.class_01').css('color', '#0000ff');
});

결과

4. 속성 선택자 : 요소[속성]

$('[modify=yes]').css('color', '#ffff00');
// modify 속성이 yes인 요소

html 태그에 임의로 속성을 추가해줄 수 있다.

속성으로 요소를 선택하려면 이런식으로 쓰면 된다.

 

다른 예로, name이 radio01인 input 태그를 선택하고 싶으면

$("input[name='radio01']") 혹은

$("[name='radio01']") 으로 표현할 수 있다.

 

 

• modify=yes: modify가 yes인 요소
• modify!=kr-ko : modify속성이 kr 또는 ko인 요소
• modify~=123 : modify가 123인 단어가 있는 요소
• modify^=123 : modify가 123으로 시작하는 요소
• modify$=123 : modify가 123으로 끝나는 요소
• modify*=123 : modify에 123이 포함되어 있는 요소