<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
<script src="./jquery-1.7.2.min.js">
</script>
<style>
*{ font-size:20px;}
.red{ color:red; }
.blue{ color: blue; }
ol{list-style-type:circle;}
.border1{border:1px solid black; }
.border2{border:1px dotted black; }
</style>
<script>
<!-- 대상(객체).메서드(파라미터)-->
$(document).ready(function(){
/* $(".red") 클래스가 red인 엘리먼트를 모두 찾아라
찾아서 css 속성 (attribute , value) */
$(".red").css("font-size","30px"); //setter역활
fontSize=$(".red").css("font-size"); //getter역활
$(".red").html(fontSize);
// $('#yellow') 아이디가 yellow인 객체를 모두 찾아 배열로 리턴
// class=yellow인 엘리먼트의 컬러를 $('#yellow')에 찍어라
$('#yellow').html( $('#yellow').css("color") );
//class=yellow인 엘리먼트의 css속성중 color를 green으로
$('#yellow').css("color","green");
// class=yellow인 엘리먼트에 text 를 넣어라.
$('#yellow').html(
//class=yellow인 엘리먼트의 내용
// class=yellow인 엘리먼트의 css속성중 color의 값
$('#yellow').html() + $('#yellow').css("color")
);
// ol엘리먼트를 모두 찾아서 그것의 css속성 중
// list-style-type : none ;
$('ol').css("list-style-type" , "none");
$('li').css("display", "inline");
console.log("로그를 찍자" ) ;
console.log("li의 display value는? "
+ $('li').css("display") );
console.log("$가 뭐니? " + $ );
console.log("$(document)가 뭐니? " + $(document) );
// 모든 p 엘리먼트에 class="red" 를 더합니다.
// <p> -> <p class="red">
$('p').addClass('red');
// <span class="red"> -> <span>
$('span').removeClass('red');
// b의 아래쪽(하위) 엘리먼트들
$('b div').addClass('red');
// b의 자식만 , 손주는 아닙니다.
$('b > div').addClass('blue');
// b span div 과 형제인 div를 찾아라
$('b span div + div').css('color', 'green');
$('li:first').css('backgroundColor','yellow');
$('li:last').css('backgroundColor','yellow');
$('ol :first-child').css('font-size','30px');
$('ol :last-child').css('font-size','70px');
// 3번째 차일드
$('ol : nth-child(3)').css('color','blue');
// 3의 배수에 해당하는 차일드
$('ol : nth-child(3n)').css('color','blue');
// 짝수 번째 차일드
$('ol :nth-child(even)').addClass('border1');
// 홀수 번째 차일드
$('ol :nth-child(odd)').addClass('border2');
// $('ol :even') 짝수번째 ol
// $('ol :odd') 홀수번째 ol
} );
</script>
</head>
<body>
<ol><li> 안 </li>
<li> 녕 </li>
<li> 하 </li>
<li> 세 </li>
<li> 요 </li>
<li> ~~ </li>
</ol>
<span class="red"> red </span>
<span class="blue"> blue</span>
<span id="yellow"> yellow </span>
<b> paragraph 단락 display:block 성격 Fill_Parent
line breaker
<div>
p의 첫번째 자식
</div>
<div>
p의 두번째 자식
</div>
<span>
<div>
p의 첫번째 손주
</div>
<div>
p의 두번째 손주 / p의 첫번째 손주와 sibling(형제자매)
</div>
<div>
p의 세번째 손주 / p의 첫번째 손주와 sibling(형제자매)
</div>
</span>
</b>
</body>
</html>
