<!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>AJAX Asyncronized Javascript And Xml </title>
<script src="./jquery-1.7.2.min.js"> 		
    </script>
    <script>
		$(document).ready(function(){
			$('button:eq(1)').click(function(){
				$('div').load('jquery14.html');	 
			});
			
			$('button:eq(2)').click(function(){
				$.ajax({url:'jquery13.html' ,
					   dataType:'html', 
					   success:function(data){
						   
						$('div').html(data);		   
				}});
				return false;
			});
			// 전체 페이지가 아니라 일부만 가져오고 싶을 때
			$('button:eq(3)').click(function(){
				$.ajax({url:'jquery13.html' ,
					   dataType:'html', 
					   success:function(data){
						   
						$('div').html($(data).find('table'));		   
				}});
				return false;
			});
		});
	</script>
<script type="text/javascript">
function loadXMLDoc()
{
	
var xmlhttp;  //변수 선언
if (window.XMLHttpRequest)  // 존재한다면 최신 브라우저에서 지원
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  }
  
xmlhttp.onreadystatechange=function()
  {
	  alert("readyState"+xmlhttp.readyState);
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
		
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  
xmlhttp.open("GET","http://gusfree.tistory.com",true); 
xmlhttp.send();  
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
<button> jquery로 ajax </button>
<button> jquery로 ajax 2</button>
</body>
</html>

chrome에서 구현 되지 않아서 explorer에서 구동~~



저작자표시 비영리

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

jquery - animation 효과  (0) 2012.06.19
jquery 여러가지 method2  (0) 2012.06.18
jquery 여러가지 method  (0) 2012.06.18
jquery - selector  (0) 2012.06.18
jquery - 복습  (0) 2012.06.18 
<!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(){
			//         < 3   &lt;
			$('button:lt(3)').click(function(){
				$(this).prev().show(1000, function(){
					$(this).addClass('yellow');							   
				});
				// 대상.before(내용) , 대상앞에 내용을 추가해라 
			});		
			$('button:eq(3)').click(function(){
				$('h1')	.hide(500, function(){});						 
			});
			
			$('button:eq(4)').click(function(){
				// 보였다가 숨겼다가 
				$('h1').toggle(1000, function(){}); 
			});
			
			// fast : 200, normal : 400, slow: 600
			$('button:eq(5)').click(function(){				
				$('img').slideUp('normal', function(){}); 
			});
			
			$('button:eq(6)').click(function(){				
				$('img').slideDown('fast', function(){}); 
			});
			
			$('button:eq(7)').click(function(){				
				$('img').slideToggle('slow', function(){}); 
			});
			$('button:eq(8)').click(function(){				
				$('img').fadeIn('normal', function(){}); 
			});
			
			$('button:eq(9)').click(function(){				
				$('img').fadeOut('fast', function(){}); 
			});
			
			$('button:eq(10)').click(function(){				
				$('img').fadeToggle('slow', function(){}); 
			});
			
			$('.opac').change(function(){ 
			   $('img').fadeTo('fast', $(this).val() ,function(){});				   			});
			
			$('#leftButton').click(function(){				
				$('#img1').animate({marginLeft : -200}, 20);	
			});
			
			$('#rightButton').click(function(){
				$('#img1').animate({marginLeft : 0}, 20);		
			});   
		});
	</script>
    <style>
		.yellow{ background-color:#FF9 ;}
		h1{display:none; }
		#box{ position:relative ;  width:200px; height:200px; 
		      overflow:hidden; margin:auto ; 
		      		}
		#images{ width:400px; height:200px; }
		#images img{width:200px; height:200px; }
		#direction{width:360px; margin:auto; } 
		#leftButton{ margin-top:10px ;}
		#rightButton{margin-left:250px; margin-top:-20px;}
	</style>
