<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자사용</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function() {
$('#list1-1').parent().css('background','pink').css('opacity','0.6');
// ★parent()(parent 메서드) 는 부모 요소를 선택한다. , #list1-1의 부모는 li 이다. (스타일시트의 한계점을 )
// 자바스크립트와 제이쿼리는 자료형(int, double, char, boolean/String:데이터형과 저장소의 크기를 지정)이 없다.
// 따라서 변수에 들어가는 값에 의해서 자료형이 결정된다. var value = '문자열';
$('#list1-1 li').css('background','green').css('opacity','1'); //css의 선택자를 사용하여 후손 요소를 선택했다.
//#list1 의 모든 자식 요소에 글자 색상을 #36F 로 변경
$('#list1 li').children().css('color','#36F').css('color','white');
//list2 선택해보기 , 배경 #FFF222 설정
$('#list1 > li:nth-child(2)').css('background','#FFF222').css('opacity','0.5');
//list3 에 배경 #03F 설정
$('#list1 > li:last-child').css('background','#03f').css('opacity','0.2');
$('ul li').css('list-style','none');
});
</script>
</head>
<body>
<!-- 계층 구조일 경우 -->
<!-- 태그는 웹 컨텐츠()UI 요소)를 저장할 때 사용 -->
<!-- h1 태그는 타이틀(제목)을 저장할 때 사용 -->
<h1>인접 관계 선택자 : 자식 선택자, 후손(하위) 선택자</h1>
<!-- ul 태그는 메뉴,목록(list)을 저장할 때 사용 -->
<ul id="list1"> <!--손자와 이름 같아 id 속성을 지정해줌-->
<li> <!--ul 요소의 자식--> <!--li는 많기 때문에 구조 선택자를 쓴다.-->
list1
<ul id="list1-1"> <!--ul 요소의 손자-->
<li>list1-1</li>
<li>list1-2</li>
</ul>
</li>
<li>list2</li> <!--ul 요소의 자식-->
<li>list3</li> <!--ul 요소의 자식-->
</ul>
</body>
</html>
<!--
!!제이쿼리의 시작!!
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function() {
});
</script>
-->