<!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>
<script>
$(document).ready(function(){
//0. 선택자.메서드(파라미터);
// 선택자.메서드(선택자.메서드(파라미터););
//1. 선택자 sellector
$('div')
$('.a') //클래스 선택자
$('#b') // 아이디
$('#b i') // #b 밑의 i를 모두(
$('div.a') //div면서 class=a 인것 $('div > a') //div의 자식 a 만
$('div + span') //div의 형제 span만
$('i + a')
$('div:first') //div중 첫번째 나온것
$('div:last') //모든 div 중 마지먹 것
$('div:first-child') //div의 child 중 첫번째 나온것
$('div:last-child') //모든 의 child 중 마지먹 것
$('div:odd') // 홀수번째 div
$('div:even') // 짝수번째 div
$('div:eq(3)') // div중 3번째 것 equal
$('div:lt(3)') // div중 3번째 미만의 것들
$('div:gt(3)') // div중 3번째 이상의 것들
$('div:nth-child(3)') // div중 3번째 자식
$('div:nth-child(3n)') // div중 3배수 자식
$('div:nth-child(even)') // div중 짝수번 자식
$('div:nth-child(odd)') // div중 홀수번 자식
$('div:not( nth-child(odd) )') // 반대의 것만
$('div[name]') // div중 name이라는 attribute가 존재하면
$('div[name="age"]') // div중 name=age이면
$('div[name^="age"]') // div중 name=age로 시작
$('div[name$="age"]') // div중 name=age로 끝나면
$('div[name*="age"]') // div중 name=age로 포함하면
$('img').attr('src'); //img의 src속성의 value를 리턴
$('img').attr('src','A.JPG'); //img의 src속성값 셋팅
$('img').attr('src','A.JPG') // return html elements
.attr('class','small'); //img의 src속성값 셋팅
$('img').attr({src:'A.JPG', class:'small' } );
$('img').attr('src', function(){ 'A.JPG'} );
$('img').removeAttr('src'); //src 속성을 지워라
$('img').removeClass('small'); //class='small'을 지워라
$('img').addClass(function(){'small'});
$('img').addClass(function(index){'small'});
$('img').addClass(function(index,className){'small'});
// class='small' 없으면 붙이고, 있으면 지워라
$('img').toggleClass(function(index){'small'});
//클래스가 있는 확인해서 true/false
$('img').hasClass(function(index){'small'});
// return <b> <i> 안녕 </i> <b> 진하게 이태릭체로 표현
$('div').html(); // 태그의 텍스트를 포함한 자식 리턴
// 결과 : 안녕
// return '<b> <i> 안녕 </i> <b>'
$('div').text(); // 태그의 텍스트로 리턴
//결과 <b> <i> 안녕 </i> <b>
//글씨가 커지지않음 <h1> 글자 그대로 표현
$('div').text(' <h1>안녕하세요</h1>');
// h1이 적용되어서 표현
$('div').html('<h1>안녕하세요</h1>');
$('button').click(function(){}); //누르기+떼기
$('button').moveover(function(){});
$('button').moveleave(function(){});
$('button').movedown(function(){}); // 마우스 누르기
$('button').moveup(function(){}); // 마우스 떼기기
$('button').toggle( 펑션1, 펑션2); //번갈아 가면 실행
선택자.hide();
선택자.show();
선택자.hide(1000);
선택자.show(1000);
선택자.hide(1000, function(){}); //1초 후에 펑션 실행
선택자.show(1000, function(){});
});
</script>
</head>
<body>
<button> </button>
<input type="button" />
<div> 안녕 </div>
<div> <b> <i> 안녕 </i> <b> </div>
<img />
<div class='a' name="age" size="10"> </div>
<span class="a"> </span>
<div id='b' >
<i> b의 아들
<a> </a>
</i>
<a> </a>
</div>
</body>
</html>
