Jquery - 직접 선택자

 

 

*id, class 선택자

// id 선택자

$(function(){
	$("#id").css("속성", "값");
});



// class 선택자

$(function(){
	$(".class").css("속성", "값");
});

 

 

*요소명 선택자(Tag Name)

// 요소명 (Tag Name)

$(function(){
	$("요소명").css("속성", "값");
});


ex)
$("h1").css("color", "red");


h1요소의 글자가 빨간색으로 바뀜

 

 

*그룹 선택자

// 그룹 선택자

$(function(){
    $("요소1, 요소2, 요소3").css("속성명", "값");
});


ex)
$(function(){
     $("#tit, h3").css("background-color", "blue")
     .css("border", "2px solid red").css("color", "green");
 });
 
 
 id명 tit와 h3 요소의 배경색을 파란색 그리고 테두리에 2픽셀의 빨간색 솔리드 선이 그려지고
 글자는 녹색으로 바뀐다.

 

 

*종속 선택자

// 종속 선택자

$(function(){
    $("요소명.id 또는 class ).css("속성명", "값");
});


ex)
html에
<h1 class="tit">일번</h1>
<h2>이번</h2>
<h3 class="tit">삼번</h1>

클래스명이 같은게 있을때 요소명을 지정해서 그에 해당하는 id나 class명을 가진 것을 선택

$(function(){
    $("h1.tit).css("color", "red");
});

클래스명 tit를 가진 h1 의 글자색이 빨간색으로 바뀜