본문 바로가기

5월 ~ 7월) 웹/web

48Day[jquery] - 01_hello_jquery/ 02_selector1/ 03_selector2/ 04_selecror3/ 05_selector4/ 06_each/ 07_css/ 08_attr/ 09_text/ 10_element/ 11_element_move/ 12_event

 

01_hello_jquery

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- script 태그를 사용하여 jQuery 라이브러리 파일을 웹문서에 포함해야만 jQuery 기능 사용 가능 -->
<!-- => https://www.jquery.com 사이트 참조 -->

<!-- jQuery 라이브러리 파일을 다운로드 받아 현재 서버의 자원으로 저장하여 웹문서 포함 -->
<!-- => 1.X : IE9 이하, 2.X 또는 3.X : IE10 이상 -->
<!-- => 미압축파일(uncompressed) : 라이브러리 파일 변경 가능, 압축파일(compressed) : 라이브러리 파일 변경 불가능 -->
<!-- <script type="text/javascript" src="jquery-3.7.0.min.js"></script> -->

<!-- CDN 서버에 저장된 jQuery 라이브러리 파일을 제공받아 웹문서에 포함 -->
<!-- CDN(Contents Delivery Network) Server : 대량의 콘텐츠를 빠르고 안정적으로 제공하는 서버 -->
<!-- <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script> -->

<!-- **제이쿼리 쓰고싶으면 반드시 써줘야함 ▽ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script type="text/javascript">
//jQuery 라이브러리를 이용하는 방법 - CSS 선택자로 태그(엘리먼트)를 검색하여 jQuery 객체로
//생성하여 jQuery 객체의 메소드를 호출해 필요한 기능 구현 
// => 모든 태그가 DOM Tree에 저장되야만 jQuery 라이브러리 사용 가능

/*
//window 객체가 메모리에 모두 저장된 후 실행될 이벤트 처리 함수 등록 - DOM Tree 완성
window.onload=function() {
	alert("window.onload 이벤트에 의해 실행되는 명령-1");	
}

window.onload=function() {
	alert("window.onload 이벤트에 의해 실행되는 명령-2");	
}
*/

//jQuery 객체를 생성하여 메소드를 호출하는 방법
//형식)jQuery(Selector|JavaScriptObject|Tag).method(value, value, ...);

/*
//jQuery(document).ready(callback) : document 객체가 준비(완성)되면 콜백함수를 호출하는 메소드
// => document 객체가 준비된 상태는 DOM Tree가 완성된 상태로 콜백함수에서 jQuery 라이브러리 사용 가능
// => window.onload 이벤트 리스너 속성을 사용하는 방법보다 가독성이 좋으면 객체의 메소드이므로
//여러번 호출도 가능
jQuery(document).ready(function() {
	alert("document 객체가 준비된 상태인 경우 실행될 명령-1");	
});

jQuery(document).ready(function() {
	alert("document 객체가 준비된 상태인 경우 실행될 명령-2");	
});
*/

/*
jQuery(document).ready(function() {
	jQuery("div").css("color", "red");
});
*/
</script>
</head>
<body>
	<h1>jQuery 사용</h1>
	<hr>
	<p>jQuery : 태그에 대한 이벤트 처리, 태그 조작 및 AJAX 기능을 제공하기 위한 자바스크립트 라이브러리</p>
	<hr>
	<div>Hello, jQuery!!!</div>
	<div>Hello, jQuery!!!</div>
	<div>Hello, jQuery!!!</div>
	
	<script type="text/javascript">
	//script 태그를 body 태그의 마지막 자식태그로 선언하면 document 객체가 준비된 상태와 동일하므로
	//jQuery(document).ready() 메소드의 콜백함수를 이용하지 않아도 jQuery 라이브러리 사용 가능
	//jQuery("div").css("color", "red");
	
	//jQuery 함수명 대신 $ 기호 사용하여 jQuery 객체 생성 가능
	$("div").css("color", "red");
	</script>
</body>
</html>

 


 

 


