11일차 jQuery

|
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0911 실습</title>
<script type="text/Javascript">

/*0911 실습 - 리스트의엘리먼트를 알파벳 순으로 정렬 */

function sortkids(e){
		var array = [];
		var list = document.getElementsByTagName("li");
		for(var i = 0; i<list.length; i++){
			array.push(list[i].childNodes[0].nodeValue); // nodeValue : 텍스트 노드의 값을 가져온다.
			console.log(array[i]);
		}
		array.sort(); // 알파벳순으로 정렬 
		
	  	for(var i =0; i<list.length; i++){ // 화면에 뿌려줌.
		   list[i].innerHTML = array[i]; // innerHTML : html요소에 접근하여 화면에 바꿔 출력하게 해줌.
	  	}
		/*
		for(var i =0; i<array.length; i++){ // 화면에 뿌려줌.(결과값만 나오게 뿌리기)
			document.write("<li>" + array[i] + "</li>");
		}*/
}

</script>
</head>
<body>

 <ul id='list'>
   <li>c</li><li>b</li><li>a</li><li>d</li>
 </ul>
 <button onclick="sortkids('list')">Sort list</button>

</body>
</html>

==================================
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 선택자 예제</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
	
    // $(document).ready() : window.onload, body.onload와 같은기능.
	// $(document).ready(function(){ -> $(function(){ 으로 축약가능
    
    /*기본선택자*/
    // 자손선택자 : body > *
    // 두가지 클래스 : .item.select
    // 후손선택자 : body *
    
    // 속성선택자
    // 'span[name |= "tag"]'  특정값과 일치하고 연결된 값이 따름.
    // 'span[name ~= "tag"]'  특정값과 일치하는 단어가 있는 문서객체를 선택.(단어체크)
    // 'span[name ^= "tag"]'  특정값으로 시작하는 문서객체를 선택.
    // 'span[name $= "tag"]'  특정값으로 끝나는 문서객체를 선택.
    // 'span[name *= "tag"]'  특정값을 포함하는 문서객체를 선택.(값체크)
    // 'span[name != "tag"]'  속성값이 불일치하는 문서객체를 선택.
    
    /*input 요소의 타입*/
    // input : 모든 input요소
    // text, password, radio, checkbox, submit, reset, button, image, file

	/* jQuery 선택자 예제 */
	$(document).ready(function(){
		$("button").click(function(){
			$(this).hide(); /*나 자신 - 버튼자신을 숨김*/
			$("p.intro").hide(); /*.intro를 class로 가지는 p태그를 hide 시킴*/
			$(":button").hide(); /* button tag or input type이 button인 태그*/
		});
	});
	$(document).ready(function(){
		$("button").click(function(){
				$("ul li:first").hide(); /*ul자손 모든 li중 첫번째 - list1의 coffee만*/
				$("ul li:first-child").hide(); /* ul별로 첫번째 li - list1,2 모든 coffee만 */
		});
	});
	//짝수 테이블
	$(document).ready(function(){ 
		 $("tr:even").css("background-color","yellow");
		 $( "input:disabled" ).val( "this is it" );
	});
	
	/* jQuery 선택자 예제2 */
	// wrap : 뒤에 있는 태그를 앞에잇는 태그로 감싸는 것
	$(document).ready(function(){
		$(":checked").wrap("<span style='background-color:red'>");
		$("input").focus(); // input태그에 focus를 주고
	    $(":focus").css("background-color","yellow"); //focus에 css속성을 부여
	});
	
	/*jQuery 함수필터 선택자 예제2*/
	// 선택요소 배열로 리턴
	$(document).ready(function(){
		// var jb = $('li').get(); // div에 선택요소 배열로 리턴
		var jb = $( 'li' ).get(0); // 0번째요소를 리턴
		//for(var i=0; i< jb.length; i++){
			// $('div').append('<p>' + jb[i].innerHTML + '</p>');
			// div에 선택요소 배열로 리턴
			$('div').append('<p>' + jb.innerHTML + '</p>');
			// 0번째요소를 리턴
	});
	
	// 부모요소 div.cd가 있어야 적용
	$(document).ready(function(){
		$('p.ef').parent('div.cd').css('color', 'red');
	});
	
	// 형제 siblings
	$(document).ready(function(){
		$(".me").siblings().css({"border": "2px solid red"});
	});
	

