본문 바로가기

개발일지/JavaScript + jquery

[jquery] 사진 불러오고 효과주기 appendTo()명령어

<!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초 라는 뜻!

 

강아지 사진에 효과를 입힌다.