반응형
1. jQuery 라이브러리
1) jQuery 개요
- Vanilla JS (바닐라 자바스크립트)
- 순수하게 자바스크립트만 이용해서 동적인 페이지 만드는 것
- 자바스트립트 라이브러리 & 프레임워크
- 기능들을 쉽게 구현할 수 있도록 자바스크립트는 라이브러리나 프레임워크를 제공함
- 자바스크립트 라이브러리
- 단순히 필요한 기능들을 제공
- 대표적 예 : 제이쿼리(디자인 만들때 사용), 리액트(프론트앤드개발 시 사용)
- 자바스크립트 프레임워크
- 기능을 포함해 프로그램을 쉽게 개발하기 위한 전체적인 환경 제공
- 대표적 예 : Angular.js
- CSS 프레임워크
- 대표적 예 : 부트스트랩
- ( 모든 디자인들이 다 완성되었으니, 가져다 쓰면 페이지 구현 가능 )
2) jQuery
- 자바스크립트 라이브러리
- Write less, do more (적게 작성하고, 보다 많이 한다. )
- 자바스크립트 라이브러리 객체
- 이벤트를 통한 Element 객체를 조작하기 위해 많이 사용
- 동적인 기능 구현을 위한 Ajax 기능 구현
3) jQuery 라이브러리 사용법
- <script> 태그를 사용하여 jQuery 라이브러리 파일을 웹문서에 포함해야만 jQuery 관련 기능 사용 가능
- https://www.jquery.com 사이트 >> https://jquery.com/download/ 참조
- 자바스크립트와 마찬가지로 웹브라우저마다 실행 여부가 다름
- 1.X : IE9 이하에서 실행 가능
- 2.X or 3.X : IE10 이상에서 실행 가능
방법1.
- jQuery 라이브러리 파일을 다운로드 받아 현재 서버의 자원으로 저장하여 웹문서에 포함
- 미압축파일(uncompressed)
- 라이브러리 파일 변경 가능
- ex)Download the uncompressed, development jQuery 3.6.1
- 압축파일(minified)
- 라이브러리 파일 변경 불가능
- ex)Download the compressed, production jQuery 3.6.1
- 공백, 불필요한 것들 등 압축되었다 - 압축된 파일이 가독성이 훨씬 좋음
- 파일 다운 받은 후 이클립스에 포함시키기
- Download the compressed, production jQuery 3.6.1 다운
- 마우스 오른쪽 버튼 클릭 >> 다름이름으로 링크 저장
<script type="text/javascript" src="jquery-3.6.1.min.js"></script>
방법2.
- CDN 서버에 저장된 jQuery 라이브러리 파일을 제공받아 웹문서에 포함
CDN Server (Contents Delivery Network Server) : 대용량의 컨텐츠를 빠르고 안정적으로 제공하는 서버
1. 인터넷이 안될 때 방법
- 제이쿼리 사이트 >> Download >> Download the compressed, production jQuery 3.6.1 클릭 >> URL주소 복사
<script type="text/javascript" src="<https://code.jquery.com/jquery-3.6.1.min.js>"></script>
2. (구글) CDN 서버가 제공하는 jQuery 라이브러리 방법
<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js>"></script>
3. (cdnjs) 자바스크립트 라이브러리 모음 사이트
- https://cdnjs.com/libraries/jquery
- 여기서 jQuery 찾아서 사용 가능
4) jQuery 객체 생성 후 메소드 호출법
- 모든 태그가 DOM Tree에 Element객체로 배치된 후 jQuery 라이브러리 사용 가능
jquery 문법
//CSS 선택자로 태그(엘리먼트)를 검색하여 jQuery객체를 생성하고 메소드를 호출하여 필요한 기능 구현하기
//jQuery객체생성하는법 - jQuery 함수명 대신 $ 기호를 사용하여 표현 가능
jQuery({Selector|Obeject})
$({Selector|Obeject})
//jQuery객체생성과 동시에 메소드호출하는법 - jQuery 함수명 대신 $ 기호를 사용하여 표현 가능 -
jQuery({Selector|Obeject}).method(value,value,...);
$({Selector|Obeject}).method(value,value,...);01_hello_jquery.html
방법1. 비권장
: window객체(Dom Tree)가 완성된 후 호출되어 실행될 이벤트 처리 함수 등록
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
//단점 : 이벤트처리함수 1개만 등록 가능
//=> window객체의 완성 = 브라우저가 가진 모든 요소들 완성 -> 가독성 떨어짐 왜??
//=> document 객체만 완성되면 되는데, screen객체, navigator객체, location객체 .. 모두
//완성되었기 때문 - overwrite되어 아래 명령 미실행
window.onload= function() {
alert("window.onload 이벤트에 의해 실행되는 명령-1");
jQuery(document).ready(function() {
jQuery("p").css("background","black");
});
}
//아래 명령만 실행됨
window.onload= function() {
alert("window.onload 이벤트에 의해 실행되는 명령-2");
//제이쿼리 명령 작성은 가능하나.. 이벤트처리함수 딱 1개만 등록 가능함
jQuery(document).ready(function() {
jQuery("p").css("color","red");
});
}
</script>
</head>
<body>
<h1>jQuery 사용법</h1>
<hr>
<p>Hello, jQuery!!!</p>
<p>Hello, jQuery!!!</p>
<p>Hello, jQuery!!!</p>
</body>
</html>
방법2. 비권장
: document객체가 준비된 상태된 후 호출되어 실행될 이벤트 처리 함수 등록
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
//jQuery( document ) .ready(callback) : document 객체가 준비(완성)되면 콜백함수를 호출하는 메소드
//=> document 객체가 준비된 상태 = DOM Tree가 완성된 상태
//=> 그러므로 콜백함수에서 jQuery 라이브러리 사용 가능
//장점 : 메소드이므로 여러번 호출 가능 , window.onload 이벤트 속성보다 가독성이 좋음
//단점 : 반드시 document 객체가 준비된 상태여야만 원하는 기능 구현 가능
//명령실행됨
jQuery(document).ready(function() {
alert("document 객체가 준비된 상태인 경우 실행되는 명령-1");
});
//명령실행됨
$(document).ready(function() {
alert("document 객체가 준비된 상태인 경우 실행되는 명령-2");
});
//명령실행됨
jQuery(document).ready(function() {
jQuery("p").css("color","red");
});
//명령실행됨
$(document).ready(function() {
$("p").css("background","gray");
});
</script>
</head>
<body>
<h1>jQuery 사용법</h1>
<hr>
<p>hello, jQuery!!!</p>
<p>hello, jQuery!!!</p>
<p>hello, jQuery!!!</p>
</body>
</html>
방법3. 권장
: script 태그를 boby 태그의 마지막 자식태그로 이용 = document객체가 준비(완성)된 상태
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery 사용법</h1>
<hr>
<p>Hello, jQuery!!!</p>
<p>Hello, jQuery!!!</p>
<p>Hello, jQuery!!!</p>
<script type="text/javascript">
//script 태그를 body 태그의 마지막 자식태그로 선언하면 document 객체가 준비(완성)된
//상태이므로 jQuery(document).ready() 메소드의 콜백함수를 이용하지 않아도 jQuery
//라이브러리 사용 가능
//jQuery("p").css("color","red");
//jQuery 함수명 대신 $ 기호를 사용하여 표현 가능
$("p").css("color","red");
</script>
</body>
</html>
2. 선택자(Selector)
1) 태그, 클래스, 아이디 선택자
02_selector1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/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">
//🔥주의: "" 작성하지 않으면 자바스크립트 객체로 인식함
//$(h2).css("background","yellow"); //error
//=> h2 라는 자바스크립트 객체는 없음
//=> document 객체, screen객체.. 등 이라면 모를까..
//1.
//🖤태그 선택자
// => 태그명으로 태그를 검색하여 제공
// => 검색된 태그로 jQuery 객체를 생성한 후 메소드 호출
// => 다수의 태그가 검색된 경우 묵시적 반복에 의해 다수의 jQuery 객체가 생성되어 메소드 호출
$("h2").css("background","yellow");
//2.
//🖤클래스 선택자
// => 태그의 class 속성값으로 태그를 검색하여 제공
// => 태그 선택자와 구분하기 위해 . 으로 시작
$(".item").css("background","orange");
//3.
//🖤아이디 선택자
// => 태그의 id 속성값으로 태그를 검색하여 제공
// => 태그 선택자와 구분하기 위해 # 으로 시작
$("#tag").css("color","green");
//4.
//🖤메소드 체인(Method Chain)
// => 하나의 jQuery 객체로 서로 다른 메소드를 순차적으로 호출 가능
$("p").css("background", "pink").text("태그내용변경");
//5.
//🖤jQuery 객체로 메소드를 호출할 때 매개변수의 전달값을 Object 객체로 전달 가능
// => Object 객체의 요소를 이용하여 메소드에 필요한 다수의 값을 전달
//$("p").css("font-size", "30px").css("color","red");
$("p").css({"font-size":"30px","color":"red"});
</script>
</body>
</html>
2) 자식, 후손 선택자
03_selector2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/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">
//1.
//🖤자식 선택자
// => 검색된 부모태그에서 첫번째 깊이의 자식태그를 검색하여 제공
//$("#subject > p").css({"font-size":"25px","font-weight":"bold"});
//👑$(selector).children([selector])
// => 선택자로 검색된 부모태그에서 첫번째 깊이의 자식태그를 검색하여
// => jQuery 객체로 반환하는 메소드
// => children() 메소드의 매개변수에 선택자를 전달하지 않은 경우 모든 자식태그 검색하여 반환
$("#subject").children("p").css({"font-size":"25px","font-weight":"bold"});
//2.
//🖤후손 선택자
// => 검색된 부모태그에서 모든 깊이의 후손태그를 검색하여 제공
//$("#subject p").css("color","green");
//👑$(selector).find(selector)
// => 선택자로 검색된 부모태그에서 모든 깊이의 후손태그를
// => 검색하여 jQuery 객체로 반환하는 메소드
$("#subject").find("p").css("color","green");
</script>
</body>
</html>
3) 필터, 가상 선택자
04_selector3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/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");
//1.
//🖤필터 선택자
// => 선택자로 검색된 다수의 태그 중 클래스 선택자로 특정 태그를 검색하여 제공
//$("h2.normal").css("background","green");
//👑$(selector).filter(selector)
// => 선택자로 검색된 다수의 태그에서 특정 태그를 검색하여
// => jQuery 객체로 반환하는 메소드
// => filter() 메소드의 매개변수에는 모든 선택자를 전달하여 태그 검색 가능
//$("h2").filter(".normal").css("background","green");
$(".normal").filter("h2").css("background","green");
$("h3").filter(".normal").css("background","silver");
//👑$(selector).not(selector)
// => 선택자로 검색된 다수의 태그에서 특정 태그를 제외한 태그를
// => 검색하여 jQuery 객체로 반환하는 메소드
$("h3").not(".normal").css("background","gold");
$("ul li").css("color","orange");
//2-1.
//🖤가상 선택자
// => 상태에 의해 태그를 검색하여 제공
//🖤:nth-child(X)
// => X번째에 위치한 태그를 제공하기 위한 가상선택자
//$("ul li:nth-child(3)").css("color","red");
//$("ul li").filter(":nth-child(3)").css("color","red");
$("ul").find("li").filter(":nth-child(3)").css("color","red");
//🖤:eq(Index)
// => 첨자(Index : 0부터 1씩 증가되는 정수값)위치의 태그를 제공하기 위한 가상선택자
//$("ul li:eq(3)").css("color","purple");
//$("ul li").filter(":eq(3)").css("color","purple");
//👑$(selector).eq(Index)
// => 선택자로 검색된 태그 중 첨자위치의 태그를 검색하여 jQuery 객체로 반환하는 메소드
$("ul li").eq(3).css("color","purple");
//2-2.
//$("ul li:nth-child(1)").css("color","green");
//$("ul li:eq(0)").css("color","green");
//$("ul li").eq(0).css("color","green");
//👑$(selector).first()
// => 선택자로 검색된 태그 중 첫번째 태그를 검색하여 jQuery 객체로 반환하는 메소드
$("ul li").first().css("color","green");
//$("ul li:nth-child(5)").css("color","blue");
//$("ul li:eq(4)").css("color","blue");
//$("ul li").eq(4).css("color","blue");
//$("ul li:eq(-1)").css("color","blue");//첨자위치를 [-1]로 설정하면 마지막 위치의 태그를 검색하여 제공
//$("ul li").eq(-1).css("color","blue");
//👑$(selector).last()
// => 선택자로 검색된 태그 중 마지막 태그를 검색하여 jQuery 객체로 반환하는 메소드
$("ul li").last().css("color","blue");
//2-3.
//👑$(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>
4) 속성 선택자
05_selector4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/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">
//1.
//🖤속성 선택자
// => 태그의 속성 또는 속성값 비교하여 태그를 검색하여 제공
$("input[type]").css("border","2px solid green");
$("input[type='password']").css("color","red");
$("input[name='email']").css("color","blue");
</script>
</body>
</html>
3. 기본메소드
1) each 메소드
06_each.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/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">
//1.
//👑선택자에 의해 다수의 태그가 검색되면 태그 갯수만큼 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");
*/
//2.
/*
var color=["red","green","blue","orange","lime"];
//$(selector).size() : 선택자로 검색된 태그의 갯수를 반환하는 메소드
// => jQuery 3.0 이상부터는 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]))
// => 선택자로 검색된 태그의 갯수만큼
// => 콜백함수를 반복적으로 호출하는 메소드 - 명시적 반복
// => 콜백함수의 매개변수에는 검색되어 처리될 태그의 첨자와 태그의 Element 객체가
// => 자동으로 저장되어 제공
$("h3").each(function(i, element) {
//$("h3").eq(i).css("color",color[i]);
//선택자 대신 자바스크립트 객체를 사용하여 jQuery 객체를 반환받아 메소드 호출 가능
//$(element).css("color",color[i]);
//👑 => this : 콜백함수에서 처리중인 태그의 Element 객체를 표현하기 위한 키워드
//👑 => this : Element 객체, $(this) : jQuery 객체
$(this).css("color",color[i]);
});
</script>
</body>
</html>
2) css 메소드
07_css.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/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 객체를 전달해 객체의 요소값으로 CSS 스타일 속성의 속성값 변경 가능
$("#displayDiv").css({"width":"50%","position":"absolute","top":"200px","left":"100px"});
</script>
</body>
</html>
3) attr 메소드
08_attr.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/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 객체를 전달해 객체의 요소값으로 태그 속성의 속성값 변경 가능
$("#img").attr({"src":"images/Penguins.jpg","width":"300"});
</script>
</body>
</html>
4) text 메소드 VS html 메소드
09_text.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h1>text 메소드와 html 메소드</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>
//1.
//👑$(selector).text(value) : 검색 태그의 태그내용을 변경하는 메소드
// => 변경될 태그내용에 HTML 태그가 포함된 경우 일반 문자값으로 처리
//$("#displayDiv").text("<p style='color: red;'>text 메소드에 의해 변경된 내용</p>");
//2.
//👑$(selector).html(value) : 검색 태그의 태그내용을 변경하는 메소드
// => 변경될 태그내용에 HTML 태그가 포함된 경우 HTML 태그로 처리
$("#displayDiv").html("<p style='color: red;'>text 메소드에 의해 변경된 내용</p>");
//묵시적 반복에 의해 검색된 모든 태그가 동일한 태그내용으로 변경
//$("h3").text("jQuery 메소드 연습 - 변경");
//3.
/*
//명시적 반복에 의해 검색된 모든 태그를 차례대로 제공받아 서로 다른 태그내용으로 변경
$("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>
5) 태그(Element 객체)의 추가와 삭제
10_element.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h1>태그(Element 객체)의 추가와 삭제</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)
// => HTML 태그를 전달받아 jQuery 객체를 반환 - 태그(Elememt 객체) 생성
// => [$변수명] 형식으로 jQuery 객체를 저장한 변수를 표현 - jQuery 메소드 호출
var $image=$("<img src='images/1.png'width='200'>");
//1.
//🏀$(selector).appendTo(targetSelector)
// => 선택자로 태그를 검색하여 타겟 선택자 태그의 마지막 자식 태그로 추가하는 메소드
// => 기존 태그를 검색하여 이동하거나 새로운 태그를 생성하여 이동
$image.appendTo($("#imageList1"));
$("<img src='images/2.png'width='200'>").appendTo($("#imageList1"));
//2.
//🏀$(selector).prependTo(targetSelector)
// => 선택자로 태그를 검색하여 타겟 선택자 태그의 첫번째 자식 태그로 추가하는 메소드
// => 기존 태그를 검색하여 이동하거나 새로운 태그를 생성하여 이동
$("<img src='images/3.png'width='200'>").prependTo($("#imageList1"));
$("<img src='images/4.png'width='200'>").prependTo($("#imageList1"));
//3.
//🏀$(selector).insertBefore(targetSelector)
// => 선택자로 태그를 검색하여 타겟 선택자 태그의 이전 태그로 추가하는 메소드
// => 기존 태그를 검색하여 이동하거나 새로운 태그를 생성하여 이동
$("<img src='images/5.png'width='200'>").insertBefore($("#imageList1 img[src='images/1.png']"));
//4.
//🏀$(selector).insertAfter(targetSelector)
// => 선택자로 태그를 검색하여 타겟 선택자 태그의 다음 태그로 추가하는 메소드
// => 기존 태그를 검색하여 이동하거나 새로운 태그를 생성하여 이동
$("<img src='images/6.png'width='200'>").insertAfter($("#imageList1 img[src='images/1.png']"));
//5.
//🏀$(selector).append(newItem)
// => 매개변수로 전달된 태그를 생성하여 선택자로 태그를 검색해 마지막 자식 태그로 추가하는 메소드
$("#imageList2").append("<img src='images/1.png'width='200'>");
$("#imageList2").append("<img src='images/2.png'width='200'>");
//6.
//🏀$(selector).prepend(newItem)
// => 매개변수로 전달된 태그를 생성하여 선택자로 태그를 검색해 첫번째 자식 태그로 추가하는 메소드
$("#imageList2").prepend("<img src='images/3.png'width='200'>");
$("#imageList2").prepend("<img src='images/4.png'width='200'>");
//7.
//🏀$(selector).before(newItem)
// => 매개변수로 전달된 태그를 생성하여 선택자로 태그를 검색해 이전 태그로 추가하는 메소드
$("#imageList2 img[src='images/1.png']").before("<img src='images/5.png'width='200'>");
//8.
//🏀$(selector).after(newItem)
// => 매개변수로 전달된 태그를 생성하여 선택자로 태그를 검색해 이전 태그로 추가하는 메소드
$("#imageList2 img[src='images/1.png']").after("<img src='images/6.png'width='200'>");
//9.
//🏀$(selector).remove([selector])
// => 선택자로 검색된 태그(Element 객체)를 삭제하는 메소드
// => remove 메소드의 매개변수에 선택자를 전달하여 특정 태그만 선택하여 삭제 가능
//$("#imageList3").remove();//선택된 태그의 후손태그도 삭제
//$("#imageList3").children(":eq(1)").remove(); //선택된 태그의 자식 중 첫번째만 삭제 - 밑에 3개 다 같은의미
//$("#imageList3").children().eq(1).remove();
//$("#imageList3").children().remove(":eq(1)");
$("#img2").remove();
</script>
</body>
</html>
6) 태그(Element 객체)의 이동
11_move.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h1>태그(Element 객체)의 이동</h1>
<hr>
<div id="imageList"></div>
<script type="text/javascript">
//🏀새로운 태그(Element 객체)를 생성하여 선택자로 검색된 태그에 추가하는 메소드
// => append, prepend, before, after
for(i=0;i<=9;i++) {
$("#imageList").append("<img src='images/"+i+".png' width='150'>");
}
//🏀선택자로 검색된 태그를 타겟 선택자로 검색된 태그에 이동하는 메소드
// => appendTo, prependTo, insertBefore, insertAfter
// => 새로운 태그를 생성하여 이동 가능
setInterval(function() {
$("#imageList").children(":eq(0)").appendTo($("#imageList"));
}, 1000);
</script>
</body>
</html>
반응형
'web > javascript' 카테고리의 다른 글
| [js - ajax] 14. Asynchronus + Javascript (0) | 2024.05.20 |
|---|---|
| [js - jquery] 13. jqeury 이벤트 기능 | 에니메이션 기능 (0) | 2024.05.20 |
| [js] 11. 자바스크립트 쿠키(Cookie) 사용법 (0) | 2024.05.19 |
| [js] 10. 자바스크립트 예외처리(Exception Handle) (0) | 2024.05.18 |
| [js] 9. 이벤트 처리 함수 | this 키워드 | 기본 이벤트 | 이벤트전달 | EventListener | DHTML | form태그이벤트 (0) | 2024.05.18 |