</head>
<body>
	<h1> 안녕하세요 </h1>
    <button>  첫번째    </button>    
    <h1> 안녕하세요 </h1>
    <button>  첫번째    </button>
    <h1> 안녕하세요 </h1>
    <button>  첫번째  </button>
    <button> 숨기기 </button>
    <button> 보이기/숨기기 toggle버튼 </button>
    <hr />
    <button> slideUp()</button>
    <button> slideDown()</button>
    <button> slideToggle()</button>
    <button> fadeIn()</button>
    <button> fadeOut()</button>
    <button> fadeToggle()</button>
    <input type="range" min="0.0" max="1.0" step="0.1" value="0.5"
    	class="opac"  />
    <br/> 
    
    <div id="box">
        <div id="images">
            <img id="img1" src="http://t1.gstatic.com/images?q=tbn:ANd9GcRPKRRMatgLqpeOnX9OY_1qhaVF-XWqD1SgoQiSNzhA7CMUAr8Q"  />
            <img id="img2" src="http://t3.gstatic.com/images?q=tbn:ANd9GcTbED9npyNj-QWPTSUHMkRJ7-VCki5a9mB20wPVQdygQepldlI0Ww" />
        </div>
    </div>
    <div id="direction">
    	<button id="leftButton"> 왼쪽 </button>
        <button id="rightButton"> 오른쪽</button>
    </div>
    
    
    
</body>    
</html>





저작자표시 비영리

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

jquery - ajax  (0) 2012.06.19
jquery 여러가지 method2  (0) 2012.06.18
jquery 여러가지 method  (0) 2012.06.18
jquery - selector  (0) 2012.06.18
jquery - 복습  (0) 2012.06.18 
<!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(){
			/*$('li').mouseover(function(){
				imgUrl=$(this).text();
				$('img:first').attr('src', imgUrl);
			});*/	
			
			$('li').bind('mouseover', function(){
				imgUrl=$(this).text();
				$('img:first').attr('src', imgUrl);
			});	
			
			
			$('img:first').bind({click : function(event){ 
							//$(this).width($(this).width()+5);
						   $(event.target).width($(this).width()+5);
						   // this==event.target  같다 
						   $('body').append(
							  "event.screenX : " + event.screenX
							 +"event.screenY" + event.screenY
											);
						    
						} , 
						mouseover : function(){
						  $('body').append('이미지에 마우스 올라감');	
						} ,
						mouseout : function(){
						  $('body').append('이미지에서 마우스 빠짐');							
						} ,
						mousemove : function(){
							position="페이지를 기준으로한 x 좌표"
							     +event.clientX +"<br />"
								 +"페이지를 기준으로한 y 좌표"
							     +event.clientY +"<br />"
								 +"event.screenX :" +"<br />"
								 + event.screenX
							     +"event.screenY :" +"<br />"
								 + event.screenY;
							$('div').html(position);
						}
			});
			
			// 딱한번만 실행되는 1회성 이벤트 리스너			
			$('button:first').one('click', function(){													
				alert(' one 메서드 ');									
			});
			
			$('button:eq(1)').bind('click' , function(event){
				alert(' bind 메서드');										  				$(this).unbind();  // bind 된 것 해제 
				//$(event.target).unbind();
			});			
			
			// 번갈아 가면서 function 이 실행됩니다. 
			$('img:eq(1)').toggle(
			function(){ $(this).attr('width',$(this).width()*2)}, 
			function(){ $(this).attr('width',$(this).width()/2)});
			
			//$('img:eq(2)').dblclick();
			$('img:eq(2)').bind('dblclick', function(){
				$(this).attr('width',$(this).width()*1.1);
			});
			
		});
	</script> 
</head>
<body>
	<button> one() : 한번만 작동하는 버튼</button>
    <button> unbind() :  한번만 작동하는 버튼 </button>
	<ol>
    	<li>http://thumb.opencast.naver.net/opencast01/n/a/naver_story/20120615/11424123483130.jpg?type=f10060</li>
        <li>http://static.naver.net/www/u/2012/0427/nmms_185621873.jpg</li>
    <ol>
    <div> </div>
    <img />
    <img src="http://thumb.opencast.naver.net/opencast01/n/a/naver_story/20120615/11424123483130.jpg?type=f10060"/>
    <img src="http://thumb.opencast.naver.net/opencast01/n/a/naver_story/20120615/11424123483130.jpg?type=f10060"/>
