JS/JQuery

[JQuery] 01. load

밍글링글링 2017. 8. 28.
728x90

AJAX 강의를 시작하기 이전에 



위와 같이 패키지 구성을 해주세요.

파일은 아래 4개의 파일입니다.

ajax.json
다운로드
data.json
다운로드
data.xml
다운로드
sub.html
다운로드

 

 

01_load.html

<meta charset="utf-8" />
<script src="../lib/jquery.js"></script>
<script src="01_load.js"></script>
<style>
#container {
    border: 1px solid black;
    padding: 20px;
    margin: 30px;
    color: red;
    font-size: 30px;
}

#header {
    font-size: 30px;
    color: red;
}

#contents {
    color: blue;
    font-size: 20px;
}
</style>

<div id="container">이 곳에 data/sub.html 파일의 HTML콘텐츠를 삽입해 주세요.</div>
 

 

01_load.js

$(function(){
    var container = $('#container');
    container.load('data/sub.html #wrapper');
});
 

728x90

'JS > JQuery' 카테고리의 다른 글

JQuery Draggable(창 위치 이동)  (0) 2018.10.17
[JQuery] [ajax] 05. ajax  (0) 2017.08.28
[JQuery] 03. getJson  (0) 2017.08.28
[JQuery] 02. getXml  (0) 2017.08.28

댓글