02_selector1

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>선택자(Selector)</h1>
	<hr>
	<h2 class="item">jQuery Selector-1</h2>
	<h2 id="tag">jQuery Selector-2</h2>
	<h2 class="item">jQuery Selector-3</h2>
	<p>jQuery Selector-4</p>
	
	<script type="text/javascript">
	//태그 선택자 : 태그명으로 태그를 검색하여 제공하는 선택자
	// > 검색된 태그의 Node(Element) 객체로 jQuery 객체를 생성한 후 jQuery 메소드 호출
	// > 다수의 태그가 검색된 경우 묵시적 반복에 의해 다수의 jQuery 객체가 생성되어 메소드 호출
	$("h2").css("background", "yellow");
	
	//클래스 선택자 : 태그의 class 속성값으로 태그를 검색하여 제공하는 선택자
	// => 클래스 선택자는 태그 선택자와 구분하기 위해 [.]으로 시작
	$(".item").css("background", "orange");
	
	//아이디 선택자 : 태그의 id 속성값으로 태그를 검색하여 제공하는 선택자
	// => 아이디 선택자는 태그 선택자와 구분하기 위해 [#]으로 시작
	$("#tag").css("color", "green");
	
	//선택자로 검색된 태그의 jQuery 객체로 메소드를 순차적으로 호출 가능 - 메소드 체인(Method Chain)
	//$("p").css("font-size","30px").css("color","red");
	
	
	//jQuery 객체로 메소드를 호출할 때 매개변수에 값 대신 Object 객체를 전달 가능
	// > Object 객체의 요소를 이용하여 메소드에 필요한 다수의 값을 전달
	$("p").css({"font-size":"30px","color":"red"});
	</script>
</body>
</html>

 


 


03_selector2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>선택자(Selector)</h1>
	<hr>
	<div id="subject">
		<p>Java 과정</p>
		<div>
			<p>Java 기본문법</p>
			<p>Java OOP</p>
			<p>Java API</p>
		</div>
		
		<p>JSP 과정</p>
		<div>
			<p>스크립트 요소(Script Element)</p>
			<p>지시어(Directive)</p>
			<p>표준 액션 태그(Standard Action Tag)</p>
		</div>
	</div>
	
	<script type="text/javascript">
	//자식 선택자 : 검색된 부모태그에서 첫번째 깊이의 자식태그를 검색하여 제공하는 선택자
	//$("#subject > p").css({"font-size":"25px", "font-weight":"bold"});
	
	//$(selector).children([selector]) : 선택자로 검색된 부모태그에서 첫번째 깊이의 자식태그를
	//검색하여 jQuery 객체로 반환하는 메소드
	// => children() 메소드의 매개변수에 선택자를 전달하지 않은 경우 모든 첫번째 깊이의 
	//자식태그를 jQuery 객체로 반환
	$("#subject").children("p").css({"font-size":"25px", "font-weight":"bold"});
	
	
	//후손 선택자 : 검색된 부모태그에서 모든 깊이의 후손태그를 검색하여 제공하는 선택자
	//$("#subject p").css("color", "green");
	
	//$(selector).find(selector) : 선택자로 검색된 부모태그에서 모든 깊이의 후손태그를
	//검색하여 jQuery 객체로 반환하는 메소드
	$("#subject").find("p").css("color", "green");
	</script>
</body>
</html>

 


 

 


