(JQUERY) 기본 선택자 조합

상황에 따라 기본선택자를 조합해서 사용하여야 하는경우 가 존재한다

 

class가 겹치는 태그를 선택하면 태그이름과 속성을 조합하여 선택해야한다.

 

<div class="test1"></div>
<div class="test2"></div>
<a class="test1"></a>
<a class="test3"></a>

위 태그와같이 test1이 겹치는경우 선택자 조합을 사용한다

 

 

기본선택자 조합

 

선택자 1 , 선택자2 : 동시에 태그를 선택

 

	$("div, p").css("background-color": "yellow");
	$("#test1, #test2").css("color": "white");

선택자1 > 선택자2 : 태그의 하위객체를 선택

$(function() {
	$("#i1 > p").css("background-color","red");
	
	

id가 i1인 태그안의 자식인 p 태그에 css 속성을부여

 

선택자1 선택자2

 $(function() {
		$("#i1 p").css("background-color","red");

	
});

id가 i1인 태그안의 p 전체에 css 속성을 부여

 

 

 

선택자1선택자2

 $(function() {
		$("div.i1").css("background-color","red");

	
});

div 태그중에 아이디가 i1 인 것만 css 설정(class가 겹치는경우 사용)

 

선택자1+선택자2

위처럼 id가 a1인 태그의 기준으로 선택자 2로이동한다

$(function() {
	$("#a1 + p").css("color","red");
});

 

선택자1~선택자2

$(function() {
	$("#a1 ~ p").css("color","red");
});