Java Script/JQuery
jQuery 객체, 태그 이동 (appendTo/setlnterval)
서으이
2020. 11. 1. 13:37
728x90
반응형
appendTo
. appendTo() 메서드는 선택한 요소를 '해당 요소의 마지막'에 삽입해 주는 메서드입니다.
일치하는 요소 집합의 모든 요소를 대상 끝에 삽입합니다.
|
.appendTo() : $(A).appendTo(B) // A 가 B 사이의 마지막에 추가 된다.
|
cs |
append()와 appendTo()는 동일한 기능을 수행하지만, 추가될 내용과 타깃의 위치가 다릅니다.
A.append(B) - A에 B를 추가. 지정한 요소의 마지막에 내용을 추가
A.appendTo(B) – B에 A를 추가. 지정한 요소의 마지막에 내용를 추가
선택한 요소가 DOM의 다른 위치에 단일 위치에 삽입되면 대상 (복제되지 않음)으로 이동되고 삽입된 요소로 구성된 새 집합이 반환됩니다.
|
$( "h2" ).appendTo( $( ".container" ) );
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<h2>Greetings</h2>
</div>
|
cs |
setlnterval
setInterval() 메서드는 지정된 시간 간격마다 지정된 함수를 반복적으로 호출합니다.
이 메서드가 성공적으로 호출되면, 설정된 timeoutID를 반환합니다.
이 메서드는 밀리초(milliseconds) 단위로 시간 간격을 설정할 수 있습니다.
|
window.setInterval(호출할함수, 지연시간);
|
cs |
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Timer</title>
</head>
<body>
<h1>setInterval() 메소드</h1>
<button onclick="startInterval()">2초마다 현재 시간을 표시합니다!</button>
<p id="date"></p>
<script>
function startInterval() {
setInterval(printCurrentDate, 2000);
}
function printCurrentDate() {
document.getElementById("date").innerHTML += new Date() + "<br>";
}
</script>
</body>
</html>
|
cs |
. appendTo() 메서드와 setInterval() 메서드를 이용해 4개의 이미지가 순서대로 화면에 나타나는 예시입니다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Intro</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
.css_test {
border: 5px solid silver;
width: 600px;
padding: 5px;
margin-top: 10px;
padding-top: 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("img").css('width', 250); //img 크기 조절
setInterval(function () { // 함수를 2초마다 실행
$("img").first().appendTo("body"); //첫번째 img를 마지막으로 보낸다
}, 2000);
});
</script>
</head>
<body>
<img src="http://placeimg.com/640/480/people">
<img src="http://placeimg.com/640/480/animals">
<img src="http://placeimg.com/640/480/arch">
<img src="http://placeimg.com/640/480/tech">
</body>
</html>
|
cs |
728x90
반응형