04_selecror3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>선택자(Selector)</h1>
	<hr>
	<h2>jQuery 연습-1</h2>
	<h2 class="normal">jQuery 연습-2</h2>
	<h2 class="normal">jQuery 연습-3</h2>
	<h2>jQuery 연습-4</h2>
	<h2>jQuery 연습-5</h2>
	<h3 class="normal">jQuery 연습-6</h3>
	<h3>jQuery 연습-7</h3>
	<hr>
	<ul>
		<li>선택자(Selector)-1</li>
		<li>선택자(Selector)-2</li>
		<li>선택자(Selector)-3</li>
		<li>선택자(Selector)-4</li>
		<li>선택자(Selector)-5</li>
	</ul>
	
	<script type="text/javascript">
	$("h2").css("background", "yellow");
	
	//필터 선택자 : 선택자로 검색된 다수의 태그 중 클래스 선택자로 특정 태그만을 검색하여 제공하는 선택자
	//$("h2.normal").css("background", "green");
	
	//$(selector).filter(selector) : 선택자로 검색된 다수의 태그 중에서 filter() 메소드의
	//매개변수로 전달받은 선택자의 태그를 검색하여 jQuery 객체로 반환하는 메소드
	// => filter() 메소드의 매개변수에는 모든 선택자를 전달하여 태그 검색 가능
	//$("h2").filter(".normal").css("background", "green");
	$(".normal").filter("h2").css("background", "green");
	
	$("h3").filter(".normal").css("background", "silver");
	//$(selector).not(selector) : 선택자로 검색된 다수의 태그 중에서 not() 메소드의 매개변수로 
	//전달받은 선택자의 태그로 검색되지 않은 나머지 태그를 jQuery 객체로 반환하는 메소드
	$("h3").not(".normal").css("background", "gold");
	
	$("ul li").css("color", "orange");//$("ul").find("li").css("color", "orange"); 명령과 동일
	
	//가상 선택자 : 태그의 상태에 의해 태그를 검색하여 제공하는 선택자
	//:nth-child(X) : X 번째 위치한 후손태그를 제공하기 위한 가상 선택자
	//$("ul li:nth-child(3)").css("color", "red");
	//CSS의 가상 선택자를 filter() 메소드의 매개변수에 전달하여 호출 가능
	//$("ul li").filter(":nth-child(3)").css("color", "red");
	
	//:eq(Index) : 다수의 검색 태그 중 첨자(Index) 위치의 태그를 제공하기 위한 가상 선택자
	//$("ul li:eq(2)").css("color", "red");
	//$("ul li").filter(":eq(2)").css("color", "red");
	
	//$(selector).eq(index) : 선택자로 검색된 다수의 태그 중 매개변수로 전달받은 첨자 위치의
	//태그를 검색하여 jQuery 객체로 반환하는 메소드
	//$("ul li").eq(2).css("color", "red");
	$("ul").find("li").eq(2).css("color", "red");
	
	//$("ul li").eq(0).css("color", "green");
	////$(selector).first() : 선택자로 검색된 다수의 태그 중 첫번째 태그를 검색하여 jQuery 객체로 반환하는 메소드
	$("ul li").first().css("color", "green");
	
	//$("ul li").eq(4).css("color", "blue");
	//eq() 메소드의 매개변수에 -1를 전달하면 마지막 태그를 검색하여 jQuery 객체로 반환하는 메소드
	//$("ul li").eq(-1).css("color", "blue");
	//$(selector).last() : 선택자로 검색된 다수의 태그 중 마지막 태그를 검색하여 jQuery 객체로 반환하는 메소드
	$("ul li").last().css("color", "blue");
	
	//$(selector).next() : 선택자로 검색된 태그에서 다음 위치의 태그를 검색하여 jQuery 객체로 반환하는 메소드
	$("ul li").eq(0).next().css("color", "aqua");
	//$(selector).prev() : 선택자로 검색된 태그에서 이전 위치의 태그를 검색하여 jQuery 객체로 반환하는 메소드
	$("ul li").eq(-1).prev().css("color", "lime");
	</script>
</body>
</html>

 


 

 


05_selector4

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>선택자(Selector)</h1>
	<hr>
	<table>
		<tr>
			<td>아이디</td>
			<td><input type="text" name="id"></td>
		</tr>
		<tr>
			<td>비밀번호</td>
			<td><input type="password" name="passwd"></td>
		</tr>
		<tr>
			<td>이름</td>
			<td><input type="text" name="name"></td>
		</tr>
		<tr>
			<td>이메일</td>
			<td><input type="text" name="email"></td>
		</tr>
	</table>
	
	<script type="text/javascript">
	//속성 선택자 : 태그의 속성 또는 속성값을 비교하여 태그를 검색하여 제공하는 선택자
	$("input[type]").css("border", "2px solid green");
	$("input[type='password']").css("color", "red");
	$("input[name='email']").css("color", "blue");
	</script>
</body>
</html>

 


 


