<!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>선택자사용.html</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('#list1-1').parent().css('background','#FC0').css('opacity','0.8');
//parent( )는 부모요소를 선택한다.
//자바스크립트와 제이쿼리는 자료형(int,double,char,boolean.String : 데이터형과 저장소의 크기를 지정)이 없다. 따라서, 변수에 들어가는 값에 의해서 자료형이 결정된다.
//cs의 선택자를 사용하여 후손 요소를선택했다.
$('#list1-1 li').css('background','green');
$('#list1 li').css('color','#36F');
$('#list1 >li:nth-child(2)').css('background','#FFF222').css('opacity','0.5');
$('#list1 >li:last-child').css('background','#03F').css('opacity','0.2');
});
</script>
</head>
<body>
<!--태그는 웹 콘텐츠(UI 요소)를 저장할 때 사용한다.-->
<!--h1~h6태그는 어떤웹 콘텐츠(UI 요소)를 저장할 떄 사용하는가? 타이틀(제목)-->
<h1>인접관계선택자 : 자식 선택자, 후손(하위) 선택자</h1>
<ul id="list1"> <!--목록(항목)태그는 어떤 웹 콘텐츠(UI 요소)를 저장할 떄 사용하는가? 매뉴, 목록(list))-->
<li><!--li는 너무 많아서 따로 이름을 지정하지 않고 구조선택자를 사용한다-->
list1
<ul id="list1-1">
<li>list1-1</li>
<li>list1-2</li>
</ul>
</li>
<li>list2</li>
<li>list3</li>
</ul>
</body>
</html>
결과
'jQuery' 카테고리의 다른 글
| 선택자사용 : 인접관계선택자(자식 선택자, 후손(하위)선택자) (0) | 2022.10.26 |
|---|---|
| 선택자사용 : 기본선택자, 그룹선택자 ,종속선택자. (0) | 2022.10.26 |
| jQuery 시작 (0) | 2022.10.26 |