</body>
</html>



저작자표시 비영리

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

jquery - ajax  (0) 2012.06.19
jquery - animation 효과  (0) 2012.06.19
jquery 여러가지 method  (0) 2012.06.18
jquery - selector  (0) 2012.06.18
jquery - 복습  (0) 2012.06.18 
<!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:first').click(function(){					   
				var animal=["dog", "cat", "kuma"];
				//  ul의 child로  "<li>  dog </li> "를 붙이자
				
				// android BaseAdapte getView(int index,.. )
				$.each(animal, function(index, value){
					//ul에 접근해서 파라미터 값을 child로 붙여라					
					$('ul:first').append("<li>"+value+"</li>");		
					// 대상을 ul에 child로 붙여라
					$("<li>"+value+"!</li>").appendTo('ul:first');
				});
			});
			
			$('button:eq(1)').click(function(){
				$('ol >li').appendTo('ul');	
				//$('ul').append($('ol>li'));
			});
			
			$('button:eq(2)').click(function(){
				$('ol :last-child').prependTo('ol');	
			});
			
			// after 지정한 대상 뒤에 붙여라
			$('button:eq(3)').click(function(){ 
				$('<b> plus </b>').insertAfter('ol');	
				$('ol').after('<b> plus + </b>');
				$('ol').after('<hr />');
			});
			
			// before 지정한 대상 앞에 붙여라
			$('button:eq(4)').click(function(){ 
				$('<b> plus </b>').insertBefore('ol');	
				$('ol').before('<b> plus + </b>');
				$('ol').before('<hr />');
			});
			
			// wrap  각각 따로 감싸라    
			//     <p>  <b> 글자 </b>   </p>
			$('button:eq(5)').click(function(){ 
				$('span').wrap("<div class='box'></div>");
			});
			
			// wrapAll()  한꺼번에 감싸라    			
			$('button:eq(6)').click(function(){ 
				$('span').wrapAll("<div class='box'></div>");
			});
			// replaceWith() replaceAll()   바꾸기 교체
			$('button:eq(7)').click(function(){ 
				$('li.second').replaceWith("<li> Change </li>");
				$('li#second').replaceWith("<li> Change </li>");
				$("<li> new Change</li>").replaceAll("li:first");
			});
			
			$('button:eq(8)').click(function(){ 
				$('li.second').empty();		// 내용만 지우기		
			});
			
			$('button:eq(9)').click(function(){ 
				$('li:first').remove();		// 그냥 다 삭제		
			});
			
			$('button:eq(10)').click(function(){ 
				img=$('img').clone();
				$('body').append(img);
			});
			
			// 엘리먼트의 가로길이 세로길이 정보 
			$('button:eq(11)').click(function(){ 
				width=$('img').width();
				height=$('img').height();
				result="width :"+width+", height:"+height;
				$('ol').append("<li>"+result+"</li>");
			});
			
			// 응용
			$('img').click(function(event){
				width=$(this).width();
				height=$(this).height();
				$(this).attr('width', width+5);
				$(this).css('width' , width+5+"px");
			});
			
			//응용 2
			$('img').mousemove(function(event){
				offset=$(this).offset();
				left=offset.left;
				top=offset.top;
				$('li:last').after(
					"<li>left: "+left+", top:"+top+"</li>");
			});
			
			//outerWidth(), outerHeight() : 바깥쪽 margin까지 포함해서
			outerWidth=$('div:last').outerWidth(); 
			width=$('div:last').width(); 
			$('div:last').next()
					.text("outerWidth="+outerWidth+", width="+width);
			
			
		});
	</script>
    <style>
		.box{ border:1px solid black; margin:3px; }
	</style>