06_each

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>each 메소드</h1>
	<hr>
	<h3>each 메소드 호출-1</h3>
	<h3>each 메소드 호출-2</h3>
	<h3>each 메소드 호출-3</h3>
	<h3>each 메소드 호출-4</h3>
	<h3>each 메소드 호출-5</h3>
	
	<script type="text/javascript">
	//선택자에 의해 다수의 태그가 검색되면 태그의 갯수만큼 jQuery 객체를 생성하여 메소드 호출
	// > 묵시적 반복 : 검색된 태그를 모두 jQuery 객체로 생성하여 메소드를 반복적으로 호출
	// > 검색된 모든 태그에 동일한 기능 구현
	//$("h3").css("color", "red");
	
	/*
	//선택자에 의해 검색된 다수의 태그를 구분하여 메소드 호출 - 검색된 태그에 다른 기능 구현
	$("h3").eq(0).css("color", "red");
	$("h3").eq(1).css("color", "green");
	$("h3").eq(2).css("color", "blue");
	$("h3").eq(3).css("color", "orange");
	$("h3").eq(4).css("color", "lime");
	*/
	
	/*
	var color=["red","green","blue","orange","lime"];
	//$(selector).size() : 선택자로 검색된 태그의 갯수를 반환하는 메소드
	// > jQuery 3.0 이상부터는 size() 메소드 대신 length 프로퍼티를 사용하여 태그의 갯수를 제공받아 사용
	for(i=0;i<$("h3").length;i++) {
		$("h3").eq(i).css("color", color[i]);
	}
	*/
	
	var color=["red","green","blue","orange","lime"];
	//$(selector).each(callback([index][, element])) : 선택자로 검색된 태그의 갯수만큼 
	//콜백함수를 반복적으로 호출하는 메소드 - 명시적 반복
	// > 콜백함수의 매개변수에는 검색된 태그의 첨자와 태그의 Node(Element) 객체가 저장되어 
	//콜백함수에서 사용 가능
	$("h3").each(function(i, element) {
		//$("h3").eq(i).css("color", color[i]);
		
		//선택자 대신 자바스트립트 객체를 사용하여 jQuery 객체를 반환받아 메소드 호출 가능
		//$(element).css("color", color[i]);
		
		// this : 콜백함수에서 처리중인 태그의 Node(Element) 객체를 표현하기 위한 키워드
		// > this : 자바스크립트 객체(Element 객체)
		// $(this) : jQuery 객체
		$(this).css("color", color[i]);
	});
	</script>
</body>
</html>

 


 

 

 


★ 07_css

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style type="text/css">
#displayDiv {
	margin: 20px;
	padding: 10px;
	color: red;
	border: 1px solid blue;
	font-size: 1.5em;
	text-align: center;
}
</style>
</head>
<body>
	<h1>css 메소드</h1>
	<hr>
	<div id="displayDiv">CSS 관련 메소드</div>
	
	<script type="text/javascript">
	//$(selector).css(name) : 선택자로 검색된 태그의 CSS 스타일 속성값을 반환하는 메소드
	//alert("결과 = "+$("#displayDiv").css("margin")); //결과 = 20px
	//alert("결과 = "+$("#displayDiv").css("padding")); //결과 = 10px
	//alert("결과 = "+$("#displayDiv").css("color")); //결과 = rgb(255, 0, 0)
	//alert("결과 = "+$("#displayDiv").css("border")); //결과 = 1px solid rgb(0, 0, 255)
	//alert("결과 = "+$("#displayDiv").css("font-size")); //결과 = 24px
	//CSS 스타일 속성을 자바스크립트의 카멜표기법으로 표현하여 사용 가능
	//alert("결과 = "+$("#displayDiv").css("fontSize")); //결과 = 24px
	//alert("결과 = "+$("#displayDiv").css("text-align")); //결과 = center
	//alert("결과 = "+$("#displayDiv").css("textAlign")); //결과 = center

	/*
	//$(selector).css(name, value) : 선택자로 검색된 태그의 CSS 스타일 속성값을 변경하는 메소드
	$("#displayDiv").css("width", "50%")
	$("#displayDiv").css("position", "absolute");
	$("#displayDiv").css("top", "200px");
	$("#displayDiv").css("left", "100px");
	*/
	
	//검색된 태그의 CSS 스타일 속성값을 여러개 변경할 경우 css 메소드의 매개변수에 JSON 형식으로
	//표현된 Object 객체를 전달하여 Object 객체의 속성값으로 CSS 스타일의 속성값 변경 가능
	$("#displayDiv").css({"width":"50%", "position":"absolute","top":"200px", "left":"100px"});
	</script>
</body>
</html>

 


 

 


08_attr

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>attr 메소드</h1>
	<hr>
	<div id="imgDiv" data-value="KoalaImage">
		<img alt="코알라" src="images/Koala.jpg" width="200" id="img">
	</div>
	
	<script type="text/javascript">
	//$(selector).attr(name) : 선택자로 검색된 태그의 속성값을 반환하는 메소드
	//alert("결과 = "+$("#imgDiv").attr("data-value"));//결과 = KoalaImage
	//alert("결과 = "+$("#img").attr("src"));//결과 = images/Koala.jpg

	/*
	//$(selector).attr(name, value) : 선택자로 검색된 태그의 속성값을 변경하는 메소드
	$("#img").attr("src","images/Penguins.jpg");
	$("#img").attr("width","300");
	*/
	
	//검색된 태그의 속성값을 여러개 변경할 경우 attr 메소드의 매개변수에 JSON 형식으로
	//표현된 Object 객체를 전달하여 Object 객체의 속성값으로 태그의 속성값 변경 가능
	$("#img").attr({"src":"images/Penguins.jpg", "width":"300"});
	</script>
