UI설계 및 구현 -웹프로그래밍
jQuery -외부 내부 적용
햄찌개
2020. 9. 28. 10:38
내부 jQUery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<body>
<br><br>
<div id="test">jQuery 테스트입니다.</div>
<h1 id ="a1">가나다라마바사</h1>
<h1 class ="b1">가나다라마바사</h1>
<h1>가나다라마바사</h1>
<h1>가나다라마바사</h1>
<script>
// $(document).ready(function(){ //(document).ready생략 가능
$(function(){
var arr =$("h1");
arr.css("background-color", "skyblue");
arr.css("color", "red");
alert('시작');
$('#test').css('border','25px solid blue')
$('#test').css('background','red')
$('#a1').css('background','blue')
$('.b1').css('background','yellow')
});
</script>
</body>
</html>외부 jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script src=../../js/test.js></script>
<body>
<br><br>
<div id="test">jQuery 테스트입니다.</div>
<h1 id ="a1">가나다라마바사</h1>
<h1 class ="b1">가나다라마바사</h1>
<h1>가나다라마바사</h1>
<h1>가나다라마바사</h1>
</body>
</html>/**
* 테스트
*/
// $(document).ready(function(){ //(document).ready생략 가능
$(function(){
var arr =$("h1");
arr.css("background-color", "skyblue");
arr.css("color", "red");
alert('시작');
$('#test').css('border','25px solid blue')
$('#test').css('background','red')
$('#a1').css('background','blue')
$('.b1').css('background','yellow')
});