</script>
</head>
<body>
	<br>=========1번===========<br>
	<h2 class="intro">This is a heading</h2>
	<p class="intro">This is a paragraph.</p>
	<p>This is another paragraph.</p>
	<button>Click me</button>
	
	<br>=========2번===========<br>
	<p>List 1:</p>
	<ul>
	 <li>Coffee</li>
	 <li>Milk</li>
	 <li>Tea</li>
	</ul>
	<p>List 2:</p>
	<ul>
	 <li>Coffee</li>
	 <li>Milk</li>
	 <li>Tea</li>
	</ul>
	<button>Click me</button>
	
	<br>=========3번===========<br>
	<table border="1">
	 <tr>
	   <th>Company</th>
	   <th>Country</th>
	 </tr>
	 <tr>
	   <td>Alfreds Futterkiste</td>
	   <td>Germany</td>
	 </tr>
	 <tr>
	   <td>Berglunds snabbköp</td>
	   <td>Sweden</td>
	 </tr>
	 <tr>
	   <td>Centro comercial Moctezuma</td>
	   <td>Mexico</td>
	 </tr>
	</table>
	
	<br>=========4번===========<br>
	<form>
		<input type="email" disabled="disabled">
		<input name="id">
	</form>
	
	<br>=========5번===========<br>
	<form action="">
	 11: <input type="text" name="user"><br>
	 22: <input type="checkbox"name="vehicle"><br>
	 33: <input type="checkbox" name="vehicle"checked="checked"><br>
	 44: <input type="checkbox"name="vehicle"><br>
	 <input type="submit">
	</form>
	
	<br>=========선택요소 배열로 리턴===========<br>
		<ul>
	   <li>Lorem</li>
	   <li>Ipsum</li>
	 </ul>
	 <div></div>
	 
	 <br>=========부모요소 div, cd===========<br>
	 <div class="ab">
	   <p>Hello</p>
	   <div class="cd">
	     <p class="ef">
	       Lorem Ipsum Dolor
	     </p>
	   </div>
	 </div>
	 
	 <br>=========형제 siblings===========<br>
	 <ul>ul()부모)
	 <li>li(형제)</li>
	 <li>li (형제)</li>
	 <li class="me">li (나)</li>
	 <li>li (형제)</li>
	 <li>li (형제)</li>
	</ul>

</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 함수필터 선택자 예제</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
/*
	.high-light-0{background:yellow;}
	.high-light-1{background:orange;}
	.high-light-2{background:blue;}
	.high-light-3{background:green;}
	.high-light-4{background:red;}
*/
</style>
<script>
	/* jQuery 함수필터 선택자 예제 */
	$(document).ready(function(){
	 // $("p:nth-child(3)").css("background-color","yellow"); // 23, 33
	  // $("p:first-of-type").css("background-color", "yellow"); // 12, 22, 31
	   // $("p:first-child").css("background-color", "yellow"); // 31
	   $("p:first").css("background-color", "yellow"); // 12
	});
	
	//gt('index') 는 요소 집합에서 index 보다 큰 색인을 가지고 있는 요소들을 반환해 줍니다.
	$(document).ready(function(){
		 $("tr:gt(1)").css("background-color", "yellow"); // 1보다 큰곳에 css 적용
		 $(":empty").css("background-color","blue"); // empty : 빈곳에 css적용
		 $("tr:eq(0)").css("background-color","green"); // eq : n번째에 위치하는 문서객체 선택. 첫번째줄
		 $("td:nth-child(3n+1)").css("background-color","gray"); // 1, 4
		 $("td:nth-child(3n+2)").css("background-color","orange"); // 2, 5
		 $("td:nth-child(3n)").css("background-color","red"); // 0, 3
	});
	
	/*배열관리*/
	$(document).ready(function(){
		//$(selector).each(function(index, item){}
		//h1 요소들에 대해 각각 콜백함수 실행
		$('h1').each(function(index, item){
			$(this).addClass('high-light-' + index); // class 속성을 추가
		});
	});
	
	
	/*객체확장*/
	// $.extend(object, addObject, addObject...): 객체에 속성을 계속 추가(합침)
	// object에 addObejct들을 합친다.
		//a에 b를 merge하고 그 결과에 c를 merge
		var a = {
				name : '굴리트',
				gender : 'Male',
				role : '검은 튤립'
		};
		
		var b = {
				name : '포그바',
				gender : 'Male',
				role : '댄서바'
		};
		var c = {
				name : '지단',
				age : 40
		};
		$.extend(a,b,c);
		console.log(a); // {name: "지단", gender: "Male", role: "댄서바", age: 40}
		
		// a에 b를 merge하는데 원소스 유지
		var newobject = $.extend({}, a, b);
		console.log(newobject); // {name: "포그바", gender: "Male", role: "댄서바", age: 40}
		
		// property가 object일때
		// deepCopy : $.extend(true, d, e)
		// 객체의 각속성을 비교해서 없는 속성만 copy. true를 앞에 붙여줌.
		var d = {
		   style: {
		       top: 100,
		       left: 200,
		       width: 300
		   },
		   duration: 1000
		};
		
		var e = {
		   style: {
		       height: 400
		   }
		};
		$.extend(d, e); // // /*duration: 1000 style: {height: 400}
 		$.extend(true, d, e); // duration: 1000 style: {top: 100, left: 200, width: 300, height: 400}
		console.log(d); 
		
		/*문서객체 선택과 탐색*/
		// end() : 문서객체 선택취소 
		$(document).ready(function(){
			// 홀수번째는 흰색, 짝수번째는 빨강
			//$('h1').css('background', 'orange');
			//$('h1:even').css('color', 'white');
			// $('h1:odd').css('color', 'red');
			// end함수 사용 : 마지막에 선택한 것을 취소. 선택한 filter(:odd)을 취소
			$('h1').css('background', 'orange').filter(':even').css('color', 'white').end().filter(':odd').css('color', 'blue');
		});
		
		// add예제
		//p와 div에 같은 css 적용
		$(document).ready(function(){
			$("p").add("div").css({"border":"2px solid white"});
			// p를 선택하고 추가로 이전인 div#after도 추가
			// addBack : 이전요소도 add에 포함
			$("div#after").find("p").addBack().css({"backgroundColor": "aqua"});
		});
		
		/*find 예제*/
		$( document ).ready( function() {
   			$( 'p.b' ).find( 'span.ip' ).css( 'font-size','2em');
   			// p 클래스가 b인것중 / span 클래스의 ip 를 find
		});
		
		
	
