<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<p style="background-color: #ff0000;">여기가 p태그</p>
<p style="background-color: #00ff00;">여기가 p태그</p>
<p style="background-color: #0000ff;">여기가 p태그</p>
<button>클릭시에 배경색을 취득</button>
<br>
<br>
<div id="news">로드중.....</div>
<script type="text/javascript">
// txt 파일 가져오기 (load)
$(function() {
// 읽어 올 문서의 파일명 , 확인용 함수 (완료 여부)
$("#news").load("news.txt", function(txt, status) {
if (status == "success") {
alert("로딩 성공");
alert(status);
alert(txt);
} else if (status == "error") {
alert("로딩 실패");
}
});
// 배경색 변경
$("button").click(function() {
// getter
// var color = $("p").css("background-color");
// alert("color = " + color);
// setter
// $("p").css("background-color", "#ffff00");
// 여러개 바꾸기, json 방법
$("p").css({
"background-color" : "gray",
"font-size" : "200%",
"border" : "solid 5px red"
});
});
});
</script>
</body>
</html>
jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시...
