<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.angel{border: 2px solid black; width: 200px; height: 240px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("body").append('<h2>HappyDay</h2>');
$("h2").prepend('<font color = red>오늘은화요일</font>');
//1. 이미지를 부착해보겠씁니다.
var img1 = '<img src =../image/1.JPG>';
var img2 = '<img src =../image/2.JPG>';
var img3 = '<img src =../image/3.JPG>';
var h1 = '<h1>잘나가는 여자들</h1>';
//2. body태그에 h1, 이미지들을 부착.....스타일....addclass()
$('body').append(h1, img1, img2, img3);
$('img').addClass('angel');
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.angel{border: 2px solid black; width: 200px; height: 240px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('img').addClass('angel');
/*
//1. setTimeout()함수를 이용해서 3초 뒤에 맨첫번째 이미지가 맨뒤에 가도록 $(body') append
setTimeout(function(){
$('body').append($('img:first'));
$('body').append($('img:eq(0)'));
}, 3000); */
//2. setInterval()
setInterval(function(){
//$('body').append($('img:first'));
//$('body').append($('img:eq(0)'));
//$('img').first().append($('body'));이건 안됩니다. 위에꺼랑은 다릅니다.
$('img').first().appendTo($('body'));
}, 1000);
});
</script>
</head>
<body>
<img src =../image/1.JPG>
<img src =../image/2.JPG>
<img src =../image/3.JPG>
</body>
</html>
| hover() (0) |
2020.05.29 |
| bind()-removeClass(), addClass(), mouseenter(), mouseleave() (0) |
2020.05.29 |
| append(), after(), prepend(), before() (0) |
2020.05.29 |
| web storage (0) |
2020.05.29 |
| traversing: parent(), children(), find()-attr(), fadeOut(), fadeIn() (0) |
2020.05.29 |