23.04.20 목 29일차
jQuery
- 메소드
태그의 배열 값 제거
-- 헤드
// div 내부 값 전체 제거
$('div').empty();
-- 바디
<div>
<h1> Header - 0</h1>
<h1> Header - 1</h1>
<h1> Header - 2</h1>
<h1> Header - 3</h1>
</div>
<h1> Header - 4</h1>
<h1> Header - 5</h1>
<h1> Header - 6</h1>Empty
- appentTo
태그의 배열 값 추가
appendto 지정한 영역에서 아래로 추가
-- 헤드
<script>
$(function(){
// 1. 객체 생성 2. HTML() 메소드 추가 3. appendTo() 메소드 추가
$('<h1></h1>').html('hello world 1 !!').appendTo('div');
$('<h1></h1>').html('hello world 2 !!').appendTo('body');
});
</script>
--바디
<body>
<div>
DIV 영역 !!
</div>
</body>-- 헤드
<script>
$(function(){
// 1. 객체 생성 2. attr() 속성 추가 3. appendTo() 메소드 추가
$('<img />').attr('src','chunbae.png')
.attr('width', '100')
.appendTo('div');
$('<img />').attr('src','bae.png')
.attr('width', '100')
.appendTo('div');
});
</script>
--바디
<div>
</div> - 배열을 사용해 이미지 DIV 에 추가 하기
1. 배열사용(기본)
-- 헤드
<script>
$(function(){
// 이미지 배열
arr=['aebi.png', 'bae.png', 'bbang.png', 'chunbae.png'];
// 이미지 이름 배열
arr1=[{name: 'aebi.png'},{name: 'bae.png'},{name: 'bbang.png'},{name: 'chunbae.png'}];
// arr 배열값을 불러와 #div1 영역에 이미지 추가 반복문
for(i=0; i < arr.length; i++){
$('<img />').attr('src',arr[i])
.attr('width', '100')
.appendTo('#div1');
}
// arr1 배열의 파일 불러오기
$.each(arr1, function(i, item){
$('<img />') .attr('src',item.name)
.attr('width','100')
.appendTo('#div2');
})
// arr 배열의 파일 불러오기
$.each(arr, function(i, item){
$('<img />').attr('src',arr[i])
.attr('width', '100')
.appendTo('#div3');
})
});
</script>
-- 바디
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
------------------------------------------------
2. 배열사용(줄임)
-- 헤드
<script>
$(function(){
// 이미지 배열
arr=['aebi.png', 'bae.png', 'bbang.png', 'chunbae.png'];
// 이미지 이름 배열
arr1=[{name: 'aebi.png'},{name: 'bae.png'},{name: 'bbang.png'},{name: 'chunbae.png'}];
for(i =0 ; i < arr.length ; i++ ){
$('<img >',{src:arr[i], width:100, height:100}).appendTo('#div1');
}
$.each(arr1, function(i, item){
$('<img >',{src: item.name, width:100, height:100 }).appendTo('#div2');
})
$.each(arr, function(i, item){
$('<img >',{src:arr[i], width:100, height:100}).appendTo('#div3');
})
});
</script>
-- 헤더
<script>
$(function(){
// append - DIV 영역 안 위에서 아래로 추가
var a1 = '<h1> append1 </h1>';
var a2 = '<h1> append2 </h1>';
var a3 = '<h1> append3 </h1>';
// prepend - DIV 영역 안 아래에서 위로 추가
var p1 = '<h1> prepend1 </h1>';
var p2 = '<h1> prepend2 </h1>';
var p3 = '<h1> prepend3 </h1>';
// append - 한번에 여러값을 받아 출력가능
$('#div1').append(a1,a2,a3);
//prepend - 한번에 여러값을 받아 출력가능
$('#div1').prepend(p1,p2,p3);
})
</script>
-- 바디
<body>
<div id="div1">
DIV 확인!
</div>
</body>
-- 헤드
<script>
$(function(){
// before
var b1 = '<h1> before1 </h1>';
var b2 = '<h1> before2 </h1>';
var b3 = '<h1> before3 </h1>';
// after
var a1 = '<h1> after1 </h1>';
var a2 = '<h1> after2 </h1>';
var a3 = '<h1> after3 </h1>';
// before - DIV영역 밖 위에서 아래로 출력
$('#div1').before(b1,b2,b3);
// after - DIV 영역 밖 아래에서 위로 출력
$('#div1').after(a1,a2,a3);
})
</script>
-- 바디
<div id="div1">
DIV 확인!
</div>
- appentTo, prependTo
-- 헤드
<script>
$(function(){
// appendTo - 기입한 영역(ex #div1) 안 아래에서 추가
$('img').appendTo('#div1');
// prependTo - 기입한 영역(ex #div2) 안 위에서 추가
// $('img').prependTo('#div1');
})
</script>
-- 바디
<body>
<div id="div1">DIV 1</div>
<div id="div2">
DIV 2
<img src="chunbae.png" width="100" height="100">
<img src="bae.png" width="100" height="100">
</div>
</body>- 시간 부여하여 순서 변경(setInterval)
-- 헤드
<script>
$(function(){
// 시간 경과시 순차적으로 변경 반복
setInterval(() => {
// 파일명 alert 발생
k= $('img').attr('src')
alert(k)
// 이미지 확인
console.log("이미지확인:" + k);
// 첫번째 이미지를 마지막 위치로 이동
$('img').first().appendTo('#div1')
// 마지막 이미지를 첫번째 위치로 이동
// $('img').last().prependTo('#div1')
}, 2500);
})
</script>
-- 바디
<body>
<div id="div1">
<img src="chunbae.png" width="100" height="100">
<img src="bae.png" width="100" height="100">
<img src="aebi.png" width="100" height="100">
<img src="bbang.png" width="100" height="100">
</div>
</body>appendTo,console
prependTo,console
- 느낀점
for 문을 작성하는 부분에서 많이 헤메었다.
arr의 배열에 있는 이미지를 가져와 반복하여 이미지를 추가하여
출력시키는 1번 유형
arr1의 파일값의 이름 배열값을 가지고와 이미지를 추가시키는 2번유형
arr의 파일 순서 배열값을 가지고와 이미지를 추가시키는 3번 유형
각 방식의 기입방법을 알아두도록 하자!
Back-end Developer Preparation Students