</body>
</html>

 


 


09_text

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>text 메소드</h1>
	<hr>
	<div id="displayDiv"><p>text 메소드와 html 메소드 활용</p></div>
	<hr>
	<h3>jQuery 메소드 연습</h3>	
	<h3>jQuery 메소드 연습</h3>	
	<h3>jQuery 메소드 연습</h3>	
	<h3>jQuery 메소드 연습</h3>	
	<h3>jQuery 메소드 연습</h3>
	
	<script type="text/javascript">
	//$(selector).text() : 선택자로 검색된 태그의 내용을 반환하는 메소드
	// > HTML 태그를 제외한 태그 내용 반환
	//alert("결과 = "+$("#displayDiv").text()); //결과 = text 메소드와 html 메소드 활용
	
	//$(selector).html() : 선택자로 검색된 태그의 내용을 반환하는 메소드
	// > HTML 태그를 포함한 태그 내용 반환
	//alert("결과 = "+$("#displayDiv").html()); //결과 = <p>text 메소드와 html 메소드 활용</p>
	
	
	//$(selector).text(value) : 선택자로 검색된 태그의 내용을 변경하는 메소드
	// => 매개변수로 전달된 변경값에 포함된 HTML 태그가 문자값으로 처리되어 태그 내용 변경 
	//$("#displayDiv").text("<p style='color: red'>text() 메소드에 의해 태그 내용 변경</p>");
	
	//$(selector).html(value) : 선택자로 검색된 태그의 내용을 변경하는 메소드
	// => 매개변수로 전달된 변경값에 포함된 HTML 태그가 HTML 태그으로 처리되어 태그 내용 변경 
	$("#displayDiv").html("<p style='color: red'>html() 메소드에 의해 태그 내용 변경</p>");
	
	//묵시적 반복에 의해 검색된 모든 태그가 동일한 태그 내용으로 변경
	//$("h3").text(jQuery 메소드 연습 - 변경);
	
	/*
	//명시적 반복을 이용하여 검색된 모든 태그를 차례대로 제공받아 서로 다른 태그 내용으로 변경
	$("h3").each(function(i) {
		$(this).text("jQuery 메소드 연습 - "+(i+1));
	});
	*/
	
	//text() 메소드 또는 html() 메소드의 매개변수에 문자값을 반환하는 콜백함수를 전달하여 호출 가능
	// > 콜백함수는 검색된 태그의 갯수만큼 반복 호출 - 명시적 반복
	// > 콜백함수는 반드시 문자값 반환해야 하면 반환되는 문자값으로 검색된 태그의 내용 변경 
	// > 콜백함수의 매개변수에는 검색 태그의 첨자와 태그 내용을 전달받아 콜백함수에서 사용 가능
	$("h3").text(function(index, content) {
		//return "jQuery 메소드 연습 - 변경";
		//return "jQuery 메소드 연습 - "+(index+1);
		return content+" - "+(index+1);
	});
	</script>	
</body>
</html>

 


 


