개발일지/JavaScript + jquery

JavaScript를 Jquery로 바꾸기 예제

연습용365 2021. 9. 13. 17:48 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
	window.onload = function(){
		var div = document.getElementById('div1');
		div.style.fontSize = "50px";
		//그 div을 style의 폰트사이즈 = 50px
	}
  </script>
 </head>
 <body>
	<div id="div1">div1</div>
 </body>
</html>


-JavaScript 버전

window.onload = function(){
		var div = document.getElementById('div1');
		div.style.fontSize = "50px";
		//그 div을 style의 폰트사이즈 = 50px
	}

 

var div = document.getElementById('div1');
==>Id의 요소를 div에게가지고 온다. 

div.style.fontSize = "50px";

==> 가지고 온 div의 style을 설정한다.
=> fontsize = "50px";

 

-Jquery 버전

$(function(){
		$('#div1').css('font-size', '50px');
	});

더 짧게 이용할 수 있다.

$('#div1').css('font-size', '50px');
==> 온점(.)을 기준으로..
div에게 css의 폰트사이즈 50px를 적용한다.

 

$(function(){
		var div1 = $('#div1');
		div1.css('font-size','50px');
	});

제이쿼리도 여러개를 쉽게 적용하고 싶다면
변수 선언을 해주고 적용해준다.