</head> 
<body>  
	<button>
    	append(), appendTo() 존재하지 않던 것을 만들어서 추가
    </button> 
    <button>
    	append(), appendTo() 문서에 있는 엘리먼트를 다른곳에 추가
    </button> 
    <button>prepend(), prependTo() 첫번째 자식으로 추가</button> 
    <button>after(), afterTo()  </button> 
    <button>before(), beforeTo()</button> 
    <button>wrap() 개별적 복수</button> 
    <button>wrapAll() 전부 1개</button> 
    <button>replaceWith(), replaceAll()</button> 
    <button>empty()</button> 
    <button>remove()</button> 
    <button>clone()</button>
    <button>width(), height() </button>
    <button>width() height() 응용</button>
    <button></button>
    <img src="http://www.androidpub.com/files/member_extra_info/image_mark/234/234.gif" />
	<ol><li> zero </li>
        <li> first </li>
        <li class="second"> second </li>
        <li id="second"> third </li></ol>
    <ul>    	
    </ul>
    <span> 첫번째 </span><span> 두번째 </span><span> 세번째 </span>
    <br/>
    <div style="width:50px; height:50px; margin:10px; padding:10px;
    			background-color:#6F9 ; 
                border:10px solid black;
                " > </div>
    <span></span>
</body>
</html>



저작자표시 비영리

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

jquery - animation 효과  (0) 2012.06.19
jquery 여러가지 method2  (0) 2012.06.18
jquery - selector  (0) 2012.06.18
jquery - 복습  (0) 2012.06.18
jquery - currentClass  (0) 2012.06.15 
<!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 
<!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>



저작자표시 비영리

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

jquery 여러가지 method  (0) 2012.06.18
jquery - selector  (0) 2012.06.18
jquery - currentClass  (0) 2012.06.15
jquery - image toggle  (0) 2012.06.15
jquery - mouseover, mouseleave  (0) 2012.06.15 
<!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>Untitled Document</title>
	<style>
		.small{width:50px; height:50px;}
		.border1{border:2px dotted blue; padding:2px;}
		.border2{border:5px solid red; padding:4px;}
	</style>
<script src="./jquery-1.7.2.min.js"> 		
    </script>
    <script>
		$(document).ready(function(){
			$('img').addClass(function(index, currentClass){
				if(currentClass == 'small'){
					$('p').html(index + "번째 것은 border1 적용");
					return 'border1';
				}else{
					return 'border2';
				}								   
			});
		});
	</script>
</head>
	<p></p><div></div>
	<img class="small" src="http://sogangori.cdn2.cafe24.com/icon/black-leopard-icon.png" />
    <img src="http://sogangori.cdn2.cafe24.com/icon/cat-icon.png"  />
    <img src="http://sogangori.cdn2.cafe24.com/icon/frog-icon.png"  />
    
<body>
</body>
</html>



저작자표시 비영리

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

jquery - selector  (0) 2012.06.18
jquery - 복습  (0) 2012.06.18
jquery - image toggle  (0) 2012.06.15
jquery - mouseover, mouseleave  (0) 2012.06.15
jquery - 이미지 출력시 URI 동시 출력  (0) 2012.06.15 
<!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>Untitled Document</title>
<script src="./jquery-1.7.2.min.js"> 		
    </script>
    <script>
		$(document).ready(function(){
			$('img').toggle(function(event){
				//this = $(event.target)
				$(event.target).css('opacity',"0.1");					 
				}, 
				function(event){
				$(event.target).css('opacity',"1.0");		
				});
		});
	</script>
</head>
	<img src="http://sogangori.cdn2.cafe24.com/icon/black-leopard-icon.png" />
    <img src="http://sogangori.cdn2.cafe24.com/icon/cat-icon.png"  />
    <img src="http://sogangori.cdn2.cafe24.com/icon/frog-icon.png"  />
    
    <p></p><div></div>
<body>
</body>
</html>



저작자표시 비영리

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

jquery - 복습  (0) 2012.06.18
jquery - currentClass  (0) 2012.06.15
jquery - mouseover, mouseleave  (0) 2012.06.15
jquery - 이미지 출력시 URI 동시 출력  (0) 2012.06.15
jquery - 버튼 클릭시 이미지 hide&show  (0) 2012.06.15 
<!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>Untitled Document</title>
<script src="./jquery-1.7.2.min.js"> 		
    </script>
    <script>
		$(document).ready(function(){
			$('img').attr('src', function(){
				return this.title;
			});
			$('img').click(function(){
				$('p').html(this.title);
			});
			$('img').mouseover(function(index){
				$('div').html("이미지에 마우스가 올라감");
			});
			$('img').mouseleave(function(){
				$('div').html("");
			});
		});
	</script>
