jquery - jQuery 기초 (txt 파일 가져오기 (load) , 클릭시에 배경색을 변경(json))

<!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 기초 (txt 파일 가져오기 (load) , 클릭시에 배경색을 변경(json))

단축키

Articles