[송규남의 IT다이어리] 제이쿼리(jQuery) 여덟번째 이야기
노용철
view : 682
[송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 8
안녕하세요. 중앙HTA의 송규남 강사입니다.
지난 시간에 이어 jQuery 여덟번째 강의를 시작해보겠습니다.
지난 시간에는 animate()를 사용한 이미지 슬라이드 기능을 만들어 봤는데요.
이번 jQuery 강의에서는 엘리먼트들의 조작방법에 대해서 알아보겠습니다.
먼저 append 메소드에 대해서 알아보겠습니다.
append는 요소의 마지막에 새로운 요소를 자식요소로 추가하는 메소드인데요~
예를 들어 설명드리겠습니다.
아래와 같은 html 문서를 만듭니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
//imgList의 끝에 img 생성해서 붙이기
$("#imgList").append("<img src='images/001.jpg'/>");
});
});
</script>
</head>
<body>
<input type="button" value="이미지추가" id="btn1"/>
<div id="imgList">
<h1>영화포스터</h1>
</div>
</body>
</html>
위의 예제는 btn1을 클릭하면 001.jpg 이미지가 계속 생성되어서 div인 imgList에 추가됩니다.
여기에 삭제버튼을 하나 더 추가합니다.
<body>
<input type="button" vlaue="이미지추가" id="btn1"/>
<input type="button" vlaue="이미지삭제" id="btn2"/>
삭제버튼을 눌렀을때 맨 마지막 이미지를 삭제해 봅니다.
$(document).ready(function(){
$("#btn1").click(function(){
//imgList의 끝에 img 생성해서 붙이기
$("imgList").append("<img src='images/001.jpg'/>");
});
$("#btn2").click(function(){
//imgList의 자식img중 마지막 요소 제거하기
$("#imgList img:last-child").remove();
});
html파일과 같은 경로에 images 폴더에 아래와 같은 이미지들이 있습니다. (확장자는 png입니다.)
이미지 생성코드를 아래처럼 수정해 봅니다.
$(document).ready(function(){
var i=1;
$("#btn1").click(function(){
if(i>20) return;
//imgList의 끝에 img 생성해서 붙이기
$("#imgList").append("<img src='images/" + i +".png'/>");
i++;
});
$("#btn2").click(function(){
//imgList의 자식img중 마지막 요소 제거하기
$("#imgList img:last-child").remove();
});
i 변수가 1부터 1씩 증가되는 파일명으로 생성되므로 아래처럼 추가버튼을 누르면 해당 이미지가 생성되어 붙여지고
삭제 버튼을 누르면 맨 마지막 이미지부터 삭제됩니다.
append와 비슷한 기능의 메소드로 appendTo라는 메소드가 있습니다.
append는 아래처럼 ~ 부모객체에 자식객체가 추가되는 것입니다.
$("부모요소").append("추가될 자식요소");
appendTo는 $("추가될 자식요소").appendTo("부모요소");과 같이 사용하며 ~자식요소가 부모요소에 추가됩니다.
두개는 결국 같은 기능을 수행하지만 차이점은 각각 리턴되는 객체가 다릅니다.
append는 부모 요소객체를 리턴하며 appendTo는 추가되는 자식 요소개체를 리턴합니다.
아래의 예를 들어 다시한번 설명드릴께요.
html 코드를 아래처럼 수정합니다.
<body>
<div id="top"></div>
<input type="button" value="이미지추가" id="btn1"/>
<input type="button" value="이미지삭제" id="btn2"/>
<input type="button" value="링크붙이기" id="btn3"/>
<div id="imgList">
<h1>영화포스터</h1>
</div>
<p>
내용1...
</p>
<p>
내용2...
</p>
→ btn3을 클릭하면 P태그 뒤에 링크를 붙여서 top으로 이동되게 합니다.
jQuery에 아래와 같은 코드를 추가합니다.
$("#btn4").click(function(){
var aa=$<"<div><a href='#top'>맨위로</a></div>");
$("p").append("<div><a href='#top'>맨위로</a></div>");
});
→ p의 끝에 div가 붙었습니다. append에서 리턴되는 객체는 p요소입니다.
jQuery의 메소드는 체인형태라 아래와 같은 형태로 사용이 가능합니다.
$("p").append("<div><a href='#top'>맨위로</a></div>")
.css("backgroundColor","red");
→ append 메소드는 p객체 요소를 리턴하므로 p의 배경색상이 빨간 색상이 됩니다.
이번에는 appendTo 메소드를 사용해서 아래처럼 변경해봅니다.
$("#btn4").click(function(){
var aa=$("<div><a href='#top'>맨위로</a></div>");
//$("p").append("<div><a href='#top'>맨위로</a></div>").css("backgroundColor","red");
//div를 p의 뒤에 붙이기
$("div><a href='#top'>맨위로</a></div>")
.appendTo("p")
.css("backgroundColor","red");
});
appendTo에서 리턴된 요소가 div 요소이므로 css가 div에 적용됩니다.
prepend 메소드와 prependTo 메소드는 요소의 앞에 추가하는 메소드입니다.
prepend와 prependTo의 차이는 append와 appendTo의 차이와 같습니다.
즉, 리턴객체가 달라지는 것이지요.
한번 사용해 볼까요? 아래처럼 버튼을 추가합니다.
<input type="button" value="제목추가" id="btn4"/>
<input type="button" value="이미지붙이기" id="btn5"/>
이벤트 핸들러를 jQuery 코드안에 넣습니다.
$("btn4").click(function(){
//imgList의 앞에 h1 생성해서 붙이기
$("#imgList").prepend("<h1>최근인기상영작</h1>");
});
$("#btn5").click(function(){
//img를 p앞에 붙이기
$("<img src='images/002.jpg'/>").prependTo("p")
});
btn5를 클릭하면 img가 p요소 앞에 동적으로 생성되어서 붙습니다.
그런데 생성되어 보여질때 이펙트를 주고 싶다면 어떻게 해야 할까요?
그렇다면 prependTo 메소드를 사용하는게 편하겠죠?
아래처럼 코드를 수정해 보세요.
$("#btn5").click(function(){
$("<img src='images/002.jpg'/>")
.prependTo("p").hide().fadeIn(1000);
});
→ 새롭게 이미지가 생성될 때 이펙트가 적용되어서 나타나죠?
이번 jQuery 강의에서는 html 요소의 동적인 생성과 삭제에 대해서 알아보았습니다.
여러분들도 어렵지 않게 따라 오셨을거라 생각합니다^^
그럼 이번 강의는 여기서 마무리하고 다음 강의때 찾아뵙겠습니다.
저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>
