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>