jquery를 이용한 Ajax html데이터 일부분 로드

Ajax 2010.02.10 18:19

jjquery를 이용한 Ajax html일부분 로드하기

Ajax 데이터로드하기 html편에서 이미 html 전체를 로드하는 방법을 봤다. 이번에는 일부분을 로드하는 방법을 살펴보자

html데이타 파일

데이타 파일 안에 두가지로 분류해놓자 클래스명을 하나는 part 또다른 하나는part02 로 정해주었다.

Part one

어쩌고 저쩌고

Part tow

이러히 저러히

메인페이지

jquery를 이용한 ajax 데이터로드 html일부분

로드된 데이터가 들어올자리

리스트에 두가지로 나누었다 하나는 아이디 one을 주었고 하나는 아이디 tow를 주었다. 이제 각각클릭시 part, part02를 부르도록 스크립트를 짜보자

jquery 스크립트

 $(document).ready(function() {
   $('#one a').click(function() {
     $('#content').load('exam.html .part');
     return false;
   });   
   $('#tow a').click(function() {
     $('#content').load('exam.html .part02');
     return false;
   });     
 });

위에서 보면 이제까지와 다른점은 .load(exam.html .part');이부분이다. .load 후에 상세히 부를 클래스가 있다. 따라서 아이드 one을 가진 a엘리먼트를 클릭시 exam.html 문서의 part클래스를 부르게된다.

마지막으로 결과물을 보려면 아래로

http://sianasiatiger.cafe24.com/study/A_ajax_08.html

저작자 표시
신고

설정

트랙백

댓글

jquery를 이용한 Ajax 로딩중 알리기

Ajax 2010.02.09 14:04

jquery를 이용한 Ajax 로딩중 알리기

흔히 긴데이타를 로딩할때 화면에 now loㅁding이라는 것을 봤을것이다.데이타가 간단하면 구차하게 쓸필요 없지만 많고 길 경우 현재상황을 알려줄 필요가 있다. jquery를 이용해서 만들어보자

html로딩 소스 짜기

html엘리먼트로 로딩중임을 알려줄 소스를짜보자 보통 그림을 이용하지만 간단하게하기위해 css로 보여줄것이다. 원하는 모습은 아래와 갔다.

now loading

html과 css로 짜준다면

now loading

css에서 가로 세로 80px박스 그리고 최색배경, 검은색테두리를 사용했다.

div#loading{height:80px;
            width:80px; 
            background:#999;
            border:10px #000 solid;}
div#loading p{color:#FFF}

웹표준, 단계적 기능향상

의미있는 마크업 코딩을 위해 위 html소스를 스크립트로 짜주자. 웹표준에 대해서 잘 봤다면 항상 마크업페이지에는 콘테츠(정보를 알리는 내용)이 우선이며 기능,부가적인것은 css, 스크립트로 구현하도록 권유되어있는것을 잘알고있을 것이다. 지금 하고자하는바는 로딩하다고 알려주는 기능적인것이다 따라서 위의html을 스크립트로 짜주자

$(document).ready(function() {
  $('

now loading

') .insertBefore('#content) });

또 맨처음에는 보이지않아야하므로 css에서 display:none;으로 처리해주자그리고 나타날 위치를 적당히 잡아준다.

div#loading{
 display:none;
 position:absolute;
 margin: 100px 0 0 500px;}

옵저버함수

옵저버 함수는 요청이 현재 처리중임을 알리는 함수이다.jquery에서는 .ajaxStart(), .ajaxStop()이있다.이것을 이용해 스크립트에서 사용해보자

$(document).ready(function() {
  $('
Loading...
') .insertBefore('#content') .ajaxStart(function() { //호출이시작되면 $(this).show(); //보여준다 }).ajaxStop(function() { //호출이 끝나면 $(this).hide(); //감춘다. }); });

이렇게하면 와성된것이다 호출하는 이벤트(이젠예제에서 봤던 클릭이라던가, 검색후) loading 문구가 뜨고 그후 데이타가 나올 것이다.

약간의 딜레이

데이타양이 적은 경우 이같은 기능을 사용할 필요가없다. 굳이 사용하려면 약간의 딜레이를주면된다 맨처음 보여준 html예제 소스를 이용해보자

 $(document).ready(function() {
   $('#part01').click(function() {
     $('#content').hide().load('./ajax_part/abouthtml.html',function() {
		$(this).fadeIn();
		});							
     return false;
   });
 });

.hide().fadeIn()이 사용된것을 볼 수 있을것이다 이에 대해선 이전에 설명해 준것이 있을 것이다.이에 대해선 아래를 참조하자

jQuery-hide-show-fade-애니메이션-메소드

마지막으로 완성한 예제를 볼려면 아래를 클릭

http://sianasiatiger.cafe24.com/study/A_ajax_07.html

저작자 표시
신고

설정

트랙백

댓글

jquery 이용한 Ajax 폼으로 검색하기

Ajax 2010.02.09 12:49

Ajax 데이터로드하기 폼(form) 검색편

데이타가 여러개 있다면 앞서해본것은 클릭시 로드되는데이타였다.이번에는 폼을 이용하여 그중 검색할때 원하는 결과가 나오도록 해보자

기본적인 폼

간단한 검색용 폼을 만들어보자

 

위와같이하면 흔히 보는 검색 박스하나와 검색버큰이 나올것이다.

php데이터 다시보기

데이타는 저번과 같다 다만 검색으로 하기에 php를 조금 수정해줄필요가있다 찬찬히보자

저번에 포스팅한 데이터를 보려면 여기http://siana.tistory.com/entry/Ajax-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-%EC%84%9C%EB%B2%84%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EB%8B%AC-php

if (isset($entries[$_REQUEST['words']])) {
  $entry = $entries[$_REQUEST['words']];
  $html .= '

'; $html .= $_REQUEST['words']; $html .= '

';

위의 것은 저번에 포스팅한 것 그대로다 이상테에서도 폼에서 검색할경우 잘 검색된다. 하지만 대문자,소문자에따라 결과가 다르다. 즉 소문자html이라고 검색하면 데이타에 HTML이라는 데이타가 검색되어 축력되지않는다

아래 소스는 이문제를 해결하고 있다. php의 strtoupper()함수는 소문자를 대문자로 바꾸는 역할을 한다.

c.f) 반대로strtolower() php함수는 대문자를 소문자로 바꾸는 역할을 한다

if (isset($entries[strtoupper($_REQUEST['words'])])) {
  $entry = $entries[strtoupper($_REQUEST['words'])];
  $html .= '

'; $html .= strtoupper($_REQUEST['words']); $html .= '

';

마지막으로 수정할 부분은 이번에는 검색해서 결과가 나오도록 해야하무로 foreach함수로 일일이 검사해보도록하고, 그리고 두번쨰로 첫번째 출력되는값을 검색된것이 나오도록해주는것이다 아래예제에 따로 덧붙이겠다

foreach ($entries as $words => $entry) {
//foreach 구문으로 검색
  if (strpos($words, strtoupper($_REQUEST['words'])) !== FALSE) {
  $html .= '

'; $html .= $words; //검색결과에선 전채단어가필요하니까 //$_REQUEST['words']구문 대신 $words만 쓴다. //$_REQUEST를 쓴다면 검색입력한 값만 h3에나올것이다. $html .= '

'; }

이로서 php파일 수정을 완료했다. 먼저 소문자를입력해도 검색되도록 해주었고, 검색결과가h3엘리먼트에 모두나오게 하도록 $_REQUEST를 html조각만드는 스크립트에서 삭제시켰다.

실행스크립트코드

마지막으로 볼것은 검색시 나오게 하는 스크립트 소스를 짜보자

$(document).ready(function() {
  $('#siadebar form').submit(function() {
  //검색이므로 load대신 submit이 사용되었다.
 $('#content').load('./ajax_part/server.php', {'term': $('input[name="term"]').val()});
    //여기는 그전과 마찬가지
     return false;
 });});

위 처럼 해준다면 검색시 결과가 나올것이다.클릭시 결과가나오도록 우리는 .load()하지만 이번엔 검색시 결과 출력이무로 .submit()을 사용한것이다. 하지만 위와같은 경우는 검색단어를 모두입력해야 결과가 나온다. 즉 html,json등을 모두 입력해야 결과가나오는 것이다. 일부분 검색시 나오도록하려면 아래와 같이해주면된다.

.serialize()

.serialize()는 요청한 문자열을 자동으로 만들어주는 함수이다. ht를 입력할경우 ht가있는 것을 검색하여 문자열을 자동완성시켜 그결과를 보여준다.

$(document).ready(function() {
  $('#siadebar form').submit(function() {
    $.get('./ajax_part/server02.php', 
    $(this).serialize(), function(data) {
    //load방식에서 get방식으로 바꿨고
    //.serialize()가 사용되었다. 
      $('#content').html(data);
    });  return false; });});

마지막을 완성된 예제를 직접보자면 아래를 클릭

http://sianasiatiger.cafe24.com/study/A_ajax_server_02.html

저작자 표시
신고

설정

트랙백

댓글

Ajax 데이터로드하기 서버로 데이터 전달 php

Ajax 2010.02.08 15:22

Ajax 데이터로드하기 서버로 데이터 전달 php

앞서본 포스팅한것들을 정적인 파일들이였다. html,스크립트 파일 단순한 텍스트(text)등으로 이정도는 ajax방법이 아니고도 가능하다.이번엔 동적인 데이타 전송을 살펴보자

동적 데이타파일

ajax를 이용한것은 동적데이타의 경우 브라우저에서 받은 입력값에따라 비동기적으로 되돌려주게 되어있다. 이런 동적파일은 php,java,asp가 있다.여기서 가장 편히 쓰이고 쉽게 할수있는 php로 예를들어보겠다.

php 데이타요청

먼저데이타 파일을 보자 내용은 하나가아닌 여러가지로 분류되어 있다

$entries = array(
   'HTML'=> array(
   'definition' => 'HyperText Markup Language',
   'explantion'	=> '어쩌고 저쩌고',
   ),
   'XML'=> array(
   'definition' => 'extensible markup language',
   'explantion'	=> '어쩌고 저쩌고',
   ),
  );

위에서 세가지를 설명해주고 있다.여기서 php의 문법에 대해선 자세히 알아보지 않겠지만 위의 정도이면 대충 알아봇것이라본다. $는 변수지정 그리고 array는 C언어에서 흔히 배운 행렬에대한 정의방식이다

이번엔 메인페이지에 html을 만들어보자.백과사전 처럼 리스트에서 하나를 클릭할경우 위의 데이타중 소속된것을 불러오도록 할 것이다.


로드된 데이터가 들어올자리

앞선데이타 파일과 그리고 메인페이지는 만들어졌다. 그럼 데이타 파일을 html형식으로 만들어줄 스크립트와 불러줄 스크립트 소스가있으면 되겠다.

클릭시 다음과 같이 나오도록 생각해보자

HTML

HyperText Markup Language

어쩌고 저쩌고

그럼 이걸 소스로 짜준다면은

if (isset($entries[$_REQUEST['words']])) {
  //변수 entries가 있는지 확인한다
  $entry = $entries[$_REQUEST['words']];
  //entry란 변수로 entries에 나열된것들을 요청
  //인자로 words를 사용했다.
  $html .= '

'; $html .= $_REQUEST['words']; $html .= '

'; $html .= '

'; $html .= $entry['definition']; $html .= '

'; $html .= '

'; $html .= $entry['explantion']; $html .= '

'; print($html);//출력 }

메인페이지에 가서 요청할 하이퍼링크를 다시보자


li엘리먼트의 각주소는 php파일의 데이타의 일부를 호출하고있다. 첫번쨰는 html,두번째는 json..

마지막으로 볼것을 이들을 작동시킬 스크립트이다.

$(document).ready(function() {
  $('a').click(function() {
 $.get('./ajax_part/server.php',
  {'words': $(this).text()}, function(data) {
 //get함수로 php파일을 부른다, 인자는words 
      $('#content').html(data);
      //콘텐트에 첨가
    });
    return false; });});

위의 방법은 get함수를 이용한것이다 post방식 역시 별반다를반 없다.

 $.post('./ajax_part/server.php',
  {'words': $(this).text()}, function(data) {

마지막으로 볼것은 더간단한 .load사용하는방법이다

 $('#content').load('e.php', {'term': $(this).text()});

요약

php에 익숙하지않은 사람은 소스가 이해가지않은수있다. 하지만 정적파일을 로드했을때와 모습은 별차이없었다.이제까지 알아본걸 되돌아보면

  • 메인페이지작성
  • 메인페이지에 데이타가 들어올 자리 구성
  • 데이터 마련(html,JSON, php...등
  • 데이타를 html형식으로 바꿔줄 스크립트작성
  • 작동시킬 스크립트작성

마지막으로 덧붙임, 이예제는 php형식의 예제이다. 동적이란것은 서버가 있을때 주고 받음으로서 작동되는 것이다. 따라서 APM으로 로컬로 개인 pc에 서버가 구축되어있지않거나, 별도 마련된 서버에 업로드시켜 확인하지않고 그냥 브라우저로는 당연히 작동되지않는다.맣은사람들이 왜안되냐고 묻곤하는데 동적파일 php임을 생각하자

마지막을 완성된 예제를 직접보자면 아래를 클릭

http://sianasiatiger.cafe24.com/study/A_ajax_server.html


저작자 표시
신고

설정

트랙백

댓글

jquery 이용한 Ajax 데이터로드하기 간단한 스크립트파일편

Ajax 2010.02.07 10:51

Ajax 데이터로드하기 스크립트편

자바스크립트를 사용하면서 과다량의 사용으로 한번에 로드가 요구되어 과부하가 걸리는수가있다.이런경우 html생성부분을 로드하는 파일에 넣어서 처리할 수 있다.JSON의 예를보면서 확인해보자

앞서 포스팅한 부분(아래참조)을 되돌려보면 데이타를 로드하는 부분 그리고 html코드를 만들어주는 부분이 같이 포함된것을 볼수있다.이 스크립트만 사용한다면 문제없지만 다른 스크립트 소스와 많이 사용하게된다면 복잡하고 문제발생우려가 크다.

$(document).ready(function() {
  $('#part02').click(function() {
    $.getJSON('./ajax_part/aboutJSON.json' ,function(data) {
    //여기까지 데이타로드하는코드
   $('#content').empty();
      $.each(data, function(entryIndex, entry) {
        var html = '

' + entry['listN'] + '

'; html += '

' + entry['sunmmary'] + '

'; html += '
' + entry['definition'] +'
' ; $('#content').append(html); //HTML작성하는 코드 }); }); return false; }); });

자 그럼 이번엔 HTML작성코드 부분을을 데이파일에 삽입시켜 간단하게 만들어보자. 로딩소스는 아래 html을 뺀 부분이니 다음과 같다.

$(document).ready(function() {
  $('#part04').click(function() {
    $.getScript('./ajax_part/generaljvs.js');
    return false;
  });
});

JSON파일을 설명할떄 봤던 데이터 파일을 다시보자

[
  { 
    "listN" :  "JSON ",
    "sunmmary" : "JavaScript Object Notation",
	"definition" : "어쩌고 저쩌고"
  }
]

이쪽으로 이제 html작성소스를 옯길것이다.

var entries = [
  { 
    "listN" :  "JSON ",
    "sunmmary" : "JavaScript Object Notation",
	"definition" : [
 	   "definition" : "어쩌고 저쩌고" 
	]  }]
//아래부터 만들어질 html소스
var html = '';
$.each(entries, function() {
         html += '

' + this['listN'] + '

'; //당연히 스크립트내에 존재하니 this를 사용했다. html += '

' + this['sunmmary'] + '

'; html += '
' + this['definition'] +'
' ; }); $('#content').html(html);

이렇게함으로서 로딩 소스만 단간하게 구축할수 있었고 데이타에 파일에 번거로운 html작성소스를 따로 명확히 넣어주어 관리도 쉬워졌다. 결과를 보면 같은 것을 볼수있을 것이다.

http://sianasiatiger.cafe24.com/study/A_ajax_03.html


저작자 표시
신고

설정

트랙백

댓글

jquery 이용한 Ajax 데이터로드하기 xml편

Ajax 2010.02.06 14:01

Ajax 데이터로드하기 xml편

xml은 가장 널리알려지고 호환성좋은 데이터 형식이다.현재 웹상에서 보편적으로 통용되기에 부담없이 사용가능하다.이번엔 xml파일을 로드해보자

xml

 
  
    
        어쩌고 저쩌고~~
    
  
  

위와같은 파일을 로드해볼것이다. term이라지정된Xml을 h2 엘리멘트로 part의extensible markup language를 h3엘리먼트로 그리고 definition의 내용은 div엘리먼트로 로드해보자 이번엔먼저 만들어질 html 소스부터 생각해보자.앞서 설명한대로라면 다음과같이 나와야 할것이다.

Xml

extensible markup language

어쩌고 저쩌고~~

두번 설명한 기본적인페이지 소스를다시보자 이번엔 part03로 아이디주고 list에 xml삽입이라고 텍스트를 입렸해줬다.

jquery를 이용한 ajax 데이터로드_01

로드된 데이터가 들어올자리

불러올 스크립트소스는 json파일을 부를때처럼 get을 사용한다

 $(document).ready(function() {
 $('#part03').click(function() {
     $.get('./ajax_part/aboutXML.xml' ,function(data)  {
   });													  
     return false;
   });
 });

약간 스크립트소스짜는방법이 차이나는데 JSON에서 대괄호entry[' ']로 데이타를 불러왔다면 여기선 $entry.attr()로 불러오게 되어있다.

 $('#content').empty();
     $(data).find('entry').each(function() {
     //데이타에서 entry를 모두검색
        var $entry = $(this); 
        var html = '

' + $entry.attr('term') + '

'; //term의 속성값을 h2엘리먼트로 html += '

' + $entry.attr('part') + '

'; //part의 속성값을 h3엘리먼트로 html += '
' + $entry.find('definition').text() +'
'; //역시definition의 속성값을 div엘리먼트로 $('#content').append(html);

완성된 최종 소스는 아래

   $(document).ready(function() {
   $('#part03').click(function() {
     $.get('./ajax_part/aboutXML.xml' ,function(data) {
    $('#content').empty();
     $(data).find('entry').each(function() {
        var $entry = $(this);
        var html = '

' + $entry.attr('term') + '

'; html += '

' + $entry.attr('part') + '

'; html += '
' + $entry.find('definition').text() +'
'; $('#content').append(html); }); }); return false; }); });

요약

  • 불려진 데이타 xml역시 부른페이지의 css의 영향을 받는다.
  • xml데이터 형식은 널리 쓰이고 통용화되어 부담없이사용가능하다.
  • xml데이터 형식은 다른 데이타에 비해 조금 느리다.

마지막을 완성된 예제를 직접보자면 여기를 클릭

http://sianasiatiger.cafe24.com/study/A_ajax_03.html

저작자 표시
신고

설정

트랙백

댓글

jquery 이용한 Ajax 데이터로드하기 JSON편

Ajax 2010.02.05 23:28

Ajax 데이터로드하기 JSON편

가장간단한 html을 로드해봤다면 이번엔 JSON파일을 로드해보겠다.

JSON이란?

JavaScript Object Notation으로 xml데이터를 대신하기위해 사용되기도 한다.중괄호 대괄호 등을 사용하여 표현한다. 예제를 보자

[
  { 
    "listN" :  "JSON ", //변수지정 기리고 값설정
    "sunmmary" : "JavaScript Object Notation",
	"definition" : [
 	     "JSON (JavaScript Object Notation) is a lightweight data-interchange format.",
	     "It is easy for humans to read and write.",
		 "It is easy for machines to parse and generate." 
	]//긴문장에서는 대괄호로 묽는다.
  }
]

대괄호는 크게 감사주고 중괄호로 다시 감싸고 안에 데이타가 삽입되어있다. JSON은 "변수지정" : "값" 이방식으로 간단하지만 중괄호 대괄호를 확실하게 써줘야 한다. 하나라도 오차가있으면 읽어들이지못하게 된다.

간단히요약

  • 시작은 [{ 끝맺음은}]
  • "변수지정" : "값"방식으로 입력
  • 긴 문장을 넣을때는 대괄호를 쓸수있다.
  • JSON에 대해 더자히 알고싶다면 이사이트에 가보자http://json.org

    활용

    아래와 같은 레이아웃를 페이지로 삼고 오른쪽 검정색부분에 JSON 데이타를 부를것이다.

    기본적인페이지 소스

    jquery를 이용한 ajax 데이터로드_01

    로드된 데이터가 들어올자리

    그리고 약간꾸며줄 css소스.

    body{ width:960px; text-align:center;}
    #wrapper{ text-align:left;}
    #siadebar{ float:left; border:1px #000 solid; width:200px;}
    #content{ border:1px #000 solid; float:right; width:700px;}
    

    이번엔 불러올 스크립트소스를 만들어보자.html을 부를때 load를 사용했다면 json파일을 부를때는 getJSON을 사용한다

     $(document).ready(function() {
       $('#part02').click(function() {
         $.getJSON('./ajax_part/aboutJSON.json' ,function(data) {
       });													  
         return false;
       });
     });
    

    HTML과달리 이건 어디까지나 데이타이다. 따라서 스크립트에서 HTML소스를 만들어줘야한다.다음과 같은 것일 생각하고 만들어 보자

    JSON

    JavaScript Object Notation

    어쩌고 저쩌고`~~

    사실 위와같은 완성된 모습을 생각하고 데이타 소스를 짜는게 젤 편하다.자그럼 여기서 삽입될 데이터는 JSON에서 짜주었고 HTML소스를 생성해보자

        $('#content').empty();
         //먼저 전에 있었던 삽입될 부분#content의 내용을 비운다
           $.each(data, function(entryIndex, entry) {
             var html = '

    ' + entry['listN'] + '

    '; //h2엘리먼트에 listN의 데이터를 넣는다 html += '

    ' + entry['sunmmary'] + '

    '; //h3엘리먼트에 sunmmary데이터를 넣는다 html += '
    ' + entry['definition'] +'
    ' ; $('#content').append(html); //append로 삽입 });

    위에서 each()메소드가 사용된것은 여러데이타가 같은 형식으로 있을경우이다. 위에서는 단순히 하나의 데이터를 내가 올렸지만 전화번호부를 생각해보자 무수히 마흔것들이 일관적 양식으로 있을것이다. 따라서 이때 이일이 검색해주면서 패턴을 생성해주는 것이다.

    완성된 최종 소스는 아래

     $(document).ready(function() {
       $('#part02').click(function() {
         $.getJSON('./ajax_part/aboutJSON.json' ,function(data) {
        $('#content').empty();
           $.each(data, function(entryIndex, entry) {
             var html = '

    ' + entry['listN'] + '

    '; html += '

    ' + entry['sunmmary'] + '

    '; html += '
    ' + entry['definition'] +'
    ' ; $('#content').append(html); }); }); return false; }); });

    요약

    • 불려진 데이타 JSON역시 부른페이지의 css의 영향을 받는다.
    • 로드는 빠르고 간결하다,
    • JSON소스는 상당히 까다롭다. 만들기는 쉽지만 하나의 오류라도 있으면 실행되지않는다.

    마지막을 완성된 예제를 직접보자면 여기를 클릭

    http://sianasiatiger.cafe24.com/study/A_ajax_02.html

    저작자 표시
    신고

설정

트랙백

댓글

jquery 이용한 Ajax 데이터로드하기 html편

Ajax 2010.01.30 19:59

Ajax 데이터로드하기 html편

ajax는 여러기능이 있지만 그중 기본적인것이 비동기방식으로 데이터를 전송하는것이다.가장간단하게 jquery를 이용하여 html파일을 불러오는 것을 살펴보자

아래와 같은 레이아웃를 페이지로 삼고 오른쪽 검정색부분에 html 데이타를 부를것이다.

기본적인페이지 소스

jquery를 이용한 ajax 데이터로드_01

로드된 데이터가 들어올자리

그리고 약간꾸며줄 css소스. 간단하게 양쪽으로 float해주고 명확히 하기위해 border를 주었다.마진 패딩 초기화등은 귀찮아서 패스.

body{ width:960px; text-align:center;}
#wrapper{ text-align:left;}
#siadebar{ float:left; border:1px #000 solid; width:200px;}
#content{ border:1px #000 solid; float:right; width:700px;}

마지막으로 불러올파일을 간단히 적어보자 여기선 html에대한 설명을 한 html파일이다.단 데이터 형식으로 취급하기에 소스에<html><head><body>가 없이 body안에 것만 있으면 된다

인터넷 서비스의 하나인~ 어쩌고저쩌고~ ~이다

이번엔 불러올 스크립트소스를 만들어보자.간단하다 load를 사용한다. 앞서 포스팅을 봐왔다면 별탈없이이해할것이다

 $(document).ready(function() {
   $('#part01').click(function() {//#part01이란 아이디 클릭시
     $('#content').load('./ajax_part/abouthtml.html');//#content에 데이타를 부른다.
     return false;
   });
 });

위와같이 했다면 왼쪽에 html을 클릭한다면 오른쪽에 데이타가 불러질것이다.

중요시할점은 다음과 같다

  • 앞서 설명했지만 비동기 방식이다.
  • 불려진 데이타 html은 부른페이지의 css의 영향을 받는다.

마지막을 완성된 예제를 직접보자면 여기를 클릭

http://sianasiatiger.cafe24.com/study/A_ajax_01.html


저작자 표시
신고

설정

트랙백

댓글

jQuery DOM empty clone 메소드 복사하기

jQuery/DOM&jQuery 2009.11.28 21:20

jQuery DOM clone 메소드

.clone()은 엘리먼트를 복사하는 메소드이다.

클론은 이벤트 또한 복제하는데 하나하나 살펴보자

아메바......

위의 엘리먼트를 복제해보자

$('p').clone();

자 위의것 대로 하면 될것같지만 복사해서 놓을 위치를 정해줘야 된다. 그래서 .insertAfter()등의 메소드를 사용한다.

$('p').clone().insertAfter('p');

위와같이하면아래와같이 복사되어 나올것이다

아메바......

아메바......

이벤트까지 복제

이벤트 까지 복제하는예제를 보자.변수에 true를 넣으면 이벤트까지복제 반대로 false를 넣어주면 엘리먼트만 복제된다.


위의 버튼을 누르면 복제되도록하려면

  $('button').click(function() {
     //button 엘리먼트에 접근 클릭시 이벤트발생
      $(this).clone(true).insertAfter(this);
     //this 즉 button엘리먼트를 복사해서 그뒤에 붙임
     // clone(true)로 이벤트까지 복사
    }); 

이러면 클릭시 옆에 새로 버튼이 나올거고 또 그버튼을 클릭하면 또 복사되어 나올것이다.

예제릐 결과를 보고싶다면 아레로 가보자

http://sianasiatiger.cafe24.com/study/D_clone.html

저작자 표시
신고

설정

트랙백

댓글

jQuery DOM empty remove 메소드 제거하기

jQuery/DOM&jQuery 2009.11.25 15:12

jQuery DOM empty remove 메소드

제거하기위한 메소드로는 .empty().remove()가 있다..empty()의경우는 검색된 요소안의 모든 엘리먼트를 제거하고 .remove()의 경우는 검색된 엘리먼트와 자식들을 제거한다.차례대로 보자

empty 메소드

empty메소드는 비운다는 말 그대로 모든걸 지운다.해당엘리먼트의 자식과 텍스트모두 제거한다

모두 사라 집니다.

위의 코드에 아래를 삽입하면 아무것도 나오지 않는다.

$('p').empty();
//p란 엘리먼트에 접근후 
//p엘리먼트의 자식과 텍스트 제거

remove 메소드

이메소드는 접근하여 검색된 엘리먼트와 자식,텍스트를 제거한다.

사라짐

안사라짐

위에서 selected란 클래스의 엘리먼트를 사라지게 할것이다.

$('p').remove('.selected');
//p엘리먼트에 접근후 
//selected란 클래스를 가진것을 제거한다.

결과는 안사라짐 이것만 나올것이다.

예제의 결과는 여기에서http://sianasiatiger.cafe24.com/study/D_empty_remove.html

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바