1. 문서객체추가/이동메서드
- 문서객체를 동적으로 생성한 것을 추가할 땐 추가메서드가 되고, 기존에 있는 메서드를 선택하면 이동하게 되는 메서드입니다.
1) 문서객체선택을 기준으로 매개변수를 추가하는 유형
| 메서드명 | 사용법 | 설명 |
| append() | $('A').append(B); | A의 마지막 자손으로 B를 추가하는 메서드 |
| prepend() | $('A').prepend(B); | A의 첫번째 자손으로 B를 추가하는 메서드 |
| after() | $('A').after(B); | A의 동생으로 B를 추가하는 메서드 |
| before() | $('A').before(B); | A의 형으로 B를 추가하는 메서드 |
** 사용될 이미지
출처 : https://icon-icons.com/icon/fish-movie/35099
Fish, movie Icon in Multiple Smileys Icons
Fish, movie Icon in Multiple Smileys Icons ✓ Find the perfect icon for Your Project and download them in SVG, PNG, ICO or ICNS, its Free!
icon-icons.com
## HTML동적생성 문법
$('<태그요소명>');- 자바스크립트와 달리 제이쿼리는 동적생성하는 방법도 매우 간단합니다.
- 따옴표 내부에 태그를 그대로 작성하면 됩니다.
## 코드 보기
- 어항이라는 클래스 [ fishbowl ]이 있다고 보겠습니다.
- 그 내부에 [ fish01.png ]가 미리 들어가 있습니다. 버튼들을 클릭하면 [ fish02.jpg ] 이미지를 추가해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - HTML요소관련 메서드</title>
<style>
.fishbowl{
width: 400px; height: 400px;
border: 3px solid black;
padding: 30px; box-sizing: border-box;
border-radius: 200px;
background-color: azure;
}
.fishbowl img{ display: block; }
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
//새로운 물고기 동적 생성
var newFish = $('<img>');
newFish.attr('src','fish02.png');
$('.btn01').click(function(){
$('.fishbowl').append(newFish);
});
$('.btn02').click(function(){
$('.fishbowl').prepend(newFish);
});
$('.btn03').click(function(){
$('.fishbowl').after(newFish);
});
$('.btn04').click(function(){
$('.fishbowl').before(newFish);
});
});
</script>
</head>
<body>
<div class="fishbowl">
<img src="fish01.png" alt="기존 물고기">
</div>
<hr>
<button class="btn01">append()</button>
<button class="btn02">prepend()</button>
<button class="btn03">after()</button>
<button class="btn04">before()</button>
</body>
</html>- click() 메서드는 클릭이벤트를 지원하는 메서드입니다.
- 각각의 버튼들을 클릭하면 어디로 새로운 물고기가 추가되는지 확인해보겠습니다.
## 결과보기
- append()버튼을 클릭하면 어항(fishbowl) 내부로 들어가는데 기존 노란 물고기 아래로 들어 갑니다.
- prepend()버튼을 클릭하면 어항(fishbowl) 내부로 들어가는데 기존 노란 물고기 위로 들어 갑니다.
- after()버튼을 클릭하면 어항(fishbowl)의 밖으로 나가게 되는데 아래로 들어 갑니다.
- before()버튼을 클릭하면 어항(fishbowl)의 밖으로 나가게 되는데 위로 들어 갑니다.
2) 매개변수로 문서객체가 추가되는 유형
| 메서드명 | 사용법 | 설명 |
| appendTo() | $('A').appendTo(B); | B의 마지막 자손으로 A를 추가하는 메서드 |
| prependTo() | $('A').prependTo(B); | B의 첫번째 자손으로 A를 추가하는 메서드 |
| insertAfter() | $('A').insertAfter(B); | B의 동생으로 A를 추가하는 메서드 |
| insertBefore() | $('A').insertBefore(B); | B의 형으로 A를 추가하는 메서드 |
## 코드보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - HTML요소관련 메서드</title>
<style>
.fishbowl{
width: 400px; height: 400px;
border: 3px solid black;
padding: 30px; box-sizing: border-box;
border-radius: 200px;
background-color: azure;
}
.fishbowl img{ display: block; }
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
//새로운 물고기 동적 생성
var newFish = $('<img>');
newFish.attr('src','fish02.png');
$('.btn01').click(function(){
newFish.appendTo('.fishbowl');
});
$('.btn02').click(function(){
newFish.prependTo('.fishbowl');
});
$('.btn03').click(function(){
newFish.insertAfter('.fishbowl');
});
$('.btn04').click(function(){
newFish.insertBefore('.fishbowl');
});
});
</script>
</head>
<body>
<div class="fishbowl">
<img src="fish01.png" alt="기존 물고기">
</div>
<hr>
<button class="btn01">appendTo()</button>
<button class="btn02">prependTo()</button>
<button class="btn03">insertAfter()</button>
<button class="btn04">insertBefore()</button>
</body>
</html>
## 결과보기
- 코드만 바뀌었을 뿐 결과는 같습니다.
- 메서드까지 비슷해서 헷갈릴 수 있지만 써보고 안되면 다른 메서드를 작성하면 됩니다.
2. 문서객체 복제메서드 - clone()
- 문서객체를 복제하는 메서드는 clone()메서드입니다. 매개변수는 없습니다.
## 문법
$('문서객체선택').clone();
## 코드 보기
- 1초마다 [ fish02.png ]를 한개씩 계속 복제해서 추가해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - HTML요소관련 메서드</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
//1초마다 명령을 실행할 함수
setInterval(function(){
$('img').first().clone().appendTo('body');
},1000);
});
</script>
</head>
<body>
<img src="fish02.png" alt="물고기이미지">
</body>
</html>- setInterval() 함수는 시간마다 콜백함수의 명령을 계속 실행하는 자바스크립트 함수입니다.
- 그리고 자바스크립트에서는 시간이 밀리초 단위라 1초가 1000입니다.
- 복제되면 이미지가 많아져서 문서객체 선택 뒤에 first() 메서드를 붙여 첫번째 요소만 복제합니다.
## 결과보기
- 캡쳐하는 순간때문에 2개부터 시작했는데 원래는 1개가 있고 1초마다 한개가 추가됩니다.
- 추가가 1초마다 잘 되는 것을 확인할 수 있습니다.
3. 문서객체 삭제 메서드 - remove()와 empty()
- 문서객체를 삭제하는 것은 크게 2가지가 있습니다.
- remove() 메서드는 선택된 문서객체 자체를 삭제하는 메서드 입니다.
- empty() 메서드는 선택된 문서객체 내부의 자손/후손을 삭제하는 메서드입니다.
- 둘다 매개변수는 따로 없습니다.
## 문법
$('문서객체선택').remove();
$('문서객체선택').empty();
## 코드 보기
- <div> 태그의 클래스를 [ .fishbowl ]이라고 주고 그 안에 물고기들을 이미지로 넣었습니다.
- remove() 버튼을 누를때와 empty() 버튼을 클릭했을 때 차이점을 비교해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - HTML요소관련 메서드</title>
<style>
.fishbowl{
width: 400px; height: 400px;
border: 3px solid black;
padding: 30px; box-sizing: border-box;
border-radius: 200px;
background-color: azure;
}
.fishbowl img{ display: block; margin: 0 auto; }
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('.remove').click(function(){
$('.fishbowl').remove();
});
$('.empty').click(function(){
$('.fishbowl').empty();
});
});
</script>
</head>
<body>
<div class="fishbowl">
<img src="fish01.png" alt="물고기이미지01">
<img src="fish02.png" alt="물고기이미지02">
</div>
<hr>
<button class="remove">remove()</button>
<button class="empty">empty()</button>
</body>
</html>- click() 메서드를 통해 버튼을 클릭했을 때 명령을 주도록 실행 했습니다.
## 결과 보기
- remove버튼을 클릭하면 영역 전체가 사라집니다.
- empty버튼을 클릭하면 내부의 물고기들(자손/후손)만 사라지는 것이 확인됩니다.
- 버튼 테스트시 새로고침해서 확인해보세요.
4. 문서객체 속성삭제 메서드 - removeAttr()
- 이번에는 문서객체 속성을 제거하는 메서드인 removeAttr() 메서드를 보도록 하겠습니다.
- 위 쪽에서 attr() 메서드를 배웠는데, 이것은 태그 속성값을 얻거나, 변경하는 메서드지 삭제는 아니였습니다.
## 문법
$('문서객체선택').removeAttr('태그속성명');- 매개변수는 [ 태그속성명 ]을 문자열로 적습니다. 태그 속성은 여러가지가 있기 때문에 특정 속성을 지정해서 삭제해야 합니다.
## 코드 보기
- [ fish02.png ] 이미지는 원래 가로 크기가 150px입니다. 이것을 width속성으로 임의적으로 400px로 키워보겠습니다.
- 그리고 5초 후에 width태그 속성을 제거하는 것을 해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - HTML요소관련 메서드</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
//5초 뒤에 이미지의 태그속성인 width를 제거
setTimeout(function(){
$('img').removeAttr('width');
},5000);
});
</script>
</head>
<body>
<img src="fish02.png" alt="물고기 이미지" width="400">
</body>
</html>
## 결과보기
- 정말 태그 속성이 사라졌는지 확인하기 위해 크롬 개발자모드(F12)로 [ Element ]상태를 확인해보세요.
- 처음에는 width="400" 이 있다가 이미지가 작아질때 사라지는 것 보입니다.
'웹언어 > jQuery' 카테고리의 다른 글
| [jQuery강좌] 10강 문서객체 영역 메서드 - 오쌤의 니가스터디 (0) | 2022.08.10 |
|---|---|
| [jQuery강좌] 9강 제이쿼리 CSS 조작 메서드 - 오쌤의 니가스터디 (0) | 2022.08.10 |
| [jQuery강좌] 7강 문서객체 HTML요소관련 메서드 - text(), html(), attr(), prop()메서드 (0) | 2022.08.08 |
| [jQuery강좌] 6강 문서객체 DOM Tree 이동 메서드 (0) | 2021.06.29 |
| [jQuery강좌] 5강 문서객체 필터(filter) 메서드 - 오쌤의 니가스터디 (0) | 2021.06.26 |
