jQuery / Method / .load()

.load()

.load()는 다른 문서 등에서 내용을 가져와 현재 문서에 나타냅니다.

문법

.load( url [, data ] [, complete ] )

예를 들어 a.html의 p 요소를 가져와 div 요소 안에 넣으려면 다음과 같이 합니다.

$( 'div' ).load( 'a.html p' );

예제

load-02.html에서 id 값이 ab인 요소를 가져와서, 현재 문서의 id 값이 xy인 요소 안에 넣습니다.

load-01.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( '#xy' ).load( 'load-02.html #ab' );
      } );
    </script>
  </head>
  <body>
    <div id="xy"></div>
  </body>
</html>

load-02.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
  </head>
  <body>
    <p>Lorem</p>
    <p id="ab">Ipsum Dolor</p>
  </body>
</html>

Related Posts

jQuery / HTML 문서와 연결하는 방법, 사용하는 방법

jQuery / HTML 문서와 연결하는 방법, 사용하는 방법

HTML 문서와 연결하기 CDN 이용하기 HTML 문서에 다음 코드를 추가합니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> 3.3.1은 버전입니다. 다른 버전을 사용하고 싶다면 숫자를 변경합니다. 다운로드 받아 연결하기 jQuery 다운로드는 여기에서 합니다. 압축된 파일도 있고, 압축되지 않은 파일도 있습니다. 그리고 HTML 문서에 다음 코드를 추가합니다. <script src="path/jquery-3.3.1.min.js"></script> path와 파일 이름은 적절히 변경합니다. jQuery 사용하기 다음은 ID가 jb인 h1 요소의 색을 빨간색으로 바꾸는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta ...

jQuery / Method / .html() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

jQuery / Method / .html() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

.html() .html()은 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .text()와 비슷하지만 태그의 처리가 다릅니다. 문법 1 .html() HTML 태그를 포함하여 선택한 요소 안의 내용을 가져옵니다. 예를 들어 var jb = $( 'h1' ).html(); 는 h1 요소의 내용을 변수 jb에 저장합니다. 문법 2 .html( htmlString ) 이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어 $( 'div' ).html( '<h1>Lorem</h1>' ); 는 div ...

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

.delay() .delay()는 실행 중인 함수를 정해진 시간만큼 중지(연기) 시킵니다. 문법 .delay( duration ) duration에는 중지할 시간이 들어갑니다. 숫자로 정할 때의 단위는 1/1000초이고, slow 또는 fast로 정할 수 있습니다. slow는 600, fast는 200에 해당합니다. 예제 버튼을 클릭하면 문단이 위로 사라졌다가 1초 뒤에 아래로 내려옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

.slideUp() .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다. 문법 .slideUp( ) duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...

jQuery / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자

jQuery / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자

:odd :odd은 홀수 인덱스 요소를 선택하는 선택자입니다. 문법 $( ':odd' ) 예를 들어 $( 'p:odd' ) 는 홀수 인덱스인 p 요소를 선택합니다. 주의할 점은 인덱스가 0부터 시작한다는 것입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( ...

jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성

jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성

.length .length는 선택한 요소의 개수를 반환하는 속성입니다. 예를 들어 $( 'div' ).length 는 div 요소의 개수입니다. 예제 버튼을 클릭하면 li 요소의 개수를 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.js"></script> <script> $( document ).ready( function() { ...

jQuery / Method / .click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드

jQuery / Method / .click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드

.click() .click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다. 문법 .click( handler ) 예를 들어 button 요소를 클릭했을 때 함수를 실행시키고 싶으면 다음과 같이 합니다. $( 'button' ).click( function() { // function } ); 예제 문단을 클릭하면 테두리가 생깁니다. 다시 클릭하면 테두리가 사라집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Selector / :empty - 내용이 없는 빈 요소를 선택하는 선택자

jQuery / Selector / :empty - 내용이 없는 빈 요소를 선택하는 선택자

:empty :empty는 내용이 없는 빈 요소를 선택하는 선택자입니다. 문법 $( ':empty' ) 예를 들어 $( 'div:empty' ) 는 div 요소 중 내용이 없는 것을 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> table { ...

jQuery / Method / .resize() - 윈도우 크기 변할 때 어떤 작업하기

jQuery / Method / .resize() - 윈도우 크기 변할 때 어떤 작업하기

.resize() .resize()는 윈도우 크기가 바뀔 때 어떤 작업을 할 수 있게 합니다. 문법 $( window ).resize( function() { // do somthing ​} ); 예제 웹브라우저의 크기를 변경할 때, p 요소의 가로폭을 출력합니다. 윈도우 크기를 변경하면 숫자가 바뀝니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / 맨 위로 부드럽게 이동하는 링크 만들기

jQuery / 맨 위로 부드럽게 이동하는 링크 만들기

사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 많습니다. 단순한 링크로 만들면 순식간에 맨 위로 이동하는데, jQuery의 scrollTop()을 이용하면 맨 위로 스르륵 올라가는 효과를 쉽게 만들 수 있습니다. HTML 문서에 ...

jQuery 강좌