10_element

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>태그 추가와 삭제</h1>
	<hr>
	<div id="imageList1"></div>
	<hr>
	<div id="imageList2"></div>
	<hr>
	<div id="imageList3">
		<img alt="숫자이미지" src="images/1.png" width="200" id="img1">		
		<img alt="숫자이미지" src="images/2.png" width="200" id="img2">		
		<img alt="숫자이미지" src="images/3.png" width="200" id="img3">		
	</div>
	
	<script type="text/javascript">
	//$(tag) : jQyery 함수의 매개변수로 HTML 태그를 전달받으면 자바스크립트의 Node(Element) 
	//객체를 생성하여 제공받아 jQuery 객체로 반환 - 태그 생성
	
	//$(selector).appendTo(targetSelector) : 선택자로 태그를 검색하여 타겟 선택자로 검색된 태그의 마지막 자식 태그로 이동하는 메소드 
	// > 기존 태그를 검색하여 이동하는 메소드지만 태그를 생성하여 이동 처리 가능
	$("<img src='images/1.png' width='200'>").appendTo("#imageList1");
	$("<img src='images/2.png' width='200'>").appendTo("#imageList1");
	
	//$(selector).prependTo(targetSelector) : 선택자로 태그를 검색하여 타겟 선택자로 검색된 태그의 첫번째 자식 태그로 이동하는 메소드 
	// > 기존 태그를 검색하여 이동하는 메소드지만 태그를 생성하여 이동 처리 가능
	$("<img src='images/3.png' width='200'>").prependTo("#imageList1");
	$("<img src='images/4.png' width='200'>").prependTo("#imageList1");
	
	//$(selector).insertBefore(targetSelector) : 선택자로 태그를 검색하여 타겟 선택자로 검색된 태그의 이전 태그로 이동하는 메소드 
	// > 기존 태그를 검색하여 이동하는 메소드지만 태그를 생성하여 이동 처리 가능
	$("<img src='images/5.png' width='200'>").insertBefore("#imageList1 img[src='images/1.png']");
	
	//$(selector).insertAfter(targetSelector) : 선택자로 태그를 검색하여 타겟 선택자로 검색된 태그의 다음 태그로 이동하는 메소드 
	// > 기존 태그를 검색하여 이동하는 메소드지만 태그를 생성하여 이동 처리 가능
	$("<img src='images/6.png' width='200'>").insertAfter("#imageList1 img[src='images/1.png']");
	

	//$(selector).append(newItem) : 선택자로 검색된 태그의 *마지막 자식태그로 새로운 태그를 *추가(삽입)하는 메소드
	$("#imageList2").append("<img src='images/1.png' width='200'>");
	$("#imageList2").append("<img src='images/2.png' width='200'>");
	
	//$(selector).prepend(newItem) : 선택자로 검색된 태그의 *첫번째 자식태그로 새로운 태그를 *추가(삽입)하는 메소드
	$("#imageList2").prepend("<img src='images/3.png' width='200'>");
	$("#imageList2").prepend("<img src='images/4.png' width='200'>");
		
	//$(selector).before(newItem) : 선택자로 검색된 태그의 이전 태그로 새로운 태그를 추가(삽입)하는 메소드
	$("#imageList2 img[src='images/1.png']").before("<img src='images/5.png' width='200'>");

	//$(selector).after(newItem) : 선택자로 검색된 태그의 다음 태그로 새로운 태그를 추가(삽입)하는 메소드
	$("#imageList2").find("img[src='images/1.png']").after("<img src='images/6.png' width='200'>");
	
	//$(selector).remove([selector]) : 선택자로 검색된 태그를 삭제하는 메소드
	// > remove() 메소드의 매개변수에 선택자를 전달하여 특정 태그만을 선택하여 삭제 가능
	//$("#imageList3").remove();//부모 태그를 삭제하면 자식태그도 삭제
	
	//$("#imageList3").children(":eq(1)").remove();//두번째 이미지 삭제
	//$("#imageList3").children().eq(1).remove();
	//$("#imageList3").children().remove(":eq(1)");
	$("#img2").remove();	
	</script>
</body>
</html>

 


 


11_element_move

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>태그 이동</h1>
	<hr>
	<div id="imageList"></div>
	
	<script type="text/javascript">
	for(i=0;i<10;i++) {
		//선택자로 검색된 태그에 새로운 태그를 추가(삽입)하는 메소드
		// > append(), prepend(), before(), after()
		$("#imageList").append("<img src='images/"+i+".png' width='150'>");
	}
	
	setInterval(function() {
		//선택자로 검색된 태그를 타겟 태그로 이동하는 메소드
		// > appendTo(), prependTo(), insertBefore(), insertAfter()
		$("#imageList").children(":eq(0)").appendTo("#imageList");
	}, 1000);
	</script>
</body>
</html>

 


 

숫자들이 왼쪽방향으로 이동함.


12_event

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>jQuery Event Handle</h1>
	<hr>
	<button type="button" id="btn">버튼을 눌러보세요.</button>
	<div id="displayDiv"></div>
	
	<script type="text/javascript">
	//$(selector).click(callback) : 선택자로 검색된 태그에서 click 이벤트가 발생될 경우 
	// 콜백함수(이벤트 처리 함수)를 호출하는 메소드
	$("#btn").click(function() {
		$("#displayDiv").text("이벤트 처리 명령 실행");
	});
	</script>
</body>
</html>