<!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(){
			$('button:last').click(function(){					   
				// 사용자가 입력한 값을 가져와라					   
				id =$('.id:text').val(); 
				if(id.trim()==""){ alert('id가 없음');} 
				$('div').html(id);	
				
				pw =$('.pw:password').val(); 
				pw2 =$('.pw2:password').val();
				if(pw!=pw2){  alert('비번이 다름'); }
			});			
			
			// id 입력할때 : 키보드를 눌렀다가 떼는 순간 호출
			$('.id:text').keyup(function(){
				$('div').html( $(this).val() );					 
			});			
			
			// filter    div중에서 class=line 인것만 가져와라
			$('button:first').click(function(){
				$('div').filter('.line')
						.css('width','100px'); 
			});
			// filter의 반대 not :  div중에서 class=line 이 아닌것만
			$('button:eq(1)').click(function(){
				$('div').not('.line').css('height', '100px');								 			});
			//slice(시작, 끝) : 2이상 4 미만 
			$('button:eq(2)').click(function(){
				$('div').slice(2,4).css(
					{ backgroundColor:'yellow', margin: '2px'}); 								 			});
			//slice(시작) : 3이상
			$('button:eq(3)').click(function(){
				$('div').slice(3).css(
					{ backgroundColor:'brown', margin: '2px'}); 								 			});
			//children() : 자식 찾기
			$('button:eq(4)').click(function(){   
				$('div').children().addClass("box");
			});
			
			//contents( 내용 탐색 및 바꾸기)
			$('button:eq(5)').click(function(){  
				// div 의 내용을 찾아서 'span'을 지워라			 
				$('div').contents().remove('span');
			});
			
			//next () 다음에 나온 형제 Element 찾기
			$('button:eq(6)').click(function(){ 
				$('div:eq(2)').next().addClass('box');
 			});
			//next () 다음에 나온 class=line 인 형제 Element 찾기
			$('button:eq(7)').click(function(){ 
				$('div:eq(0)').next('.line').addClass('box');
 			});
			//nextAll()  이후의 형제를 모두 찾아라
			$('button:eq(8)').click(function(){ 
				$('div:eq(0)').nextAll().addClass('box');
 			});
			//prev () 이전에 나온 형제 Element 찾기
			$('button:eq(9)').click(function(){ 
				$('div:eq(2)').prev().addClass('box');
 			});
			//prev () 이전에 나온 class=line 인 형제 Element 찾기
			$('button:eq(10)').click(function(){ 
				$('div:eq(4)').prev('.line').addClass('box');
 			});
			//prevAll()  이전의 형제를 모두 찾아라
			$('button:eq(11)').click(function(){ 
				$('div:eq(4)').prevAll().addClass('box');
 			});
			
			var parents = new Array(); //배열 생성
			
			//parents 조상을 모두 찾아라 body, html 까지 찾는다. 
			// 조상 : 0:div, 1:body, 2:html <- this로 참조한다.
			$('button:eq(12)').click(function(){ 
				$('span:first').parents().addClass('box')
					.each(function(index){
						parents[index]=this.tagName;			   
				});		
				//alert(parents);	
				// 마지막 div에 차일드를 추가해라 
				// parents=["DIV", "BODY", "HTML"]; join(붙이기)
				$('div:last').append(parents.join(","));
				
 			});
			//parent 부모를 찾아라 
			$('button:eq(13)').click(function(){ 
				$('span:first').parent().addClass('box');   
 			});
			$('button:eq(14)').click(function(){ 
				$('body').find('.line').addClass('box');   							  				//$('body .line') 와 같다
				//$('line' , 'body') 와 같다. 
				
				$('div').css("font-size","2em")  //em 기본끌꼴크기 =1
					.find('.line').css("font-size","3em");				
			});
			//map() 객체를 만든다. 
			$('button:eq(15)').click(function(){ 
				$('p').append(							  
					$('ul li').map(function(){
						return $(this).text();						 
						}
					).get().join(",")						
				)
			});
			//andSelf();
			$('button:eq(16)').click(function(){ 
				// ul찾고 그 아래의 li를 찾고 box 클래스추가
				// li 3개 + ul에  linebox 클래스 추가 
				
				$('ul').find('li').addClass("box")
					   .andSelf().addClass("linebox");
			});
			
			//end();
			$('button:eq(17)').click(function(){ 
				// ul찾고 그 아래의 li를 찾고 box 클래스추가
				// method chainging
				//  ul에만  linebox 클래스 추가 
				$('ul').find('li').addClass("linebox")
					   .end().addClass("box");
			});
		});  
	</script> 
    <style>
		.linebox{ border:2px solid black; }
		.box{ background-color:#09F; width:70px; height:70px; 
			  margin:2px; 
			  border:2px solid black;
			  } 
		div{ background-color:#69F; width:50px; height:50px; 
			 float:left; margin:1px; }
		br { clear:both; } <!-- clear: 그전의 float 속성 캔슬 -->
	</style>  
</head>
<body>
	<div> </div>
    <div class="line"> </div>
    <div > </div>
    <div class="line">
    	<span>1</span><span>2</span><br />
	</div>
    <div>
    	<span>3</span><span>4</span>
    </div>
    <br/>
    <button> filter() </button>
    <button> not() </button>
    <button> slice(begin, end) </button>
    <button> slice(begin) </button>
    <button> children() </button>
    <button> contents() </button>
  	<button> next() </button>
    <button> next(이름)</button>
    <button> nextAll()</button>
    <button> prev() </button>    
    <button> prev(파라미터) </button>  
    <button> prevAll() </button> 
    <button> parents() </button>  
    <button> parent() </button>
    <button> find() </button>  
    <button> map() </button>
    <button> andSelf() </button>
    <button> end() </button>
    <br/>    
	<input type="text" name="id" size="10" class="id"
    	placeholder="id를 입력하세요" />
    <input type="password" name="pw" size="10" class="pw"
    	placeholder="pw를 입력하세요" />
    <input type="password" name="pw2" size="10" class="pw2"
    	placeholder="pw를 입력하세요" />
    <button > 보내기 </button><br/>
    <ul>
    	<li> 첫번째 </li><li> 두번째 </li><li> 세번째 </li>
    </ul>
    <p>  </p>
    
</body>
</html>







'JavaScript > JQuery' 카테고리의 다른 글

jquery 여러가지 method2  (0) 2012.06.18
jquery 여러가지 method  (0) 2012.06.18
jquery - 복습  (0) 2012.06.18
jquery - currentClass  (0) 2012.06.15
jquery - image toggle  (0) 2012.06.15

+ Recent posts