</head>
	<img title="http://sogangori.cdn2.cafe24.com/icon/black-leopard-icon.png" />
    <img title="http://sogangori.cdn2.cafe24.com/icon/cat-icon.png"  />
    <img title="http://sogangori.cdn2.cafe24.com/icon/frog-icon.png"  />
    
    <p></p><div></div>
<body>
</body>
</html>



저작자표시 비영리

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

jquery - currentClass  (0) 2012.06.15
jquery - image toggle  (0) 2012.06.15
jquery - 이미지 출력시 URI 동시 출력  (0) 2012.06.15
jquery - 버튼 클릭시 이미지 hide&show  (0) 2012.06.15
jquery - setInterval  (0) 2012.06.15 
<!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>Untitled Document</title>
<script src="./jquery-1.7.2.min.js"> 		
    </script>
    <script>
		$(document).ready(function(){
			$('img').attr('src'	, 'http://static.naver.net/www/u/2010/0611/nmms_215646753.gif	').attr('title', "그림입니다.");
			$('p').text($('img').attr('src')+$('img').attr('title'));
			$('img').attr({width: '200', height: '200'});
			
		});
	</script>	
</head>

<body>
	<img />
	<p></p>
</body>
</html>



저작자표시 비영리

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

jquery - image toggle  (0) 2012.06.15
jquery - mouseover, mouseleave  (0) 2012.06.15
jquery - 버튼 클릭시 이미지 hide&show  (0) 2012.06.15
jquery - setInterval  (0) 2012.06.15
jquery - attribute  (0) 2012.06.15 
<!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>Untitled Document</title>
	<script src="./jquery-1.7.2.min.js"> 		
    </script>
    <script>
		$(document).ready(function(){
			$('button:first').click(function(){
				$('img').css('width','150px');
				$('img').hide(1000);
			});
			$('button:last').click(function(){
				$('img').css('width','150px');
				$('img').show(1000);
			});	
		});
	</script>	
</head>

<body>
	<button>버튼</button>
    <button>버튼</button>
	<img src="http://static.naver.net/www/u/2010/0611/nmms_215646753.gif"/>
</body>
</html>



저작자표시 비영리

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

jquery - mouseover, mouseleave  (0) 2012.06.15
jquery - 이미지 출력시 URI 동시 출력  (0) 2012.06.15
jquery - setInterval  (0) 2012.06.15
jquery - attribute  (0) 2012.06.15
jquery - ol,sibling  (0) 2012.06.15 
<!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(){
		 	setInterval( function(){
				$('img:eq(1)').hide(1000);
				$('img:first').appendTo('body');
				$('img:eq(2)').show(1000);
			}  ,1000);				   
		});
	</script>
</head>
	<img src="http://sogangori.cdn2.cafe24.com/icon/black-leopard-icon.png" />
    <img src="http://sogangori.cdn2.cafe24.com/icon/cat-icon.png"  />
    <img src="http://sogangori.cdn2.cafe24.com/icon/frog-icon.png"  />
    <img src="http://sogangori.cdn2.cafe24.com/icon/koala-icon.png"  />
    
<body>
</body>
</html>



저작자표시 비영리

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

