[JQuery] 01. load

2017. 8. 28. 13:47·JS/JQuery
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
'JS/JQuery' 카테고리의 다른 글
  • JQuery Draggable(창 위치 이동)
  • [JQuery] [ajax] 05. ajax
  • [JQuery] 03. getJson
  • [JQuery] 02. getXml
밍글링글링
밍글링글링
mingling - 밍글링, 밍글밍글링. 코드와 어우러지다. IT/ 프로그래밍/소스
    반응형
    250x250
  • 밍글링글링
    mingling
    밍글링글링
  • 전체
    오늘
    어제
    • 밍글링글링 (463)
      • Flutter (2)
      • 일상생활 (8)
        • 리뷰 (1)
        • 생활정보 (4)
        • 맛집 (0)
        • 여행 (0)
        • 모든정보 (3)
      • JAVA (126)
        • 개념 (6)
        • 예제 (115)
        • Exception (2)
      • C (1)
        • C (1)
        • C++ (0)
        • C# (0)
      • JS (29)
        • JavaScript (18)
        • JQuery (5)
        • AJax (0)
        • NODE.JS (6)
        • Angular.JS 2.0 (0)
      • WEB (87)
        • HTML (6)
        • CSS (61)
        • JSP (20)
        • JSTL (0)
      • FrameWork (8)
        • Spring (8)
        • BootStrap (0)
        • MyBATIS (0)
        • JUnit (0)
      • 외부 라이브러리 (5)
      • 공유 소스 관리 (5)
        • Git (5)
        • SVN (0)
      • 빅데이터 프로그래밍 (37)
        • Python (37)
        • R Programming (0)
      • DB (7)
        • ORACLE (0)
        • MySql (6)
      • Development Tools (7)
        • StarUML (0)
        • eXERD (0)
        • Eclipse (4)
      • SKILL (6)
        • Migration (0)
        • Security (6)
      • MicroSoft (0)
        • Excel (0)
        • Word (0)
      • Android (0)
      • Server (21)
        • Ubuntu (5)
        • Linux (15)
      • IOS (0)
      • XML (0)
      • 미디어 (0)
      • 공지사항 (3)
      • NETWORK (1)
      • 게임 (4)
        • 피파 (1)
        • 리니지M (0)
        • 배틀그라운드 (1)
        • 듀랑고 (2)
      • 세상 이슈 (6)
      • 일렉트론 (0)
      • 대회 소식 (4)
      • 업무 (2)
      • Express, Vue (6)
      • docker (11)
      • svelte (3)
      • 블록체인 (1)
      • IT (66)
      • Rust (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 미디어로그
    • 위치로그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    vue cli
    AI 코딩 에이전트
    proxy pass
    VS Code 팁
    자바 exception
    자바 클래스
    nginx
    vscode
    ubuntu
    vue 설치
    gitlab 설치
    Rust lang
    Node
    Java Array
    css tb
    nginx ssl 적용
    css perspective
    자바 생성자
    Extension Bisect
    자바 객체 지향
    API 설계
    svelte
    css transition
    spring java
    servlet class
    rust linux
    mysql db
    jsp parameter
    에디터 팁
    프런트엔드
    브라우저 자동화
    티스토리 자동화
    jsp include
    리눅스 설치
    nginx ssl 설정
    러스트
    자바 배열
    lang rust
    제미나이
    자바 for문
    docker
    React Compiler
    java casting
    ssl 인증서 발급
    css table
    클론코딩
    SSL 인증서
    css float
    오류
    AI 반도체
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.6
밍글링글링
[JQuery] 01. load
상단으로

티스토리툴바