</script>
</head>
<body>

	<br>=========함수필터 선택자 예제===========<br>
	<h1>11:This is a heading inbody</h1>
	<p>12:AAAAAAAAA</p>
	<p>13:BBBBBBBBB</p>
	<div style="border:1pxsolid;">
	 <span>21:This is a span element in div</span>
	 <p>22:AAAAAAAAA</p>
	 <p>23:BBBBBBBBB</p>
	 <p>24:CCCCCCCC</p>
	</div><br>
	<div style="border:1pxsolid;">
	 <p>31:AAAAAAAAA</p>
	 <p>32:BBBBBBBBB</p>
	 <p>33:CCCCCCCC</p>
	</div>
	<p>14:CCCCCCCCC</p>
	
	<br>=========함수필터 선택자 예제2===========<br>
	<table border="1">
	 <tr>
	   <th>Company</th>
	   <th>Contact</th>
	   <th>Country</th>
	 </tr>
	 <tr>
	   <td>Alfreds Futterkiste</td>
	   <td>Maria Anders</td>
	   <td>Germany</td>
	 </tr>
	 <tr>
	   <td>Berglunds snabbköp</td>
	   <td>Christina Berglund</td>
	   <td>Sweden</td>
	 </tr>
	  <tr>
	   <td></td>
	   <td>Christina Berglund</td>
	   <td>Sweden</td>
	 </tr>
	  <tr>
	   <td>Alfreds Futterkiste</td>
	   <td>Maria Anders</td>
	   <td></td>
	 </tr>
	  <tr>
	   <td></td>
	   <td>포그바</td>
	   <td>굴리트</td>
	 </tr>
	  <tr>
	   <td></td>
	   <td>und</td>
	   <td>den</td>
	 </tr>
	 </table>
	 
	 <br>=========/*배열관리*/===========<br>
	  <h1>item - 0</h1>
	  <h1>item - 1</h1>
	  <h1>item - 2</h1>
	  <h1>item - 3</h1>
	  <h1>item - 4</h1>
	 
	 
	 <br>=========add 예제===========<br>
	 <p>안녕하세요.</p>
	<span>날강두입니다.</span>
	<div>반갑습니다.</div>
	<div id="after">
	 <p>.addBack() 적용 후</p>
	 <p>안녕하세요. 메시입니다.</p>
	</div>
	
	<br>=========/*find 예제*/===========<br>
	<p class="a">
	   <span class="lo">Lorem</span>
	   <span class="ip">Ipsum</span>
	   <span class="do">Dolor</span>
	 </p>
	 <p class="b">
	   <span class="lo">Lorem</span>
	   <span class="ip">Ipsum</span> 
	   <span class="do">Dolor</span>
	 </p>

</body>
</html>

And