<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery-3.6.0.min.js"></script>
<style>
</style>
<script>
$(function(){
var div1 = $('#div1');
$("<img src='../img/dog.jpg'>").appendTo(div1);
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>제이쿼리로 사진 불러오기
var div1 = $('#div1'); 설정
쉽게 부르기 위해서 해준다.
$("<img src='../img/dog.jpg'>").appendTo(div1);
==> 사진을 갖고와서.div1에 추가하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery-3.6.0.min.js"></script>
<style>
.bordered{border: 3px solid red;}
div{background:yellow;}
</style>
<script>
$(function(){
var div1 = $('#div1');
var img = $("<img src='../img/dog.jpg'>");
img.addClass('bordered');
img.appendTo(div1);
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
css에 .dordered와 div에게 효과를 먼저 준다.
img.addClass('bordered');
이미지에 css에서 설정한 선 효과를 준다.
img.appendTo(div1);
사진을 div에 추가한다.
img.fadeOut(2000);
img.fadeIn(2000);없어졌다가(fadeOut)
다시 나타나기(fadeIn)
여기서 2000은 2초 라는 뜻!
강아지 사진에 효과를 입힌다.
'개발일지 > JavaScript + jquery' 카테고리의 다른 글
| [jquery] focus()명령어 (0) | 2021.09.13 |
|---|---|
| [jpuery] click 명령어 (0) | 2021.09.13 |
| [jquery] append() 명령어 (0) | 2021.09.13 |
| [jquery ] addClass(),removeClass() 명령어 (0) | 2021.09.13 |
| [jquery] 기본 명령어 예제 몇 가지 ② (0) | 2021.09.13 |