jquery - 이미지 출력시 URI 동시 출력  (0) 2012.06.15
jquery - 버튼 클릭시 이미지 hide&show  (0) 2012.06.15
jquery - attribute  (0) 2012.06.15
jquery - ol,sibling  (0) 2012.06.15
jquery 라이브러리 및 시작  (0) 2012.06.15 
<!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>Untitled Document</title>
	<script src="./jquery-1.7.2.min.js"></script>
    <script>
    	$(document).ready(function(){
			$('ol').css('list-style-type','none');
        	$('li:eq(4)').css("font-size","2em");
			$('li').css("float","left");
			$('li').css("margin","10px");
			
			console.log('check1');
			// = > < ! 로 선택하기
			//li <1
			$('li:lt(2)').css('color','rgb(0,0,255)');
            //li >4
			$('li:gt(2)').css('color','rgb(0,0,255)');
			
			$('li:not( :eq(4))').css("font-size","1.5em");
			
			$('li:not( :even)').css('color','green');
			$('li:not(*)').css('color','green');
			
			//div중에서 id가 one인 것들
			$('div[id="one"]').css('color','red');
			
			//div중에서 name이라는 attribute가 있는 것들
			$('div[name]').css('color','blue');
			
			// ^= 헷 은 "f"로 시작하는 것들
			$('div[id^="f"]').css('color','rgb(250,30,30)');
			
			// $=는 ""로 끝나는 것들
			$('div[id$="x"]').css('color','brown');
			// *=는 ""가 포함된 것들
			$('div[id*="v"]').css('font-size','2em');
			
			//img
			$('img').attr('src','http://static.naver.net/www/u/2010/0611/nmms_215646753.gif');
        
		//<img id="image1">
		//alert($('img').attr('width'));
		$('img').attr('id','image1').attr('width','500').attr('height','200');
		$('img').removeAttr('height');
		
		//{속성:'벨류','속성:'벨류', 속성:'벨류'}
		$('img:last').attr({src:'http://static.naver.net/www/u/2010/0611/nmms_215646753.gif',width: '200',height: '100'});
		
		});
    </script>
    <style>
		#image1{border:2px solid gray; padding:2px;}
		div[name]{border:2px solid gray;}
		div[id$="x"]{background-color:#000;}
		div[id^="f"]{border:2px solid pink;}
	</style>
</head>
	
<body>
	<img src=""/>
    <img src=""/>
	<div id="one">one</div>
    <div id="two" name="hi">two</div>
    <div id="three">three</div>
    <div id="four">four</div>
    <div id="five">five</div>
    <div id="six">six</div>
	
	&lt; &gt;
    <ol>
    	<li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li> 
    </ol>
</body>
</html>



저작자표시 비영리

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

jquery - 버튼 클릭시 이미지 hide&show  (0) 2012.06.15
jquery - setInterval  (0) 2012.06.15
jquery - ol,sibling  (0) 2012.06.15
jquery 라이브러리 및 시작  (0) 2012.06.15
jquery-slicing  (0) 2012.06.07 
<!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>



저작자표시 비영리

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

jquery - setInterval  (0) 2012.06.15
jquery - attribute  (0) 2012.06.15
jquery 라이브러리 및 시작  (0) 2012.06.15
jquery-slicing  (0) 2012.06.07
이미지 바꾸기2  (0) 2012.05.31


여기 들어가서 라이브러리를 다운 받자~


개발에 체크하고 다운을 시작~~~(explorer에서 하자~~chrome은 지원을 하지 않는가보다~~)


jquery-1.7.2.min.js

jquery 라이브러리...

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
	<script src="jquery-1.7.2.js"></script>
    <script>
		window.onload=function(){
			/*document.body.bgColor="yellow";*/
			h1All=document.getElementsByTagName("h1");
			h1All[0].innerHTML +="찾았다";
			h3All=document.getElementsByTagName("h3");
			for(i=0;i<h3All.length;i++)
				h3All[i].innerHTML="for문";
		}
		$(document).ready(function(){
			document.body.bgColor="gray";
			$('h2').html("찾았다");
		});
	</script>
</head>

<body>
	<h1>제목</h1>
    <h2>부제목</h2>
    <h3>내용</h3>
    <h4>세부내용</h4>
    
    <h1>제목</h1>
    <h2>부제목</h2>
    <h3>내용</h3>
    <h4>세부내용</h4>
</body>
</html>



저작자표시 비영리

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

jquery - setInterval  (0) 2012.06.15
jquery - attribute  (0) 2012.06.15
jquery - ol,sibling  (0) 2012.06.15
jquery-slicing  (0) 2012.06.07
이미지 바꾸기2  (0) 2012.05.31

+ Recent posts

티스토리툴바